/* 
NOTE: Fjalla tends to look and kern better at odd sizes eg 13px, 15px etc 
Angle 15 degrees

SITE IMAGES
VIDEO IMAGE FOLDERS
video backgrounds - bg
thumbnails - thumb
posters(video preview) - poster

IMAGE FOLDERS
icons - icon
backgrounds - bg
buttons - btn
page backgrounds - page_bg

NEWS
thumbnails - thumb 

TEXT 
H1s 33px
h2's 19px
h3's 17-18px
h4's 13px -14px

COLOURS
Light grey boxes - F2F2F2
Sitewide Red - DF003D
Bodytext -  333
Grey rollover (like nav) - 666
Page titles (like Portfolio) - 999
Grey Icons -B3B3B3
Dark grey backgrounds (like video bg) - 333
Light Bars (that suround page titles) - E6E6E6

BACKGROUND IMAGES
we need red slashes left and right 
grey slashes left and right
white slashes left and right

RULES
we need horizontal rules as home page rotator
in red and in grey
either dotted or shadowed  as tweets home page

*/
/* ==========================================================================
   Basic Page Layout
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
}
html, body {
	height:100%;
	width:100%;
	/*font: 400 14px/17px "Roboto Condensed", sans-serif;*/
  font-family:"Roboto Condensed", sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:17px;
  letter-spacing:-0.01em;
	color: #333;
	background: #E6E6E6 url(../img/page_bg/page_bg.jpg) repeat fixed left top;
}
body {
	overflow-x: hidden;
	/* 
	setting overflow-y to scroll causes the scrollbar to be greyed out
	on pages that are shorter than the window and prevents screen jumps
	 */
	overflow-y: scroll;
}
img.bg {
	height: auto;
	left: 0;
	min-height: 100%;
	min-width: 1024px;
	position: fixed;
	top: 0;
	width: 100%;
}
/* Specific to this particular image width */
@media screen and (max-width: 1024px) {
 img.bg {
 left: 50%;
 margin-left: -512px;   /* 50% */
}
}
#page {
	position:relative;
	width: 1028px;
	height:auto !important;
	min-height:100%;
	margin: 0px auto -50px;
	background: url(../img/bg/page.png) repeat-y left top;
}
#header-container {
	height:65px;
	width:1024px;
	border-bottom: 5px solid #DF003D;
	margin: 0px auto;
}
#footer-container, #push {
	position: relative;
	clear: both;
	height: 50px;
	margin: 0 auto;
	width: 1024px;
}
/* 
Fake border-top for footer container, we can't set a real border 
as it interferes with the push div and causes scrollbars
*/
#footer-border {
	height:10px;
	width:100%;
	background: #DF003D;
}
/*
#footer-container {
border-top: 10px solid #DF003D;
	height: 50px;
}
*/
footer {
	font: 11px 'Fjalla One', sans-serif;
	text-transform:uppercase;
}
.wrapper {
	width:960px;
	margin: 0px auto;
}
#site-header h1 {
	float:left;
	margin:0;
	padding:0;
}
#site-header h1 a {
	font-size: 20px;
	color:#999;
	text-decoration: none;
	background: url(../img/btn/site_logo.png) no-repeat 0px 0px;
	width:265px;
	height:31px;
	float:left;
	margin: 17px 0px 0px -3px;
}
#site-header nav {
	float:left;
	margin-left:113px;
}
nav ul li, #share ul li {
	display: inline;
}
#site-header nav li.first a {
	margin-left: 0;
	padding-left:0;
}
#site-header nav li.last a {
	padding-right:0;
	background: url(none);
}
header ul {
	margin: 0px;
	padding: 0px;
}
#site-header nav a {
	float: left;
	font: 19px 'Fjalla One', sans-serif;
	color:#999;
	text-decoration: none;
	background: url(../img/rules/grey_vr_32.png) no-repeat right -3px;
	padding: 3px 16px 3px 6px;
	margin: 20px 0px 0px 1px;
	text-transform: uppercase;
}
#site-header nav a:hover {
	color:#DF003D;
}
#site-header nav a.active {
	color:#666;
}
#share {
	float:right;
}
#share ul li.last a {
	margin-right: 0;
}
#share a {
	float: left;
	height:24px;
	margin: 21px 7px 0px;
	background: url(../img/btn/main_social.png) no-repeat;
}
/* contact share varient*/
#share.contact-share a {
	float: left;
	height:24px;
	margin: 10px 7px 0px;
	background: url(../img/btn/main_social.png) no-repeat;
}

#share.contact-share {

padding-left:15px;
}


#share.contact-share a#facebook {
margin: 10px 0px 0px;
margin-top:10px;
margin-left:0px;
margin-right:7px;
margin-bottom:0px;
}


#share a#share-this {
	width:23px;
	background-position: 0px 0px;
}
#share a#share-this:hover {
	background-position: 0px -30px;
	/* turn off add this opacity setting*/
	opacity:1 !important;
}


#share a#facebook {
	width:14px;
	background-position: -29px 0px;
}
#share a#facebook:hover {
	background-position: -29px -30px;
}
#share a#twitter {
	width:32px;
	background-position: -49px 0px;
}
#share a#twitter:hover {
	background-position: -49px -30px;
}
#share a#imdb {
	width:45px;
	background-position: -87px 0px;
}
#share a#imdb:hover {
	background-position: -87px -30px;
}
#share a#email {
	width:34px;
	background-position: -138px 0px;
}
#share a#email:hover {
	background-position: -138px -30px;
}
footer span {
	margin-left:5px;
	margin-right:0px;
	padding-bottom:3px;
	padding-top:3px;
}
footer em {
	font-style: normal;
	color: #333;
}
#company-info {
	float:left;
	color: #666;
	margin: 10px 0px 0px;
	padding: 0px;
}
#company-info span.info {
	font: 12px "Roboto Condensed", sans-serif;
	text-transform:none;
	background: url(../img/rules/grey_vr_footer.png) no-repeat left 4px;
	padding-left:12px;
}
#copyright {
	float:right;
	color:#FFF;
	background: url(../img/bg/red_right.png) no-repeat left top;
	padding: 6px 32px 10px 18px;
	margin: 0px -32px 0px 0px;
}

#copyright span.rights {
	background: url(../img/rules/white_vr_footer.png) no-repeat left 0px;
	padding-left:14px;
}

#toTop {
	background: url("../img/btn/to_top.png") no-repeat scroll left top transparent;*/
    border: medium none;
	bottom: 8px;
	display: none;
	height: 35px;
	margin-left: 1030px;
	overflow: hidden;
	position: fixed;
	text-decoration: none;
	text-indent: 100%;
	width: 34px;
	
}

#toTopHover {
    background: url("../img/btn/to_top.png") no-repeat scroll left bottom transparent;
    display: block;
    height: 35px;
    opacity: 0;
    overflow: hidden;
    width: 34px;
}
/* ==========================================================================
   Common Text Styles
   ========================================================================== */	

/* Seperating font sizes from font family makes Fjalla render extra bold */
h1, h2, h3, h4, h5, h6 {
	color:#DF003D;
	margin:0;
	padding:0;
}
h1 {
	font: 33px 'Fjalla One', sans-serif;
	text-transform: uppercase;
}
h2 {
	font: 19px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	margin-bottom:10px;
}
/* slightly larger sub head class*/
h2.sub {
	font-size: 21px;
}
h3 {
	font: 17px 'Fjalla One', sans-serif;
	text-transform: uppercase;
}
h4 {
	font: 14px 'Fjalla One', sans-serif;
	text-transform: uppercase;
}
h5 {
	font: 12px 'Fjalla One', sans-serif;
	text-transform: uppercase;
}
h6 {
	font: 11px 'Fjalla One', sans-serif;
	text-transform: uppercase;
}
p {
	margin-bottom:10px;
}


