/*====================================================================*/
/* Finger Industries */
/* Created on Oct 2009 */
/* Global screen styles */
/*====================================================================*/

/* ------------------------------------------------------------------ */
/* =Globals */
/* ------------------------------------------------------------------ */

/* Resets */

* {margin: 0; padding: 0;}
img {border: 0;}
hr {display: none;}
acronym, abbr {border-bottom: 1px dotted; cursor: help;}

/* Clearfixes */

.clearfix:after,
#content:after,
div.form-block:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/* @font-face */
/*
@font-face {
  font-family: "Finger Nav";
  src: url("/fonts/FFF-Executive-Trial.eot");
  src: local("FFF Executive Trial"), url("/fonts/FFF-Executive-Trial.ttf") format("truetype");
	}
	
@font-face {
  font-family: "Finger Main";
  src: url("/fonts/FFF-Harmony.eot");
  src: local("FFF Harmony"), url("/fonts/FFF-Harmony.ttf") format("truetype");
	}
*/
/* Links */

a {
	font-weight: normal;
	color: #b00134;
	text-decoration: none;
	}

a:hover,
a:focus {
	color: #000;
	/*text-decoration: underline;*/
	}

/* General styles */

.clear {clear: both;}
.small-text {font-size: 0.9em;}
.hide-1 {display: none;} /* For legends and any element you want to hide on the page - doesn't work with table cells and not good if you need screenreaders to read the content */
.hide-2 {position: absolute; left: -1000em;} /* To remove elements off-screen and remove their effect on other elements in the document - doesn't work with table cells */
.hide-3 {text-indent: -1000em;} /* To hide text in a table cell - still read by screen readers */
.hide-4 {visibility: hidden;} /* To hide an element and its contents but still hold its structure on the page */
.hide-5 {visibility: hidden; text-indent: -1000em;} /* To hide an element and its contents but still have its structure have a partial effect on its surrounding elements */

.centre {text-align: center;}

p.company-info {
	color: #888;
	margin-top: 2.5em;
	}
	
img.jobs-character {
	float: right;
	margin: 0 0 10px 20px;
	}

/* ------------------------------------------------------------------ */
/* =Structural */
/* ------------------------------------------------------------------ */

html {overflow-y: scroll;}

html#modal {overflow: hidden;}

body {
	background: #f7f8f3;
	text-align: left;
	font: normal 62.5%/1.3 Verdana, "Trebuchet MS", Sans-Serif;
	color: #000;
	}
	
#container {
	position: relative;
	margin: 0 auto 30px auto;
	padding: 0 10px 0 0;
	width: 990px;
	}
	
#content {padding-top: 50px;}
	
#column-1,
#footer {
	float: right;
	width: 650px;
	}
		
#column-1 {
	min-height: 700px; /* This determines where the footer and the #column-2 #extras will sit */
	}
	
#column-2 {
	position: absolute;
	top: 240px;
	bottom: 0;
	left: 0;
	z-index: 1;
	margin: 0 0 0 10px;
	width: 250px;
	}
	
h1 {
	position: absolute;
	top: 50px;
	left: -12px;
	z-index: 2;
	width: 220px;
	background: url(/graphics/logo.png) no-repeat;
	}
	
h1 a {
	display: block;
	height: 171px;
	text-indent: -1000em;
	outline: none;
	}

/* ------------------------------------------------------------------ */
/* =Content */
/* ------------------------------------------------------------------ */

.formatting p,
.formatting ul,
.formatting ol,
.formatting dl,
.formatting address,
.formatting blockquote {margin-bottom: 1.5em;}

.formatting li {margin: 4px 0;}
.formatting dt {margin: 0.5em 0 0; font-weight: bold;}

address {font-style: normal;}
ul {margin-left: 15px;}
ul ul {margin: 0.5em 0;}	
ol {margin-left: 1.6em;}

h2, h3,	h4, h5, h6 {
	margin: 0 0 0.7em 0;
	font: normal 1em/1.2 "Trebuchet MS", Verdana, Sans-Serif;
	color: #000;
	}	

h2 {font-size: 2.3em;}

h3, h4, h5 {margin-top: 2em;}
h3 {font-size: 1.8em;}
	
h3.alt-jobs {margin-top: 95px;}

