/*------------------------------------------------------------------------------
>>>>  Default Blueprint CSS 
      This provides the styles for Blueprint's default templates.
      You can discard it entirely, or simply delete or comment out the irrelevant
      parts.
      
      This stylesheet is divided into several sections:
      + Reset (to give you a blank CSS canvas on which to work)
      + Sample colours and embellishments (the first bit you should delete - this
        provides tweaks to make the default templates look nice, and probably
        isn't relevent when you're putting together a fresh design)
      + Layout
      + Basic typography (in ems) with simple table styles 	
      + Mimetypes (presentation of download / view links for non-image assets)
      
      Following these sections, there are styles for each of the default blueprint
      modules. They are namespaced with the module code (i.e. blg, evt, nws),
      which is is applied to the body in the main default layout.

      We're always keen to hear about things that might make the default templates
      easier to comprehend and to use.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
* {margin:0;padding:0;} 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}

/*************************
	HARD RESET
*************************/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight: normal; }
q:before, q:after { content:'' }
a { text-decoration:none }
strong { font-weight:bold }
em { font-style:italic }
* a { position:relative }
a img { border:none }
* { outline: none; }

/* For IE */
img { -ms-interpolation-mode:bicubic; } 


/*************************
	LINKS
*************************/
a img {
  border: none;
}

a, a:link { color: #ff9900; text-decoration: none; }
a:visited { }
a:hover { }
a:active { }


a.download label span {
  font-weight:bold;
  font-size:12px;
}

a.download img {
  float:left;
  margin:0;
  padding:3px 0;
  width:64px;
  height:64px
}


#welcomeTitle {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}


/*************************
	STICKY FOOTER
*************************/
html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#container {padding-bottom: 133px;}  /* must be same height as the footer */

#masthead {position: relative;
	margin-top: -133px; /* negative value of footer height */
	height: 133px;
	clear:both;} 

/*************************
	CLEAR FIX
*************************/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*************************
	BODY
*************************/
body{
	background: #000;
	color: #fff;
	line-height: 16px;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
	min-width: 1060px;
	
	overflow-x:scroll;
}

#content p{ padding: 0 0 15px; }
#content p.back { padding: 0; }

#content img{ float: left; padding: 0 10px 5px 0; }
/*************************
	BODY BACKGROUND
*************************/
body#pge{ background: #000 url(../images/background/static-pg.jpg) top right no-repeat fixed; }
body#prj{ background: #000 url(../images/background/static-pg.jpg) top right no-repeat fixed; }
body#nws{ background: #000 url(../images/background/static-pg.jpg) top right no-repeat fixed; }

/**************************
	FLASH VIDEO HOME
***************************/
.flashVideo {}