/*used primarily on news pages with embedded video */
iframe {
	padding-top:15px;
}
a {
	color: #333;
	text-decoration: none;
	outline:none !important;
}
a:hover {
	color:#DF003D;
}
/*TODO: we need to make h1 larger or header smaller doesn't match height exactly */
#page-head {
	background: none repeat scroll 0 0 #E6E6E6;
	display: block;
	height: 28px;
	position: relative;
	width: 1024px;
	margin: 25px auto;
}
#page-head h1 {
	background: url(../img/bg/white_left.png) no-repeat right bottom;
	color: #999999;
	display: inline;
	float: left;
	margin: -5px 0 0 32px;
	padding: 0 15px 0 5px;
}
section, article {
	margin-bottom:30px;
}
section .main {
/*float:left;
	width:400px;
	padding:20px;*/
}
section .secondary {
/*float:right;
	width:300px;*/
}
/* ==========================================================================
   Page Specific Styles
   ========================================================================== */
/* ==========================================================================
   Home
   ========================================================================== */
   #welcome{
   /* background: url("../img/bg/grey_bottom.png") repeat-x scroll left bottom #f2f2f2;*/
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 35px;
    padding-bottom: 0px;
     }
   
   
 #welcome p.foreword{  
    color: #999;
    font: 17px/24px "Fjalla One",sans-serif;
    padding-top: 4px;
    text-transform: uppercase;
 }
  
  .workshops-home h2{
  margin-bottom:5px;
  margin-top:10px;
  }
   
  .workshops-home p{
  font-size: 16px;
  margin-bottom:45px;
  }
  
  .workshops-home .img-responsive{
   /*width:75px;*/
   width:90px;
   margin-right:25px;
   border: solid 3px #df003d;
    }
  
  .workshops-home .img-responsive img{
  width:100%;
  height:auto;
  }
  
  .workshops-home div{
  float:left;
  display:block;
  }