h4 {font-size: 1.2em; font-weight: bold;}	
h5 {font-size: 1.1em;}

/* Image holder */
	
#image-holder {
	margin-bottom: 1.5em;
	/*margin: 0;
	min-height: 700px;*/
	}
		
#image-holder.loading {background: url(/graphics/structure/loading-1.gif) no-repeat 50% 50%;}
	
#image-holder div.wrap {
	display: inline-block;
	position: relative;
	}
	
#image-holder div.wrap img {display: block;}

#image-holder a.more-info {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 18px;
	height: 17px;
	background: url(/graphics/icons/image-info.gif) no-repeat;
	text-indent: -1000em;
	outline: none;
	}

#image-holder a.more-info.close {background-position: 0 100%;}
	
#image-holder #image-details {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 10px 25px;
	background: url(/graphics/structure/image-details-bg.png);
	}

#image-holder #image-details p {margin: 1em 0;}
			
#image-holder p#image-info {margin: 5px 0 0 0;}

/* Thumnails */

ul.thumbnails {
	margin-left: -2px;
	list-style: none;
	}
			
ul.thumbnails li {
	display: inline;
	margin: 0 1px 0 0;
	}
						
ul.thumbnails a {outline: none;}

ul.thumbnails li.on img { border: 2px solid #aaa; }   

ul.thumbnails a img {border: 2px solid #f7f8f3;}
ul.thumbnails a:hover img,
ul.thumbnails a:focus img {border-color: #aaa;}
		
#player {
	margin: 0 0 1.5em 0;
	height: 390px;
	}
			
/* ------------------------------------------------------------------ */
/* =Navigation */
/* ------------------------------------------------------------------ */

ul#navigation {
	float: left;
	margin: 0;
	list-style: none;	
	font: 1.8em/1.0 "Trebuchet MS", Verdana, Sans-Serif;
	}

ul#navigation li {
	position: relative;
	margin: 0 0 5px 0;
	padding: 0 5px 0 0;
	}
	
ul#navigation a {
	display: block;
	padding: 1px 2px;
	width: 77px;
	color: #000;
	}
	
ul#navigation a:hover,
ul#navigation a:focus,
ul#navigation a.on {background: #d6ecac;}

ul#navigation ul {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0;
	list-style: none;	
	font: normal 0.55em/1.2 Verdana, "Trebuchet MS", Sans-Serif;
	}

ul#navigation ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0;
	list-style: none;	
	font-size: 1em;
	}

ul#navigation li:hover ul#sub-nav-1,
ul#navigation li:hover ul#sub-nav-1 li:hover ul#sub-nav-2,
ul#navigation ul.open {display: inline-block;}

ul#navigation ul li {margin: 0;}

ul#navigation ul li.divide {
	margin-top: 13px;
	border-top: 1px solid #413d31;
	padding-top: 13px;
	}

ul#navigation ul a {
	display: block;
	padding: 5px 2px;
	width: auto;
	color: #2d1c0a;
	white-space: nowrap;
	}	

/* ------------------------------------------------------------------ */
/* =Extras - Found in #column-2 */
/* ------------------------------------------------------------------ */
	
#extras {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	}
		
#extras p,
#extras ul {
	margin: 25px 0 0 0;
	list-style: none;
	}
		
#extras a {color: #000;}

/* Jobs */

#extras p.jobs a {
	display: block;
	width: 56px;
	height: 56px;
	background: url(/graphics/icons/jobs.gif) no-repeat;
	text-indent: -1000em;
	outline: none;
	}
	
/* Contact information */
	
#extras ul.contact {
	padding: 2px 4px;
	background: #d6ecad;
	font: 1.3em/1.2 "Trebuchet MS", Verdana, Sans-Serif;
	}
	
/* Request links */
	
#extras ul.request {overflow: hidden;}
	
#extras ul.request li {display: inline;}
#extras ul.request li.showreel {float: left;}
#extras ul.request li.mailing {float: right;}

#extras ul.request li a {
	display: inline-block;
	padding: 2px 8px;
	outline: none;
	}

#extras ul.request li.showreel a {background: #f7e8db;}
#extras ul.request li.mailing a {background: #f4dee0;}
	