/*************************
	HEADINGS
*************************/
h1, h2, h3, h4, h5{ margin: 0; padding:0; }

	h1{}
	
	h2, h3{ font-family: "Courier New", Courier, monospace; font-size: 20px; }
	
	h2{ padding: 0 0 43px; color: #fff; }
	
	h3{ padding: 0 0 5px; color: #ff9900; line-height: 25px; }

	h4{}
	
	h5{ font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #fff; padding: 0 0 15px;}
/*************************
	WRAPS
*************************/
#wrap{ position: relative; }
#container{ position: relative; }
#content-wrap{ /*top: 173px; left: 67px; position: absolute;*/ position: relative; padding: 130px 0 0 67px; }
	
	#content-wrap #content .static-pg{  overflow: hidden; }
	#content-wrap #content #article{ height: 426px; overflow: hidden; }

/*************************
	HEADER
*************************/
#masthead{ height: 133px; background: #000; width: 100%; min-width: 1070px; position: fixed; bottom: 0; left: 0; }

	#masthead h1.logo{ float: left; margin: 0 0 0 61px; display: block; }
	#masthead h1.logo, #masthead h1.logo a{ display: block; width: 400px; height: 133px; }
	
		#masthead h1.logo a{ background: url(../images/nancy-vaudeville-logo.jpg) top left no-repeat; }
		
			#masthead h1.logo a span{ display: none; }

/*************************
	MENU
*************************/
#nav{ padding: 23px 0 0 12px; }

	#nav li{ display: block; float: left; margin: 0 6px 0 0; }
	
		#nav li a{ height: 25px; display: block; background: url(../images/menu.png) no-repeat; }
		
			#nav li a span{ display: none; }
		
		/* Home */
		#nav #nav-home a{ width: 73px; background-position: 0px 0px; }
		#nav #nav-home a:hover, #nav #nav-home.active a{ background-position: 0 -25px; }
		
		/* Show Reel */
		#nav #nav-showreel a{ width: 113px; background-position: -169px 0px; }
		#nav #nav-showreel a:hover, #nav #nav-showreel.active a{ background-position: -169px -25px; }
		
		/* About */
		#nav #nav-about a{ width: 84px; background-position: -79px 0px; }
		#nav #nav-about a:hover, #nav #nav-about.active a{ background-position: -79px -25px; }
		
		/* Projects */
		#nav #nav-projects a{ width: 107px; background-position: -288px 0px; }
		#nav #nav-projects a:hover, #nav #nav-projects.active a{ background-position: -288px -25px; }
		
		/* Film */
		#nav #nav-films a{ width: 69px; background-position: -401px 0px; }
		#nav #nav-films a:hover, #nav #nav-films.active a{ background-position: -401px -25px; }
		
		/* Contact */
		#nav #nav-contact a{ width: 107px; background-position: -476px 0px; }
		#nav #nav-contact a:hover, #nav #nav-contact.active a{ background-position: -476px -25px; }

/*************************
	SUBMENU
*************************/
#side_menu{ width: 155px; float: left; }

	#side_menu ul{}
		#side_menu ul li{ line-height: 18px; font-family: "Courier New", Courier, monospace; }
			#side_menu ul li a{ }
				#side_menu ul li a:hover, #side_menu ul li a.active{ background: #FF9900; color: #000;  padding: 2px 3px; }
/*************************
	HOME
*************************/
body#pge #content{ position: relative; z-index: 1; }
body#pge #masthead{ position: relative; z-index: 10;}

/*************************
	STATIC PAGE
*************************/
.static-pg{ padding: 0 0 0 419px; }

.static-pg{ width: 361px; }
.showreel{ width: 640px; padding-right: 67px; margin: auto; }
/*************************
	PROJECTS/FILMS LISTING PAGE
*************************/
.post{ width: 520px; float: left; margin: 0 40px 0 0; }
		.post .projectThumb{ width: 520px; height: 300px; position: relative; }
			.post .projectThumb a{ font-size: 20px; line-height: 21px; width: 510px; height: 70px; padding: 230px 0 0 10px; color: #FF9900; position: absolute; bottom: 0; left: 0; text-indent: -9999px; font-family: "Courier New",Courier,monospace; }
				.post .projectThumb a span { display: none; }
				.post .projectThumb a:hover span { display: inline; }
 				.post .projectThumb a:hover{ text-indent: 0; background: url(../images/article-hover.png) bottom left no-repeat; }
			.post .projectThumb:hover a {text-indent: 0; background: url(../images/article-hover.png) bottom left no-repeat;}

/*************************
	MOVIE PAGE
*************************/
#column-wrap{ float: left; height: 300px; overflow: hidden; }
	#column-wrap .column{ width: 380px; margin: 0 40px 0 0; float: left; }
#vimeo{ height: 300px; float: left; }

/*************************
	BLOG INDEX
*************************/
#blog{ position: relative;}

.blogpost{ float: left; margin: 0 40px 0 0; height: 427px; overflow: hidden; background: url(../images/divider.png) center right no-repeat; position: relative; }

	.blogpost .article{ height: 345px; overflow: hidden; }
	
		.blogpost .article .column{ width: 380px; float: left; margin: 0 40px 0 0; }
		
		.blogpost .article .back_bottom{ clear: both; }
		
/*************************
	FOOTER
*************************/

#menu_wrap{ width: 607px; float: left; }

	#footer{ clear: both; text-align: right; padding: 15px 0 0; width: 588px; font-size: 9px; }
		#footer a{ color: #fff; }
		
/*************************
	PAGINATION
*************************/		
.pagination{ width: auto; float: none; margin: 0; position: absolute; bottom: 0;}
	.pagination ul{}
		.pagination ul li{ display:inline;  margin: 0 10px 0 0;}
			.pagination ul li a{ }

.back-article, .next-article{ color: #ff9900; cursor: pointer; }
.back-article{ position: fixed; display: block; left: 64px; top: 430px; }
.next-article{ position: fixed; display: block; left: 80px; top: 430px; }