/*#rotator-title, #rotator a.title {
	position:absolute;
	height:60px;
	background-color:#C03;
	color:#FFF;
	bottom:30px;
	left:0px;
	z-index:100;
	text-decoration: none;
	padding-right: 20px;
	padding-left: 20px;
	white-space: nowrap;
}
#rotator-title span, #rotator a.title span {
	display:block;
	font-size: 16px;
	margin-top:15px;
}
*/
/*formerly used on home page no longer needed
#showreel {
	display:block;
	width:1024px;
	height:450px;
	background: url(video_thumbs/showreel.jpg) no-repeat left top;
	z-index:110;
}
#credits {
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #FFF;
	position:absolute;
	width:1024px;
	
	bottom:0px;
	left:0px;
	z-index:120;
	background: url(../img/bg/red_transparent.png) repeat left top;
	display:none;
}
#credits .wrapper div {
	position:relative;
	width:290px;
	height:70px;
	float:left;
}
#credits p {
	margin-bottom:0px;
	position:absolute;
}
#credits #info, #credits #title {
	padding-right:25px;
	margin-right:20px;
	background: url(../img/rules/white_vr_small.png) no-repeat right 5px;
}
#credits #info {
	font-size: 17px;
	line-height:22px;
}
#credits #info p {
	bottom: 12px;
}
#credits #title p {
	bottom: 23px;
	width:250px;
	text-align: center;
	font-size: 15px;
	display:block;
	margin-left:20px;
	margin-right:20px;
	
}
#credits #showreel-button p {
	bottom: 16px;
	font-size: 24px;
	line-height:32px;
	color: #FFF;
	cursor:pointer;
	padding-left:45px;
	background: url(../img/btn/showreel_play.png) no-repeat left top;
	height:32px;
}
#credits #showreel-button p:hover {
	background-position: left bottom;
}
*/
/*text sizes of titles, set on the image class*/
/*small - used for longer titles
#credits #title .sm {
	font-size: 15px;
}
*/
/*medium - used for shorter titles
#credits #title .md {
	font-size: 19px;
	line-height:24px;
}
*/
/*medium - used for even shorter titles
#credits #title .lg {
	font-size: 23px;
}
*/
/*php showreel button fallback, removed by jquery 
#showreel-button-nojs {
	font: 23px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	position:absolute;
	display:block;
	bottom:45px;
	left:0px;
	z-index:130;
	padding:14px 30px 10px 25px;
	cursor:pointer;
	color: #FFF;
	text-decoration: none;
	background: url(../img/bg/red_left.png) no-repeat right bottom;
}
*/
a.video-close-button {
	font: 13px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFF;
	background: url(../img/bg/red_right.png) no-repeat scroll left top;
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index:140;
	/*height: 30px;*/
	width: 46px;
	padding-top:6px;
	padding-bottom:6px;
}
.video-close-button .tool-tip {
	display: none;
	margin-top: 9px;
	padding-left: 20px;
}
.video-close-button .icon {
	background: url(../img/btn/white_cross.png) no-repeat scroll left 1px;
	display: block;
	float: right;
	height: 17px;
	width: 17px;
	margin-right:10px;
}
/*
#credits {
	position:absolute;
	width:450px;
	height:450px;
	top:0px;
	right:0px;
	z-index:120;
	background: url(../img/bg/red_right.png) no-repeat left top;
	overflow:hidden;
	color: #FFF;
}
.credit {
	position:relative;
	height:135px;
}
.credit div {
	position:absolute;
	top:20px;
	height:100%;
}
.credit h2 {
	font: 17px 'Fjalla One', sans-serif;
	color:#FFF;
	margin-bottom:3px;
}
.credit p {
	width:330px;
}
#credits #c1 div {
	left:46px;
}
#credits #c2 div {
	left:82px;
}
#credits #c3 div {
	left:117px;
}
.white-hr {
	bottom: 20px;
	height: 1px;
	position: absolute;
	right: 0px;
	width: 99%;
}
#credits .credit-logo {
	margin-left:8px;
}
#portfolio {
	bottom: 0;
	height: 45px;
	left: 146px;
	position: absolute;
}
#portfolio a {
	font: 21px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFF;
	margin-top:10px;
	display:block;
}
#showreel-button {
	font: 23px 'Fjalla One', sans-serif;
	position:absolute;
	display:block;
	bottom:45px;
	left:0px;
	z-index:130;
	padding:14px 30px 10px 25px;
	cursor:pointer;
	color: #FFF;
	text-decoration: none;
	background: url(../img/bg/red_left.png) no-repeat right bottom;
	text-transform: uppercase;
}
*/
/* Home USPs */
#usps section {
	position:relative;
	margin-top:10px;
	width:290px;
	float:left;
	margin-right:45px;
}
#usps section.last {
	margin-right:0px;
}
#usps img {
	float:left;
	margin-bottom: 10px;
}
#usps h2 {
	position:absolute;
	width:290px;
	height:170px;
	overflow:hidden;
}
#usps h2 span {
	background: url(../img/bg/white_left.png) no-repeat right bottom;
	bottom: -5px;
	font-size: 19px;
	left: 0px;
	padding: 10px 20px 0px 0px;
	position: absolute;
}
#usps p {
	margin-bottom:15px;
}
/* 
* Home news rotator
*/
#news-container {
	background: #F2F2F2 url(../img/bg/grey_right.png) no-repeat 660px top;
	width:1024px;
	margin: 0px auto 30px;
	padding: 30px 0px;
}
#news-articles {
	float: left;
	margin-left: 32px;
	margin-bottom:0px;
	width: 670px;
	/*margin-top: 30px;
	height:200px;*/
	overflow:hidden;
}
#news-articles h2 {
	font-size: 22px;
}
#news-articles h3 {
	margin-top:8px;
	margin-bottom:5px;
}
#news-articles h2 span {
	display:block;
	height:22px;
	margin-right:5px;
	float:left;
	background: url(../img/icon/red_rss.png) no-repeat left 2px;
	width:22px;
}
#news-articles article {
	float: left;
	margin-bottom:0px;
}
#news-articles img {
	float: left;
	border: 8px solid #FFF;
}
#news-articles div {
	display: block;
	float: left;
	height: 178px;
	margin-left: 25px;
	position: relative;
	width: 386px;
	overflow:hidden;
}
#news-articles .read-more {
	bottom:0px;
	position: absolute;
}
#article-links {
	float: right;
	margin-right: 32px;
	margin-bottom:0px;
	/*margin-top: 30px;*/
	width: 290px;
	height:230px;
}
#article-links-container {
	width: 290px;
	height:230px;
	overflow:hidden;
}
#article-links-list {
	margin:0px;
	width: 290px;
	position: relative;
}
li.article-link {
	display: block;
	height: 80px;
	overflow:hidden;
	cursor:pointer;
}
#article-links img {
	float:left;
	border: 3px solid #FFF;
}
#article-links .active img {
	border: 3px solid #DF003D;
}
.article-link h4 {
	display:inline;
	margin-top: 3px;
	padding-right:15px;
}
#article-links .hover h4 {
	background: url(../img/btn/red_arrow_12.png) no-repeat right 2px;
}
.article-link p {
	font-size: 13px;
}
.article-link div {
	float:left;
	width:180px;
	height:65px;
	margin-left: 10px;
	background: url(../img/rules/grey_hr_200.png) no-repeat left bottom;
	overflow:hidden;
}
/* 
* Twitter CSS 
*/
#twitter-container {
	background-color:#DF003D;
	color:#FFF;
	width:1024px;
	margin: 0px auto 10px;
	padding: 30px 0px;
}
#twitter-container h2 {
	color:#FFF;
	background: url(../img/icon/white_twitter.png) no-repeat left 2px;
	display:inline;
	padding-left:35px;
	font-size: 21px;
}
#twitter-container h3 {
	color: #FFFFFF;
	display: inline;
	float: right;
	font-size: 14px;
	margin-right:-9px;
	margin-top:7px;
}
#twitter-container h3 a {
	padding-right:15px;
}
#twitter-container h3 a:hover {
	background: url(../img/btn/white_arrow_14.png) no-repeat right 0px;
}
#twitter-container a {
	color:#FFF;
	text-decoration: none;
}
#twitter-container li.tweet {
	width:210px;
	display:block;
	float:left;
	background: url(../img/rules/white_vr.png) no-repeat right top;
	margin-right:5px;
	padding: 5px 35px 10px 0px;
}
#twitter-container li.tweet:last-child {
	background: url(none);
	margin-right:0px;
	padding: 5px 0px 10px 0px;
}
ul.tweets {
	font-size:13px;
	list-style:none;
}
ul.tweets a {
	font-weight:bold;
}
li.tweet p.content {
	margin-bottom:3px;
}
/* some of this can come out*/
/*
#news-twitter-container, #subfooter-container {
	width:1024px;
	margin: 0px auto 30px;
}
#news-twitter-container {
	background: #F2F2F2 url(../img/bg/grey_right.png) no-repeat 660px top;
}
#subfooter-container {
	background: #F2F2F2 url(../img/bg/grey_top.png) repeat-x left top;
}
#latest-news, #contact-details {
	width:670px;
	margin-left:32px;
	margin-top:30px;
	float:left;
}
#latest-tweets, #cdg {
	width:290px;
	margin-right:32px;
	margin-top:30px;
	float:right;
}
#latest-news h2, #latest-tweets h2 {
	
	margin-bottom:5px;
}
#latest-news h2 span, #latest-tweets h2 span {
	display:block;
	height:20px;
	margin-right:5px;
	float:left;
	background: url(../img/icon/red_rss_twitter.png) no-repeat;
}
#latest-news h2 span {
	width:15px;
	background-position: left bottom;
}
#latest-tweets h2 span {
	width:23px;
	background-position: right bottom;
}
#latest-news article {
	margin-bottom:0px;
}
#latest-news article img {
	float:left;
}
#latest-news article div {
	position:relative;
	display: block;
	float: left;
	height:160px;
	margin-left: 25px;
	width: 400px;
}
#latest-news h3{
	margin-bottom:5px;
	}
#latest-news a.read-more {
	position:absolute;
	bottom:0px;
}
#latest-tweets li {
	padding-top:3px;
	padding-bottom:6px;
	
	background: url(../img/rules/grey_hr_290.png) no-repeat center bottom;
}
#latest-tweets li:first-child {
	padding-top:0px;
}
#latest-tweets li:last-child {
	padding-bottom:0px;
	background: url(none);	
}
#latest-tweets p {
	display:inline;
	line-height: 16px;
}
#latest-tweets a {
	color:#333;
}
#latest-tweets a:hover {
	color:#DF003D;
}
#subfooter-container {
	margin-bottom:10px;
}
#subfooter-container #map {
	float:left;
}
#subfooter-container #address {
	float:left;
	height:150px;
	margin-left: 25px;
	width: 310px;
}
#subfooter-container h3 {
	font-size:16px;
	color:#666;
}
#subfooter-container h3 span {
	color:#999;
	font-weight:normal;
}
#subfooter-container p {
	font-size:13px;
	margin-bottom:3px;
	line-height: 16px;
}
#subfooter-container a, #subfooter-container span {
	color:#333;
	font-weight:bold;
}
#subfooter-container a:hover {
	color:#DF003D;
}
#subfooter-container #address p {
	line-height: 22px;
}
#cdg img {
	float: left;
	margin: 2px 8px 0px 0px;
}
*/
/* ==========================================================================
   About
   ========================================================================== */
#about section {
	margin-bottom:0px;
	position:relative;
}
#biog {
	background: #F2F2F2 url(../img/bg/grey_bottom.png) repeat-x left bottom;
	padding-bottom:50px;
	/*height:725px;*/
}
.cv {
	overflow:hidden;
	margin-top:-10px;
}

#biog .main {
	margin-top: 50px;
	margin-left: 35px;
	width:840px;
}
#biog #intro{
	margin-bottom: 15px;
	
}
#biog .main p.foreword{
	font: 17px/24px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #999;
	padding-top:4px;
	/*width:700px;*/
}
#biog p.contact{
	margin-top: 20px;
	font: 15px/21px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #999;
}

#biog .foreword-img{
	border: 8px solid #FFF;
	margin-right:20px;
	float:left;
}
	
#biog p.contact a{
 color: #DF003D;
}
#biog p.contact a:hover{
 color: #DF003D;
}

#biog p.contact span{
 color: #DF003D;
}
.biog-img{
	border: 8px solid #FFF;
	float:left;	
}
	
.biog-info{
	display:block;
	width:600px;
	float:left;
	margin-left:35px;
	margin-bottom:25px;
	background: url(../img/rules/grey_hr_600.png) no-repeat left top;
}
	
#biog .biog-info h2{
	font-size:24px;
}
#biog .biog-info h2 span{
	font-size:19px;
}

#about #photo-info{
	font-size:13px;
	/*margin-left:220px;*/
	margin-bottom:30px;
}