#extras ul.request li.showreel a:hover,
#extras ul.request li.showreel a:focus {background: #eacdb4;}
#extras ul.request li.mailing a:hover,
#extras ul.request li.mailing a:focus {background: #ecbec2;}
	
/* Social links */
		
#extras ul.social li {margin: 0;}
#extras ul.social li.twitter {float: left;}
#extras ul.social li.facebook {float: right;}

#extras ul.social a {
	display: block;
	background-repeat: no-repeat;
	text-indent: -1000em;
	outline: none;
	}
/*	
#extras ul.social li.rss a {
	width: 68px;
	height: 17px;
	background-image: url(/graphics/icons/rss.gif);
	}
*/		
#extras ul.social li.twitter a {
	width: 58px;
	height: 12px;
	background-image: url(/graphics/icons/twitter.gif);
	}
		
#extras ul.social li.facebook a {
	width: 55px;
	height: 16px;
	background-image: url(/graphics/icons/facebook.gif);
	}
	
#extras ul.social li a:hover,
#extras ul.social li a:focus {background-position: 0 100%;}
	
/* ------------------------------------------------------------------ */
/* =Footer */
/* ------------------------------------------------------------------ */

#footer {
	margin: 10px 0 0 0;
	text-align: right;
	color: #8a8282;
	}

#footer p.copyright {
	float: left;
	margin: 0 10px 0 0;
	}

#footer a {
	color: #8a8282;
	}

#footer a:hover,
#footer a:focus {color: #b00134;}

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

.formatting ul.unstyled {
	margin-left: 0;
	list-style: none;
	}

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

/* Forms */

form {margin: 0 0 1em 0;}

/* Fieldsets */

fieldset {border: 0;}
	
/* Legends */

legend {display: none;}

/* Structure */

div.form-block {margin: 0.7em 0;}
	
/* Labels */

label {line-height: 1.2;}
	
div.form-block label {display: block;}
	
span.label {
	display: block;
	float: left;
	margin: 0 10px 0 0;
	padding: 4px 0 0 0;
	min-width: 5em;
	width: 25%;
	text-align: right;
	}
	
span.field {
	display: block;
	overflow: hidden;
	padding: 0 5px 0 0;
	}

/* Form elements */
			
input,
textarea,
select,
button {
	vertical-align: middle;
	font: 1em Verdana, "Trebuchet MS", Sans-Serif;
	color: #111;
	}
	
input.radio-check {
	width: 15px;
	vertical-align: middle;
	}

input.text,
textarea,
select {
	border: 1px solid;
	border-color: #b5b5b5 #c9c9c9 #e2e2e2 #c9c9c9;
	padding: 3px 0 3px 2px;
	background: #fff url(/graphics/structure/text-input-shadow-top.gif) repeat-x;
	}

span.field input.text,
span.field textarea,
span.field select {width: 100%;}
		
select {padding: 2px;}
option {padding: 0 2px;}

/* ------------------------------------------------------------------ */
/* =Buttons */
/* ------------------------------------------------------------------ */

a.button,	
input.button,
button {
	border: 0;
	padding: 1px 2px;
	background: #f96709;
	font-family: Verdana, "Trebuchet MS", Sans-Serif;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	}

input.button,
button {padding: 1px;}

a.button:hover,
a.button:focus,
input.button:hover,
input.button:focus,
button:hover,
button:focus {background: #db5702;}

div.form-buttons {overflow: hidden;}
	
input.button-right {float: right;}

/* ------------------------------------------------------------------ */
/* =Modal/overlay box */
/* ------------------------------------------------------------------ */

#mask {
	display: none; 
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	background: url(/graphics/structure/overlay-bg.png);
	}

#overlay-wrap {
  display: none; 
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
	}

#overlay-content {
	position: relative;
	margin: 10% auto 0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 20px 25px;
	width: 300px;
	background: #f7f7f3;
	}

#overlay-content a#modal-close {
	position: absolute;
	top: 10px; /* Adjust for positioning */
	right: 10px; /* Adjust for positioning */
	width: 19px;
	height: 19px;
	background: url(/graphics/structure/modal-close.gif) no-repeat;
	text-indent: -1000em;
	outline: none;
	}

#overlay-content a#modal-close:hover,
#overlay-content a#modal-close:focus {background-position: 0 100%;}