@import url('zero.css');
@import url('boxy.css');

html { height: 101%; }

body, table { font: 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: black; }
body { background: #D1D1D1 url(../images/background.jpg) no-repeat center center; }

img { border: 0; }

a { text-decoration: none; color: black; }
    a:hover { text-decoration: none; }

h3 { font-size: 12px; text-transform: uppercase; margin: 2em 0 1em 0; }
h4 { font-size: 11px; font-weight: normal; text-transform: uppercase; margin: 0.4em 0; }
p { margin: 1em 0; }

strong { font-weight: bold; }
small { font-size: 90%; }

input.text, textarea { border: 0; color: black; background-color: white; padding: 3px; }

form .wrap { background: white; padding: 2px; margin-bottom: 7px; }
  form .error { background-color: #EBCECE; }
  form .wrap input,
  form .wrap textarea { font: 11px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: black; width: 100%; border: 0; padding: 0; background: none; }
  form .wrap textarea { height: 112px; }
form .buttons { text-align: right; }

.first { margin-top: 0 !important }

.inverse { background-color: black; color: white; }
h2.inverse { font-weight: bold; text-transform: uppercase; padding: 3px; float: left; line-height: 1; }
h2.line { clear: left; margin-bottom: 2px; }
.inverse a { color: white; }

.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }

.main { width: 850px; margin: 0 auto; padding-bottom: 30px; }

#wrapper { min-width: 640px; position: relative; padding: 150px 0 0 0; }

#logo { position: absolute; top: 20px; left: 20px; }
	#logo a { display: block; width: 85px; height: 62px; text-indent: -5000px; background: url(../images/logo.gif); }

#nav { position: absolute; top: 20px; right: 20px; font-size: 11px; }

	#newsletter-blurb { text-align: right; margin: 6px 0 15px 0; float: right; }
	#newsletter-signup { float: right; width: 0; overflow: hidden; text-align: right; }
		#newsletter-signup .inner { width: 200px; }

	#nav .menu { font-weight: bold; text-transform: uppercase; clear: right; float: right; }
		#nav a { color: black; }
		#nav a:hover,
		#nav a.selected { color: white; text-decoration: none; }
 
#send-to-friend { display: none; }

/* Specific pages */

#default { width: 591px; }
	#default .inner { width: 425px; margin: 0 auto; }
	#default .flash-movie { margin: 0 0 -10px -18px; }

#home { width: 765px; }
	#home .intro { margin: -30px 0 0 0 }
	#home .left { margin: 10px 0 0 73px; width: 260px; float: left; }
	#home .right { margin: 5px 58px 0 0; float: right; }
	
#showreel { width: 450px; }
	#showreel .showreel-container { width: 450px; height: 260px; background-color: black; }
	#showreel h3 { margin: 1.4em 0 !important; }
	#showreel form * { vertical-align: middle; }
	
#contact { width: 850px; }
	#contact .map { float: left; width: 520px; height: 350px; margin-bottom: 30px; }
	#contact form { float: right; width: 300px; position: relative; }
		#contact form label { display: block; margin: 0 0 5px 0; font-size: 12px; line-height: 16px; }
			#contact form label span { background-color: #7D7D7D; color: white; text-transform: uppercase; padding: 0 2px; }
	#contact .knightrider { position: absolute; top: 50px; left: 0; }
		
#portfolio-index { }
	#portfolio-index h2 { margin-bottom: 3px; }
	  #portfolio-index li { float: left; width: 196px; height: 170px; margin-left: 22px; border-style: solid; border-color: black; }
	    #portfolio-index li.first-in-row { margin-left: 0; clear: left; }
		#portfolio-index li a { width: 196px; height: 120px; display: block; text-indent: -5000px; position: relative; }
		#portfolio-index li a .mask { display: block; position: absolute; left: 0; top: 0; width: 196px; height: 120px; background: black; opacity: 0; filter: alpha(opacity=0); }
		#portfolio-index li .caption { font-size: 10px; font-weight: bold; line-height: 1; margin-top: 4px; float: left; background: black; color: white; text-transform: uppercase; padding: 4px 5px; }
		  
		#portfolio-index li img { display: block; }

#portfolio-item { }
	#portfolio-item .sidebar { width: 175px; float: left; }
	#portfolio-item .sidebar .portfolio-item-meta p { text-transform: uppercase; letter-spacing: -1px; line-height: 1.5; margin: 0; font-size: 12px; }
	#portfolio-item .sidebar p { font-size: 11px; }
	#portfolio-item .sidebar .url { text-transform: uppercase; font-weight: bold; border-top: 1px dashed white; border-bottom: 1px dashed white; padding: 0.7em 0; display: block; margin: 1.7em 0; font-size: 11px; }
		#portfolio-item .sidebar .url:hover { text-decoration: none; }
	
	#portfolio-item .images { width: 660px; float: left; margin-left: 15px; }
		#portfolio-item .images .full { position: relative; width: 660px; overflow: hidden; height: 497px; }
			#portfolio-item .images .full img { display: block; position: absolute; top: 0; left: 0; }
		#portfolio-item .thumbs { margin: 12px 0; padding: 0; }
			#portfolio-item .thumbs li { float: left; margin: 0 12px 12px 0; display: block; list-style: none; width: 100px; height: 79px; overflow: hidden; }
				#portfolio-item .thumbs li.last-in-row { margin-right: 0; }
			#portfolio-item .thumbs a { display: block; width: 100px; height: 79px; position: relative; border: 0 solid #6F6F6F; }
			
#blog { width: 845px; padding-bottom: 30px; }
  #blog .left-column { width: 190px; position: relative; float: left; padding-top: 130px; }
  #blog .middle-column { width: 425px; float: left; padding: 0 40px; }
  #blog .right-column { width: 150px; float: left; }
  
#blog-search {  }
  #blog-search h2 { margin-bottom: 5px; }
  #blog-search .iw { width: 169px; height: 17px; float: left; background: white; }
    #blog-search .iw input { background: none; padding: 0; border: 0; font-size: 11px; }
  #blog-search .submit { float: left; }
  
#blog-heading { position: absolute; top: -30px; left: -20px; }
  #blog-heading span { display: none; }

.post { border-bottom: 1px dashed white; padding-bottom: 10px; margin-bottom: 30px; }
  .post h2 { margin-bottom: 10px; }
  .post .date { font-size: 10px; color: #7d7d7d; font-weight: bold; margin-bottom: 5px; }
  .post .entry { clear: left; }

.postmeta { font-size: 11px; color: #7d7d7d; margin-top: 15px; }
  .postmeta .alignleft { float: left; }
  .postmeta .alignright { float: right; }
  .postmeta a { font-weight: bold; color: black; }
  
#blog .navigation { text-align: right; }

#blog-sidebar { font-size: 11px; }
  #blog-sidebar h2 { color: white; text-transform: uppercase; background: #7D7D7D; padding: 3px; line-height: 1; margin-bottom: 10px; font-weight: bold; float: left; }
  #blog-sidebar ul ul { margin-bottom: 20px; clear: left; text-transform: uppercase; }
  
#comment-list { margin-top: 20px; }
  #comment-list ol { clear: left; }
  
#respond { margin-top: 20px; }
  #respond .row { margin: 3px 0; }
  #respond .buttons { margin-top: 15px; }
  #respond input.text { width: 200px; }
  #respond textarea { width: 419px; }
  
#contact-dialog {  }
  #contact-dialog label { display: block; margin-top: 5px; }
  #contact-dialog input.text, textarea { border: 1px solid #D1D1D1; width: 240px; }
  #contact-dialog .buttons { margin-top: 5px; }