/*home page*/
/*
#about-msc{
	
	
	margin-top:35px;
	background-color:#F2F2F2;
	
	}
#about-msc #intro{	
	padding-bottom:25px;
	padding-left:35px;
	padding-top:35px;
	width:850px;
}

#about-msc .foreword-img{
	border: 8px solid #FFF;
	margin-right:20px;
	margin-left:35px;
	margin-top:35px;
	float:left;
}

	
#about-msc #intro p.foreword{
	font: 17px/24px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #999;
	padding-top:4px;
	

}

#about-msc p.contact{
	margin-top: 20px;
	font: 15px/21px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #999;
}
#about-msc p.contact a{
 color: #DF003D;
}
#about-msc p.contact a:hover{
 color: #DF003D;
}

#about-msc p.contact span{
 color: #DF003D;
}



#about-msc-alt{
	
	
	margin-top:32px;
	background-color:#F2F2F2;

	
	}
#about-msc-alt #intro{	
	
	padding-left:35px;
	padding-top:35px;
	width:850px;
}

#about-msc-alt .foreword-img{
	border: 8px solid #FFF;
	margin-right:25px;
	margin-left:32px;
	margin-top:32px;
	margin-bottom:32px;
	float:left;
}

	
#about-msc-alt #intro p.foreword{
	font: 17px/24px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #999;
	padding-top:4px;
	
	
}

#about-msc-alt p.contact{
	margin-top: 10px;
	font: 15px/21px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #999;
}
#about-msc-alt p.contact a{
 color: #DF003D;
}
#about-msc-alt p.contact a:hover{
 color: #DF003D;
}

#about-msc-alt p.contact span{
 color: #DF003D;
}
*/
/*
#biog .main {
	margin-top: 35px;
	margin-left: 35px;
	width:400px;
	z-index:1;
}

#biog .secondary {
	position:absolute;
	background: url(../img/bg/about_montage.png) no-repeat right top;
	width:530px;
	height:760px;
	top:0px;
	right:0px;
}
*/
/* shared with another section , find a better class name */
#biog h2, #workshops #intro h2 {
	font-size: 33px;
	margin-bottom:10px;
	margin-top:20px;
}

#biog h2 span, #workshops h2 span {
	font-size: 21px;
	color: #999;
	display:block;
}
#about .list {
	margin-top:-40px;
}
#about #cv-commercials {
	margin-bottom:88px;
}
.list h2 {
	font: 21px/23px 'Fjalla One', sans-serif;
	border-bottom: 10px solid #FFF;
}
.list h2 a, .list h2 span {
	background: url(../img/bg/white_left.png) no-repeat right bottom;
	display:inline;
	float:left;
	padding: 10px 30px 0px 0px;
	cursor:pointer;
	color:#DF003D;
	text-decoration: none;
}
.list span.toggle {
	background: url(../img/btn/open_close.png) no-repeat;
	padding:0px;
	width:18px;
	height:18px;
	text-indent:-9999px;
	overflow:hidden;
	margin-top:2px;
	margin-right:10px;
}
/* second class is set via jquery on the h2 element */
.open a .toggle, .open span.toggle {
	background-position:left top;
}
.open a:hover .toggle, .open .hover span.toggle {
	background-position:left bottom;
}
.close a .toggle, .close span.toggle {
	background-position:right top;
}
.close a:hover .toggle, .close .hover span.toggle {
	background-position:right bottom;
}
/* Show/hide list divs, removed by jquery */
.close .cv {
	height:40px;
}
/*last cv div is a special case, height is set at 0*/
#cv-commercials.close .cv {
	height:0px;
}
.open div.cv {
	height:auto;
}
.cv-bg {
	background: #F2F2F2 url(../img/bg/grey_left.png) no-repeat -500px bottom;
	padding-bottom: 70px;
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 30px;
}
.cv ul {
	list-style: none;
	width:265px;
	float:left;
	padding-right:40px;
}
.cv ul.last {
	padding-right:0px;
}
.cv ul li {
	padding-top:10px;
	padding-bottom:10px;
	background: url(../img/rules/grey_hr_265.png) no-repeat left bottom;
}
/*.cv td {
	font-size: 13px;
	padding-bottom:8px;
	padding-top:8px;
	vertical-align: top;
	background: url(../img/rules/grey_hr_400.png) no-repeat left bottom;
}*/
/*
.cv td.no-bg {
	background: url(none);
}
*/
/* Years */
/*
col.years {
	width:60px;
}
col.cv-col-1 {
	width:430px;
}
col.cv-col-2 {
	width:400px;
}
*/
.cv h3 {
	font: 20px 'Fjalla One', sans-serif;
	color: #999;
}
.cv h4 {
	font: 15px 'Fjalla One', sans-serif;
}
.cv h4 a {
	color: #DF003D;
	background: url(../img/btn/video_play_small.png) no-repeat left 1px;
	padding-left:22px;
	text-decoration: none;
}
.cv h4 a:hover {
	background-position: left -18px;
}
.cv p {
	margin-bottom:0px;
	font-size: 13px;
	line-height: 16px;
}

#cv-commercials .cv-bg {
	
	padding-bottom: 40px;
	
}
#download-cv-long{
	width:960px;
	height:56px;
	background: #F2F2F2;
	position:absolute;
	left:0px;
	bottom:-56px;
	}


#download-cv-long p{
	background: url(../img/btn/cv_dl_long.png) no-repeat left top;
	height: 56px;
	width: 516px;
	display:block;
	
}

#download-cv-long p:hover{
	background-position: left bottom;
	
}
#download-cv-long a{
	display:block;
	float:left;
}
#download-cv-long #cv{
	font: 24px 'Fjalla One', sans-serif;
	text-transform:uppercase;
	color: #FFF;
	padding-top:14px;
	margin-left:33px;
	width:205px;
	background: url(../img/btn/cv_dl_small.png) no-repeat right 13px;	
}
#download-cv-long #acrobat{
	color: #FFF;
	font-size:13px;
	line-height:16px;
	padding-top:11px;
	width:200px;
	padding-left:30px;
}

/* ==========================================================================
   News
   ========================================================================== */
/* 
* Articles CSS
*/



