/*******************************************************
CSS File:	 screen.css

Site Title:	 Holding Pictures (Version: 1.0)
Site URI:	 http://www.holdingpictures.com/

Author:		 TOUCH/CAST Next
Author URI:	 http://www.touchcastnext.com/

Description: Contains all css used to place, size &
             position the primary elements of the site.
*******************************************************/

/* Reset All Browser Styles */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,object,embed,param{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 {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:'';}abbr,acronym {border:0;} * { margin: 0; padding: 0; border:0; line-height: 1.5em; }

/* Main Page Tags */
html { overflow-y: scroll; }

/* Useful styles for debugging */
/** { border:1px solid red; }*/

/* General Page Styles */

.clear { clear:both; }
strong {font-weight:bold;}
em { font-style:italic;}

#hide, .hide { display: none; }

p.clear, br.clear, hr.clear  {
	display: block;
	clear:both;
	padding: 0;
	margin: 0;
	line-height: 1%;
	font-size: 1%;
	height: 1px;
}

.fine {	font-size: 90%; }

a {	color:#9f9e9e;text-decoration: none; }

a:hover { text-decoration: none; }
:focus { -moz-outline-style: none; }


ul, ol { list-style-type: none; } 


body {
	background: #000 url("../_img/bg.gif") repeat-y 50% 0%;
	text-align: center;
	color:#9f9e9e;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* --------------- Image Replacement -------------- */

*.replace {
	font-size: 1%;
	position: relative;
	left: -5000px;
	text-decoration: none;
}

/* --------------- Main Structural Elements -------------- */


div.container {
	width: 854px;
	margin: 0 auto;
	padding: 0 0 40px 0 ;
	text-align: left;
	background: #000;
}

div.masthead {
	height: 166px ;
	background: url("../_img/masthead_bg.gif") bottom no-repeat;
	position:relative;
}

div.masthead p.logo {
	display: block;
	width: 129px;
	height: 135px;
	position: absolute;
	top: 20px;
	left: 362px;
}

div.masthead p.logo a {
	display: block;	width: 129px; height: 135px; background: url("../_img/holding_pics_logo.gif") no-repeat ;
}

div.masthead p.films, div.masthead p.people, div.masthead p.charlie-lyons {
	display: block;
	width: 59px;
	height: 36px;
	position: absolute;
	top: 130px;
	left: 185px;
}

div.masthead p.films a, div.masthead p.people a, div.masthead p.charlie-lyons a {
	display: block;	width: 59px; height: 36px; background: url("../_img/nav_films.gif") no-repeat ;
}

div.masthead p.people {
	left: 250px;
}

div.masthead p.people a {
	background: url("../_img/nav_people.gif") no-repeat ;
}


div.masthead p.charlie-lyons {
	left: 538px;
	width:251px;
}

div.masthead p.charlie-lyons a {
	background: url("../_img/nav_charlie_lyons.gif") no-repeat ;
	width:251px;
}

div.gfx {
	display: block;
	height: 208px ;
	background:url("../_img/main_gfx.jpg") bottom no-repeat ;
}

div.content {
	position: relative;
	display: block;
	height: 185px ;
	background:#3e3e3e url("../_img/filmstrip_bg.gif") bottom no-repeat ;
}

div.content h1 {
	height: 50px;
	width: ;
	background: #000 url("../_img/h1_welcome.gif") no-repeat left top;
}

div.container div#flash.flash h2 {
	display: none;
}

div.content p.news {
	height: 50px;
	width: 295px;
	position: absolute;
	top: 0;
	left: 335px;
	background: #000 url("../_img/h2_news.gif") no-repeat left top;
}

div.content p.col1, div.content p.col2, div.content p.col3 {
	display: block;
	height: 103px;
	width: 405px;
	position: absolute;
	top: 58px;
}

div.content p strong {font-family:Arial, Helvetica, sans-serif; font-size:110%; color:#ccc;}
div.content p strong a {color:#fff;}

div.content p.col2 img {float: left; margin: 0 5px 0px 0; padding-top: 0px; }
div.content p.col3 img {float: left; margin: 0 5px 0px 0; padding-top: 0px; }

div.content p.col1 { left: 12px; }
div.content p.col2 {
	left: 10px;
}
div.content p.col3 {
	left: 441px;
}

div.content p a, div.people p a {color: #ccc; text-decoration: underline;}


div.people {
	background:#3e3e3e;
	height: 300px;
	margin-bottom: 50px;
	position: relative;
}

div.people p.intro {
	padding: 12px;
}

div.people p.col1, div.people p.col2, div.people p.col3 {
	display: block;
	height: 163px;
	width: 263px;
	position: absolute;
	top: 100px;
}

div.people h1 {
	height: 36px;
	background: #000 url("../_img/h1_people.gif") no-repeat left top;
}

div.people p.col1 { left: 12px; }
div.people p.col2 {
	left: 295px;
}
div.people p.col3 { left: 579px; }

div.people p.col1 strong, div.people p.col2 strong, div.people p.col3 strong { font-size: 110%; font-family:Arial, Helvetica, sans-serif; color:#ccc;}

div.charlie-lyons {
	background:#3e3e3e;
	margin-bottom: 50px;
	position: relative;
}


div.charlie-lyons h1 {
	height: 36px;
	background: #000 url("../_img/h1_charlie_lyons.gif") no-repeat left top;
}

div.charlie-lyons div.copy {
	float:left;
	width:500px;
	padding:12px;
}

div.charlie-lyons p {
	margin-bottom: 1em;
}

div.charlie-lyons div.imagesRight {
	float:right;
	width:265px;
	padding:12px;
}

div.charlie-lyons div.imagesRight img {
	border:solid 2px #FFF;
	margin-bottom: 15px;
}

div.flash {
	background:url("../_img/films_bg.gif") no-repeat top;
	padding: 58px 0 60px 0;
}

div.flash p { display: block; height: 33px; }

div.flash p a { display: block; height: 33px; background-position: top; }

div.flash p.mov00 a { background:url("../_img/mov_00.gif")  }
div.flash p.mov01 a { background:url("../_img/mov_01.gif") no-repeat; }
div.flash p.mov02 a { background:url("../_img/mov_02.gif") no-repeat; }
div.flash p.mov03 a { background:url("../_img/mov_03.gif") no-repeat; }
div.flash p.mov04 a { background:url("../_img/mov_04.gif") no-repeat; }
div.flash p.mov05 a { background:url("../_img/mov_05.gif") no-repeat; }
div.flash p.mov06 a { background:url("../_img/mov_06.gif") no-repeat; }
div.flash p.mov07 a { background:url("../_img/mov_07.gif") no-repeat; }
div.flash p.mov08 a { background:url("../_img/mov_08.gif") no-repeat; }
div.flash p.mov09 a { background:url("../_img/mov_09.gif") no-repeat; }
div.flash p.mov10 a { background:url("../_img/mov_10.gif") no-repeat; }
div.flash p.mov11 a { background:url("../_img/mov_11.gif") no-repeat; }

div.flash p a:hover { background-position: bottom; }

/* Hide */
div.content h1 { background:#000; }