#news {
	position:relative;
}
#news #info {
	position:relative;
	margin-top:0px;
	margin-bottom:10px;
}
#news #info p {
	font: 15px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color:#999;
	display:block;
}
#info #showing-tag {
	float:left;
}
#info #showing-tag span {
	color:#666;
	background: url(../img/rules/grey_vr_28.png) no-repeat right 0px;
	padding-right:12px;
	padding-top:6px;
	padding-bottom:6px;
}
#info #showing-tag a {
	padding-left:2px;
	padding-right:6px;
	color:#999;
}
#info #showing-tag a span {
	display:block;
	width:12px;
	height:12px;
	background: url(../img/btn/grey_red_cross.png) no-repeat right top;
	padding:0px;
	float:right;
	margin-top:3px;
}
#info #showing-tag a:hover span {
	background-position: right -13px;
}
#info #showing-tag a:hover {
	color: #DF003D;
}
#info #page-num {
	float:right;
}
#news nav {
	position:absolute;
	right:0px;
	font: 15px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	background: url(../img/bg/white_right.png) no-repeat left top;
	padding: 0px 10px 0px 15px;
	height:28px;
}
#news nav ul {
	margin-top:4px;
}
#news nav li {
	background: url(../img/rules/grey_vr_28.png) no-repeat right top;
	padding-top:6px;
	padding-bottom:6px;
	padding-right:10px;
	padding-left:4px;
}
#news nav li.last {
	background: url(none);
	padding-right:4px;
}
#news nav #previous-btn, #news nav #next-btn {
	background: url(none);
	padding-right:0px;
	padding-left:0px;
}
#news nav a:hover {
	color:#DF003D;
}
#news nav li.current {
	color:#666;
}
#news nav li, #news nav a {
	color:#999;
	line-height:22px;
}
#news nav #next-btn a, #news nav #next-btn span {
	float:right;
}
#news nav #previous-btn a, #news nav #previous-btn span {
	float:left;
}
#news #next-btn a, #news #previous-btn a, #news #next-btn span, #news #previous-btn span {
	background: url(../img/btn/grey_arrows.png) no-repeat;
	width:16px;
	height:21px;
	text-indent:-9999px;
	overflow:hidden;
	display:inline;
}
#news #next-btn a, #news #next-btn span {
	background-position: right top;
	margin-left:2px;
}
#news #previous-btn a, #news #previous-btn span {
	background-position: left top;
	margin-right:2px;
}
#news #previous-btn span {
	background-position: left -21px;
}
#news #next-btn span {
	background-position: right -21px;
}
#news #previous-btn a:hover {
	background-position: left -42px;
}
#news #next-btn a:hover {
	background-position: right -42px;
}
#news nav#paging-top {
	top:-53px;
	right:0px;
}
#news nav#paging-bottom {
	right:32px;
}
#paging-bottom-container {
	position:relative;
	height:28px;
	margin-left:-32px;
	margin-right:-32px;
	margin-bottom:25px;
	background-color:#E6E6E6;
}
#news article {
	position:relative;
	/*background: #F2F2F2 url(../img/bg/grey_right_45.png) no-repeat 760px top;
	background: #F2F2F2 url(../img/bg/grey_left.png) no-repeat -755px bottom;*/
	overflow:hidden;
	background: #F2F2F2;
}
#news article img {
	float:left;
	border-right: 8px solid #FFF;
	border-bottom: 8px solid #FFF;
	margin-bottom:-8px;
}
#news article h2 {
	padding-top:6px;
	padding-bottom:6px;
	margin-bottom:0px;
}
/*sets colour on home page also */
#news article h2 span, #news-articles h3 span {
	color: #999;
	background: url(../img/rules/grey_vr_32.png) no-repeat right 0px;
	padding-right:12px;
	padding-top:6px;
}
#news article .wrapper {
	float:left;
	width:570px;
	padding-left:35px;
	padding-top:29px;
}
div.tags {
	position:absolute;
	bottom:20px;
}
div.tags p {
	margin-bottom:0px;
	white-space: nowrap;
	width:600px;
	padding: 6px 10px 6px 30px;
	background: url(../img/bg/tags.png) no-repeat 0px 0px;
}
/* REMOVED TEMPORARILY 
div.tags p.short {
	background-position: 64px 0px;
}
*/
div.tags p a {
	padding: 0px 4px 0px 14px;
	color:#333;
	background: url(../img/rules/grey_vr_17.png) no-repeat left 0px;
	font-size:13px;
}
div.tags p a.first {
	background: url(../img/rules/red_vr_17.png) no-repeat left 0px;
}
div.tags p a:hover {
	color:#DF003D;
}
div.tags p span {
	font: 12px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color:#DF003D;
	padding: 0px 3px 0px 0px;
}
section.story {
	display:none;
	margin-bottom:80px;
}
section.excerpt {
	margin-bottom:0px;
}
section.story .sidebar-left {
	left: 30px;
	position: absolute;
	top: 230px;
	width: 220px;
	padding-top:0px;
}
section.story .production {
	padding-top:10px;
	font-size:13px;
}
/*section.story .production-bg{
	position: absolute;
	bottom:0px;
	height:150px;
	left:0px;
	width:248px;
	background: #036 url(../img/bg/grey_left.png) no-repeat fixed right bottom;
	}*/

.more section.story {
	display:block;
}
.read-more, #ef-submit {
	display:block;
	float:left;
	font: 13px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	height:30px;
	color:#FFF;
	background: url(../img/btn/red_btn_left.png) no-repeat right top;
}
.read-more:hover, #ef-submit:hover {
	color:#FFF;
	text-decoration: none;
	background-position: right -65px;
}
.read-more span {
	display:block;
	padding: 8px 26px 6px 12px;
}
.read-more .close {
	background: url(../img/btn/white_cross.png) no-repeat 48px 9px;
	padding-right:53px;
}
/* news sharing links */

.news-share {
	background: #F2F2F2 url(../img/bg/grey_right_45.png) no-repeat left top;
	position:absolute;
	right:0px;
	top:0px;
	padding-left:24px;
	padding-right:16px;
	height:45px;
	width:140px;
}
.news-share ul li {
	display: inline;
}
.news-share ul li:last-child a {
	margin-right: 0;
}
.news-share a {
	float: left;
	height:21px;
	margin: 16px 6px 0px;
	background: url(../img/btn/small_social.png) no-repeat;
}
.news-share a#share-this {
	width:20px;
	background-position: 0px 0px;
}
.news-share a#share-this:hover {
	background-position: 0px -25px;
	opacity:1 !important;
}
.news-share a#facebook {
	width:12px;
	background-position: -26px 0px;
}
.news-share a#facebook:hover {
	background-position: -26px -25px;
	opacity:1 !important;
}
.news-share a#twitter {
	width:27px;
	background-position: -44px 0px;
}
.news-share a#twitter:hover {
	background-position: -44px -25px;
	opacity:1 !important;
}
.news-share a#email {
	width:30px;
	background-position: -77px 0px;
}
.news-share a#email:hover {
	background-position: -77px -25px;
}
/* 
* Rotator CSS 
* TODO: As this covers the showreel and the news page we could roll most of these functions into one and call it full page rotator container or something
and call the smaller ones on workshops etc something else at the moment classes are covering those
*/
#rotator-container {
	position:relative;
	overflow:hidden;
	height:450px;
	width:1024px;
	margin-left:auto;
	margin-right:auto;
}
#rotator {
	left:-118px;
	width:1260px;
	height:450px;
	/*background: url(../img/video/bg/video_bg.png) repeat left top;*/
}
#rotator-title, #rotator a.title, #rotator p.title {
	position:absolute;
	height:80px;
	bottom:50px;
	left:0px;
	z-index:100;
	padding-right: 40px;
	padding-left: 32px;
	white-space: nowrap;
	background: url(../img/bg/red_left_transparent.png) no-repeat right bottom;
	font: 17px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color:#FFF;
	
}

#rotator .featured a.title, #rotator .featured p.title {
	margin-left:118px;
	
}
#rotator-title span, #rotator a.title span, #rotator p.title span {
	display:block;
	font-size: 26px;
	margin-top:17px;
	margin-bottom:2px;
	
}
#rotator-title a {
	color:#FFF;
	text-decoration: none;
}
/* hides all links unless they have the featured class, used in php version, will be removed by jquery*/
#rotator div {
	display:none;
}
#rotator div.featured {
	display:block;
	position:relative;
	margin-left:-118px;
}
#rotator-nav-container {
	position: relative;
	z-index: 1;
}
#rotator-nav {
	left: 50%;
	margin-left: -53px;
	position: absolute;
	top: 25px;
}
#rotator-nav li {
	display:block;
	float:left;
	text-indent: -9999px;
	background-color:#FFF;
	padding: 9px 5px;
}
#rotator-nav a {
	display:block;
	width:10px;
	height:10px;
	background-color:#999;
	overflow:hidden;
	text-indent:-9999px;
}
#rotator-nav a:hover {
	background: #666;
}
#rotator-nav li:first-child {
	padding-left:17px;
	background: url(../img/bg/white_right.png) no-repeat left top;
}
#rotator-nav li:last-child {
	padding-right:17px;
	background: url(../img/bg/white_left.png) no-repeat right bottom;
}
#rotator-nav li.cycle-pager-active a, #rotator-nav li.active a {
	background-color:#DF003D;
}


/*page specific changes */
/*#workshops-page #rotator-title, #about-page #rotator-title, #rotator p.title{
	height:90px;
}
*/
#rotator-title {
	height:107px;
}
/*#workshops-page #rotator-title p.title, #about-page #rotator-title p.title{
	margin-top:17px;
}*/
#rotator p.title, #rotator-title p.title{
	padding-top:17px;
	cursor:default;	
}

#rotator-title span.actor, #rotator p.title span.actor{
	margin-top:2px;
	margin-bottom:2px;
}
#rotator-title span.actor-credits, #rotator p.title span.actor-credits{
	margin-top:0px;	
	font-size: 15px;
}

/*temp while there is no rotator on workshops*/

#workshops-page #rotator p.title{
	display:block;
	height:72px;
	bottom:40px;
}

#news-page #rotator-title {
	
	height:86px;
	
}

#home-page #rotator-title {
	
	height:86px;
	
}
/* ==========================================================================
   Workshops
   ========================================================================== */
#workshops section {
	background-color:#F2F2F2;
	position:relative;
}
#workshops .main {
	float:left;
	margin: 35px 35px 0px;
}
#workshops .secondary {
	height:100%;
	position:absolute;
	top:0px;
	right:0px;
}
#workshops #description .secondary {
	color:#FFF;
	background: url(../img/bg/red_white_right.png) no-repeat left top;
}
#workshops #intro, #workshops #intro .rotator {
	height:320px;
}
#workshops #description {
	/*height:368px;*/
	height:330px;
}
/*
#workshops #testimonials, #workshops #testimonials .rotator {
	height:380px;
}*/

#workshops #testimonials {
	height:400px;
	background: #F2F2F2 url(../img/bg/grey_right.png) no-repeat 635px top;
}
#workshops #intro .main {
	width:380px;
}
#workshops #intro .secondary {
	position:absolute;
	width:520px;
}
#workshops #description .main {
	width:465px;
}
#workshops #description .secondary {
	width:428px;
}
/*
#workshops #testimonials .main {
	width:650px;
}*/
#workshops #testimonials .secondary {
	width:312px;
}
.rotator-container {
	overflow:hidden;
	position:relative;
}
.rotator-container .overlay {
	background: url(../img/bg/grey_white_left.png) no-repeat left top;
	height:100%;
	width:100%;
	position:absolute;/*z-index:200;*/
}
/*
temp will be removed
.testimonial-rotator img {
	top:0px;
	position:absolute;
	display:none;
}
*/
.testimonial-rotator p {
	font-size: 16px;
	font-style: italic;
	color: #FFF;
	width: 320px;
	margin-left:155px;
	line-height: 19px;
	display:block;
	position:relative;
}
.testimonial-rotator span {
	display:block;
	margin-bottom:12px;
}
.testimonial-rotator span.author {
	font: 16px 'Fjalla One', sans-serif;
	color:#B3B3B3;
	text-transform: uppercase;
}
.testimonial-rotator span.lquote, .testimonial-rotator span.rquote {
	width:70px;
	height:57px;
	background: url(../img/icon/grey_quotes_large.png) no-repeat;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
}
.testimonial-rotator span.lquote {
	top:-24px;
	left:-85px;
	background-position:left top;
}
.testimonial-rotator span.rquote {
	right:-10px;
	bottom:-33px;
	background-position:right top;
}
/* specific testimonials formatting */
#testimonial-1 {
	margin-top:56px;
}
#testimonial-2 {
	margin-top:82px;
}
#testimonial-3 {
	margin-top:90px;
}
#workshop-details {
	width:100%;
	margin-top:35px;
}
#workshop-details a {
	color:#FFF;
}
.white-hr {
	bottom: 20px;
	height: 1px;
	position: absolute;
	right: 0px;
	width: 99%;
}
#workshop-details .white-hr {
	top:-14px;
}
#workshop-details div {
	padding-right:30px;
	position: relative;
	right: 0;
	margin: 29px 10px 0px 0px;
}
#workshop-details h2 {
	background: url(../img/icon/diary.png) no-repeat scroll 0 3px;
	color: #FFFFFF;
	margin: -5px 0px 0px 108px;
	padding: 5px 0px 0px 35px;
}
#workshop-details .dates {
	font-size: 18px;
	line-height: 24px;
	margin-left:32px;
	padding-left: 110px;
}
#workshop-details .address {
	font-size: 16px;
	line-height: 24px;
	margin-left:53px;
	padding-left: 89px;
}
#workshop-details .notes {
	font-size: 13px;
	margin-left:80px;
	padding-left: 62px;
}
/*
#workshop-details .booking {
	font:19px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	margin-left:107px;
	padding-left: 35px;
}
#workshop-details .booking a:hover {
	background: url(../img/btn/white_arrow_19.png) no-repeat right 1px;
	padding-right:18px;
}*/
blockquote {
	float:left;
	width:270px;
	font-style: italic;
	margin: 0px 40px 25px 0px;
}
blockquote.last {
	margin-right: 0px;
}
blockquote span {
	color:#DF003D;
	width:14px;
	height:14px;
	background: url(../img/icon/red_quotes.png) no-repeat;
	display:inline-block;
	text-indent:-9999px;
	overflow:hidden;
}
span.lquote {
	background-position:left 3px;
	margin-right:5px;
}
span.rquote {
	background-position: right 3px;
	margin-left:5px;
}
blockquote .author {
	margin-top:-5px;
	font-weight: 700;
	font-style: normal;
}
/* ==========================================================================
   Contact
   ========================================================================== */
#contact-form-container .wrapper {
	margin-right:35px;
	margin-left:35px;
	margin-top:35px;
	padding-bottom:35px;
	width:410px;
	float:left;
}
#contact-details-container {
	background: #F2F2F2;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
#contact-form-container {
	background: #F2F2F2 url(../img/bg/grey_right.png) no-repeat 440px top;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
#contact-details-container div {
	float: left;
	padding-top: 35px;
	padding-bottom: 15px;
	position: relative;/*width: 290px;*/
}
#contact-details-container p {
	margin-bottom:0px;
}
#contact-details-container a {
	color: #333;
	text-decoration: none;
}
#contact-details-container a:hover {
	color:#DF003D;
}
#contact-details-container #address, #contact-details-container #tel-fax-email {
	padding-left:35px;
	padding-right:20px;
	/*background: url(../img/rules/grey_vr_120.png) no-repeat right 15px;*/
}
#contact-details-container #address {
	padding-left:35px;
	padding-right:33px;
	width:305px;
}
#contact-details-container #tel-fax-email {
	padding-left:12px;
	padding-right:35px;
	width:265px;
}
#contact-details-container #contact-share {
	padding-left:15px;
	padding-right:35px;
	width:530px;
}
#contact-details-container #contact-share strong{
	color:#DF003D;
}


/*#contact-details-container #share {
	padding-left:15px;
	width:215px;
}*/

#contact-details-container #email-notes {
	background: url(../img/icon/red_asterisk.png) no-repeat 35px 19px;
	font-size:14px;
	line-height: 20px;
	padding: 15px 35px 35px 60px;	
}
/*#contact-details-container #map {
	float:left;
	width:512px;
	overflow:hidden;
}
#contact-details-container img {
	float:right;
	border-right: 5px solid #FFF;
}

#contact-details-container #address {
	float:left;
	margin-left:35px;
	margin-right:35px;
	margin-top:35px;
}
*/
#contact-details-container h2 {
	margin-bottom:0px;
	margin-top:-2px;
}
#contact-details-container h2 span {
	color:#666;
	font-size: 21px;
}
#contact-details-container p {
	font-size: 16px;
	line-height: 24px;
}
#contact-details-container span {
	font: 15px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color:#DF003D;
}
#showreel-guide h2 {
	background: url(../img/icon/dvd.png) no-repeat left top;
	padding-left:65px;
}
#showreel-guide div {
	margin-top:20px;
	font-size: 13px;
	line-height: 16px;
	padding-left:25px;
	background: url(../img/icon/red_asterisk.png) no-repeat left 4px;
}
#enquiries-form label {
	float:left;
	width:60px;
	font:13px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #999;
}
#enquiries-form a {
	font-weight: 700;
	color: #333;
	text-decoration: none;
}
#enquiries-form a:hover {
	color:#DF003D;
}
#enquiries-form p {
	margin-bottom:15px;
}
#ef-name, #ef-email, #ef-message {
	width:300px;
	padding-left:10px;
	padding-right:10px;
}
#enquiries-form #ef-submit {
	padding-top:2px;
	border: 0 none;
}
/* not working in FF see below */
#ef-detect {
	border: 0px none;
}
#ef-name, #ef-email {
	height:30px;
}
#ef-message {
	min-height:200px;
	padding-top:10px;
	padding-bottom:10px;
}
#submit-ctrls label {
	font: 13px/16px "Roboto Condensed", sans-serif;
	text-transform: none;
	width:auto;
	color: #333;
	margin-right:15px;
}
#submit-ctrls span {
	float:right;
	margin-right:30px;
}
#ef-submit {
	border: none;
	padding-left:15px;
	padding-right:30px;
	margin-left:60px;
}
#contact-details-container span.asterisk{
	font: 13px/16px "Roboto Condensed", sans-serif;
	}
.asterisk {
	
	color:#DF003D;
}
#enquiries-form input, #enquiries-form textarea {
	border: 1px solid #FFF;
}
#enquiries-form .error{
	border: 1px solid #DF003D;
}

#enquiries-form label.error {
	color: #DF003D;
	border:0 none;
}

#ef-feedback {
	color:#FFF;
	font:14px 'Fjalla One', sans-serif;
	text-transform:uppercase;
	width:380px;
	margin-top:10px;
	margin-bottom:18px;
	border: 1px solid #DF003D;
	background: #DF003D;
	position:relative;
}
#ef-feedback div{
	padding:20px 20px 10px;
}
#feedback-icon{
	background: #DF003D url(../img/icon/form-result.png) no-repeat left top;
	width:32px;
	height:32px;
	position:absolute;
	right:11px;
	top:11px;
}
#feedback-icon.ok{
	background-position:right top;
	}

#ef-feedback p {
	margin-bottom:7px;
}
#submit-ctrls span span {
	width:15px;
	height:15px;
	display:block;
	background-color:#FFF;
	border: 1px solid #FFF;
}
#submit-ctrls .checked {
	background: #FFF url(../img/icon/checkbox.png) no-repeat 1px 1px;
}
/* TODO: REPLACE WITH VISUALLY HIDDEN CLASS*/
.hidden {
	display:none;
	visibility:hidden;
}
/* ==========================================================================
   Portfolio
   ========================================================================== */
/*#sub-head {
	position:relative;
	display:block;
	width:100%;
	margin-top:25px;
	background: #E6E6E6;
	height:28px;
}
.page-title {
	display:inline;
	float:left;
	font: 33px 'Fjalla One', sans-serif;
	color: #999;
	padding: 0px 10px 0px 5px;
	background: #FFF;
	margin: -5px 0px 0px 24px;
}*/

/*hide ctrls if no js*/

.no-js #ctrls {
	display:none;
}
#ctrls {
	display:block;
	float:right;
	background: url(../img/bg/white_right.png) no-repeat left top;
	height:30px;
	margin: 0px 24px 0px 0px;
	padding-left:14px;
}
#ctrls span.tool-tip {
	display:block;
	float:left;
	margin: 7px 10px 0px 0px;
	font: 12px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #DF003D;
	text-align: right;
	white-space: nowrap;
}
#grid-btn, #list-btn {
	display:block;
	float:left;
	height: 29px;
	margin-right:8px;
	text-indent:-9999px;
	overflow:hidden;
}
#grid-btn {
	background: url(../img/btn/grid_view.png) no-repeat left top;
	width: 29px;
}
#grid-btn:hover {
	/*background: url(../img/btn/grid_view.png) no-repeat left bottom;*/
	background-position: left bottom;
}
#list-btn {
	background: url(../img/btn/list_view.png) no-repeat left top;
	width: 32px;
}
#list-btn:hover {
	/*background: url(../img/btn/list_view.png) no-repeat left bottom;*/
	background-position: left bottom;
}
#portfolio-page #info {
	position:relative;
	display:block;
	/*width:100%;*/
	width:960px;
	margin: 16px auto 0px;
	font-size: 16px;
	line-height: 22px;/*letter-spacing: 0.01em*/
}
#info a {
	color:#333;
	text-decoration:none;
}
#info a:hover {
	color:#DF003D;
}
/* instead of using a span here maybe we make a 'light' or 'regular' class to change text throughout site
#info span {
	font-weight: 300;
}*/
#download-cv {
	padding-bottom:0px;
	margin-bottom:0px;
}
#download-cv a {
	height:45px;
	width:110px;
	position:absolute;
	right:-32px;
	top:0px;
	background: url(../img/btn/cv_dl.png) no-repeat right top;
	text-indent:-9999px;
	overflow:hidden;
}
#download-cv a:hover {
	/*background: url(../img/portfolio/icon_cv_dl.png) no-repeat right bottom;*/
	background-position: right bottom;
}
#video-list {
	position:relative;
	/*padding-bottom:50px;*/
	width:960px;
	margin: 30px auto 0px;
}
.no-js #video-list {
	margin: 60px auto 0px;
}
.vl-item {
	overflow:hidden;
	position:relative;
	margin-bottom: 33px;
	display:inline;
	float:left;
	background: #F2F2F2 url(../img/bg/grey_right.png) no-repeat 650px top;
}
#video-list.grid-view .row-end {
	margin-right: 0px;
}
/*listing text and video -panel text share some attributes, makes sense to group them here */
.vl-text, #vp-text {
	display:block;
	height:auto;
	float:left;
}
#vp-text {
	width:280px;
	color:#999;
	margin: 55px 0px 60px;
}
.vl-text div {
	display:block;
	padding-top:30px;
	float:left;
}
.vl-text .synopsis {
	width:400px;
	margin-left:30px;
	padding-bottom:20px;
}
#vp-text .synopsis {
	margin-bottom:20px;
}
.vl-text .production {
	width:230px;
	margin-left:40px;
	font-size: 13px;
	padding-bottom:20px;
}
#vp-text .production {
	font-size: 13px;
}
.vl-text .production p, #vp-text .production p {
	padding-bottom:5px;
}
.vl-text h3, #vp-text h3 {
	font: 13px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #DF003D;
}
.vl-text h2, #vp-text h2 {
	/*font: 20px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #DF003D;*/
	margin-bottom:6px;
}
/*.vl-text h2 span, #vp-text h2 span {
	color: #999;
}*/
.vl-link {
	display:block;
}
.vl-link img {
	display:block;
	float:left;
	position:relative;
}
#video-list.list-view .vl-link img {
	border-right: 8px solid #FFF;
	border-bottom: 8px solid #FFF;
	margin-bottom:-8px;
}
.vl-link .over {
	position:absolute;
	display:none;
	width:215px;
	height:180px;
	top:0px;
	left:0px;
	z-index:1;
	font: 15px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	background: url(../img/bg/red_transparent.png) repeat 0px 0px;
}
.vl-link .genre, .vl-text .genre {
	position:absolute;
	top:-1px;
	right:0px;
	z-index:1;
	background: url(../img/bg/white_right.png) repeat left top;
	text-align: right;
	padding: 0px 0px 5px 12px;
	font-size: 15px;
}
.grid-view .vl-link .genre {
	display:block;
	color: #DF003D;
}
.list-view .vl-link .genre {
	display:none;
}
.list-view .vl-text h3.genre {
	color: #CCC;
}
.vl-link .title {
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:2;
	padding: 0px 15px 15px;
	color: #FFF;
}
.grid-view .vl-link .title {
	display:block;
}
.list-view .vl-link .title {
	display:none;
}
.vl-link .play {
	position:absolute;
	display:block;
	top:68px;
	left:86px;
	z-index:3;
	height: 44px;
	width:44px;
	background: url(../img/btn/video_play_btn.png) no-repeat left top;
}
#video-panel {
	width:1024px;
	float:left;
	margin-bottom: 40px;
	margin-left:-32px;
	position:relative;
	border-top: 5px solid #DF003D;
	background: url(../img/video/bg/video_bg.png) repeat left top;
}
#video-panel-bg {
	width:1024px;
}
.grid-view .vl-item {
	display:inline;
	float:left;
	margin-right:33px;
}
.list-view .vl-item {
	display:block;
	float:none;
	margin-right:0px;
	width:100%;
}
#vid-indicator {
	display:block;
	position:absolute;
	height:11px;
	width:22px;
	top:-16px;
	background: url(../img/portfolio/icon_video_indicator.png) no-repeat 0px 0px;
}
#video_player_wrapper, .jwplayer {
	display:block;
	width:640px;
	height:360px;
	/* TODO: this needs a lighter colour setting or removing completely*/
-webkit-box-shadow: 0px 3px 3px rgba(20, 20, 20, 0.8);
	-moz-box-shadow:    0px 3px 3px rgba(20, 20, 20, 0.8);
	box-shadow:         0px 3px 3px rgba(20, 20, 20, 0.8);
	background: #000;
}
.grid-view #video_player_wrapper, .grid-view .jwplayer{
	float:left;
	margin-top: 40px;
	margin-right: 30px;
	margin-bottom: 60px;
	margin-left: 35px;
}
.list-view #video_player_wrapper, .list-view .jwplayer{
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}
/* TODO : class has already been defined for home page rewrite this and remove */
#video-close {
	position:absolute;
	display:block;
	height:33px;
	width:46px;
	top:-3px;
	right:0px;
	font: 13px 'Fjalla One', sans-serif;
	color:#FFF;
	text-transform: uppercase;
	background: url(../img/portfolio/bg_video_close.png) no-repeat left top;
	z-index:100;
}
#video-close .icon {
	display:block;
	height:33px;
	width:33px;
	background: url(../img/portfolio/icon_video_close.png) no-repeat left top;
	float:right;
}
#video-close .tool-tip {
	display:none;
	float:left;
	margin-top: 9px;
	padding-left: 20px;
}
#genre-select-menu {
	list-style:none;
	position:absolute;
	margin-top:25px;
	right:0px;
	font: 15px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #666;
	z-index:10;
}
#genre-select-menu span {
	color: #999;
}
#genre-select-menu #genre {
	color: #666;
}
#genre-select-menu li {
	display:inline;/*display:block;
	float:left;*/
}
#genre-select-menu li#showing {
	/*width:160px;*/
	text-align:right;
	margin-left:10px;
}
#genre-select-menu a {
	background: url(../img/rules/grey_vr_28.png) no-repeat right -3px;
	color: #999999;
	padding: 3px 12px 3px 3px;
	color: #666;
	text-decoration: none;
}
#genre-select-menu a.first {
	padding-left:0px;
}
#genre-select-menu a:hover {
	color: #DF003D;
}
/* select menu */
#video-select-menu {
	position:relative;
	width:960px;
	margin: 15px auto 0px;
}
.no-js #video-select-menu {
	display:none;
}
.js #video-select-menu {
	display:block;
}
#video-select-menu h2 {
	width:155px;
	height:38px;
	background-color:#E6E6E6;
	margin-bottom:0px;
}
/*show/hide menu with php 
.closed #select-menu{
	display:none;
}
.open #select-menu{
	display:block;
}
*/
/*might make better sense to style the h2 and give it this id, im not changing the background on rollover but on click so would be better */
#select-menu-btn {
	display:block;
	width:155px;
	height:38px;
	font-size:15px;
	/*background-color:#E6E6E6;*/
	color:#666;
}
/*#select-menu-btn:hover {
	color:#DF003D;
	
}
*/



#select-menu-btn span {
	display:inline;
	margin-top:10px;
	margin-left:18px;
	float:left;/*padding-left:15px;
	padding-top: 7px;*/
}
#select-menu-btn #dropdown {
	margin-top:0px;
	float:right;
	height:38px;
	width:43px;
	background: url(../img/btn/select_menu.png) no-repeat left top;
}
#select-menu-btn.active #dropdown {
	background-position:right top;
}
/* these will also need a rollover state, make the darker part rollover to red, not sure if we can use same sprite or a different one
if we d this then the link will have to remain the active link not the h2 maybe we bin the h2 altogether its not needed */
.closed #select-menu-btn {
/*background: #E6E6E6 url(../img/btn/select_menu.png) no-repeat right top;*/
}
/*
.closed #select-menu-btn:hover #dropdown {
	background-position:right top;

}
*/
.open #select-menu-btn #dropdown {
	background-position:left bottom;
}
/*
.open #select-menu-btn:hover #dropdown {
	
	background-position:left bottom;

}
*/


#select-menu-wrapper{
	position:absolute;
	display:none;
	/*display:block;*/
	
	
	border-top: 3px solid #E6E6E6;
	padding: 0px 0px 40px 15px;
	
	background-color:#FFF;
	/*added 1 px to the width just to hide a 1px gap in list view*/
	width:945px;
	z-index:200;
	
	
}

#select-menu-scroller{
	height:335px;
	overflow:auto;
	}

/*#select-menu {
	position:absolute;
	display:none;
	
	
	border-top: 3px solid #E6E6E6;
	padding: 0px 0px 40px 15px;
	
	background-color:#FFF;
	width:944px;
	z-index:200;
}*/
#select-menu a {
	color: #333;
	text-decoration: none;
}
#select-menu a:hover {
	color: #DF003D;
}
.menu-item, #select-menu-header span {
	display:block;
	width:260px;
	float:left;
	margin: 0px 20px;
}
#select-menu-header span {
	font: 15px 'Fjalla One', sans-serif;
	text-transform: uppercase;
	color: #DF003D;
	margin-top:25px;

	
	
	/*margin-bottom: 4px;*/
	padding-bottom: 4px;
	background: url(../img/rules/red_hr_270.png) no-repeat left bottom;
}
/* if years text goes these can be removed */
.menu-item span {
/*color: #666;
	font-weight: 300;
	*/
}
.menu-item a:hover span {
	color: #DF003D;
}
.menu-item ul {
	list-style: none;
}
.menu-item ul li {
	padding: 5px 0px 6px;
	background: url(../img/rules/grey_hr_270.png) no-repeat left bottom;
}
/* TEMP LOGGING PANEL, REMOVE IN PRODUCTION
#logging {
	position:absolute;
	padding:20px;
	font-size:12px;
	z-index:100;
}*/