/* layout.css - pickled image website */

/* Normalises margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0; padding: 0; }
	
/* Normalises font-size for headings */
h1, h2, h3, h4, h5, h6 {
	font-size: 1em; }
	
/* Removes list-style from lists */
ol, ul {
	list-style: none; }
	
/* Normalises font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal; font-weight: normal; }
	
/* Removes list-style from lists */
table {
	border-collapse: collapse; border-spacing: 0; }
	
/* Removes border from fieldset and img */
fieldset, img {
	border: 0; }
	
/* Left-aligns text in caption and th */
caption, th {
	text-align: left; }
	
/* Removes quotation marks from q */
q:before, q:after {
	content: ''; }

	/*
----------------------------------------------------------------------
GLOBAL ELEMENTS
---------------------------------------------------------------------- 
*/	
	
*	{
	margin: 0;
	padding: 0;
	}
	
html {
	background: #000 url(../images_pres/backgroundnew.gif) center top fixed repeat-x;
	}
	
body {
	position: relative;
	width: 900px;
	margin: 0 auto;
	font: .7em/1.6em 'Lucida Grande', 'Segoe UI', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: 700;
	color: #9CA6AF;
	}
	
img {
	border: 0;
	}
	
	/*
----------------------------------------------------------------------
HEADINGS PARAS AND LISTS
---------------------------------------------------------------------- 
*/
	
h1 {
	overflow: hidden;
	text-indent: -100000em;
	}
	
h2 {
	color: #B45B39;
	font: italic 500 1.4em Georgia;
	letter-spacing: .04em;
	}
	
h3 {
	color: #000;
	font: 700 1.3em 'Lucida Grande';
	text-transform: uppercase;
	letter-spacing: .03em;
	}
	
h4 {
	margin-bottom: 10px;
	color: #B45B39;
	font: 700 1.4em 'Lucida Grande';
	text-transform: uppercase;
	letter-spacing: .06em;
	}
	
h5 {
	color: #fff;
	font: 700 .9em 'Lucida Grande';
	}
	

a {
	color: #fff;
	font-size: 1.1em;
	text-decoration: none;
	}
	
a:hover {
	color: #B45B39;
	}
	
h5 a:hover {
	color: #B45B39;
	}

ul li a:link {
	color: #fff;
	font-size: 1.1em;
	text-decoration: none;
	}
	
ul li a:hover {
	color: #B45B39;
	}
	
a:visited { 
	color: #fff;
	font-size: 1.1em;
	text-decoration: none;
	}
	
blockquote {
	color: #B45B39;
	font: italic 500 1.5em Georgia;
	letter-spacing: .04em;
	}
	
cite {
	color: #B45B39;
	font: .7em/1.6em 'Lucida Grande', 'Segoe UI', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: 700;
	}
	
		/*
----------------------------------------------------------------------
PAGE DIVISIONS
---------------------------------------------------------------------- 
*/

div#wrapper {
	width: 900px;
	margin: 0 auto 0 auto;
	text-align: left;
	}
	
			/*
----------------------------------------------------------------------
BRANDING
---------------------------------------------------------------------- 
*/
	
	
div#masthead {
	width: 900px;
	height: 239px;
	background: transparent url(../images_pres/mastnew.png) no-repeat;
	}
	
#masthead img {
	width: 304px;
	height: 79px;
	margin: 64px 0 0 350px; 
	}
	
/*
----------------------------------------------------------------------
MAIN NAVIGATION
---------------------------------------------------------------------- 
*/
	
div.main_nav * {
	margin: 0;
	padding: 0;
	}
	
div.main_nav {
	float: left;
	width: 100%;
	margin: 10px 0 0 265px;
	color: #fff;
	}
	
div.main_nav ul {
	float: left;
	font-size: 1em;
	}
	
div.main_nav li {
	float: left;
	list-style-type: none;
	position: relative;
	}
	
div.main_nav a  {
	display: block;
	text-decoration: none;
	padding: .3em 12px 2.8em 12px;
	}
	
div.main_nav a:hover {
	color: #B45B39;
	}
	
div.main_nav ul li ul {
	position: absolute;
	border: 0;
	}
		
div.main_nav li ul li {
	width: 10em;
	border-bottom: 1px solid #B45B39;
	}
	
#nav_a, #nav_b, #nav_c {
	padding: .3em 12px .3em 12px;
	}
	
div.main_nav ul li ul {
	display: none;
	}	
	
div.main_nav ul li:hover ul {
	display: block;
	z-index: 1000;
	color: #B45B39;
	background-color: #000;
	opacity: 0.8;
	}
	
div.main_nav.transparent ul ul li {
	opacity: 0.9;
	-moz-opacity: 0.9;
	filter: alpha(opacity=90);
	}		
	
* html div.main_nav {
	z-index: 1;
	}
	
* html div.main_nav ul li ul {
	z-index: 400;
	}

* html div.main_nav a {
	zoom: 100%;
	}
			/*
----------------------------------------------------------------------
CONTENT
---------------------------------------------------------------------- 
*/

div#content_wrapper {
	width: 900px;
	height: 357px;
	background: #2B3A44 url(../images_pres/contentile.png) top repeat;
	}

div#content {
	position: absolute;
	width: 900px;
	height: 357px;
	background: url(../images_pres/contentstrip.png) repeat-x;
	}
	
div#content_main, div#content_sub, div#content_news, div#content_intro, div#content_left, div#content_right, div#content_sub_inner {
	float: left;
	}
	
div#content_main {
	width: 400px;
	margin: 20px 10px 0 20px;
	}
	
div#content_sub {
	width: 210px;
	height: 334px;
	margin: 20px 10px 0 10px;
	}
	
div#content_news {
	position: relative;
	width: 210px;
	height: 334px;
	margin: 20px 20px 0 10px;
	}
	
div#content_intro {
	width: 230px;
	height: 334px;
	margin: 20px 10px 0 20px;
	}
	
div#content_left {
	width: 295px;
	height: 334px;
	margin: 20px 10px 0 10px;
	}
	
div#content_right {
	position: relative;
	width: 295px;
	height: 334px;
	margin: 20px 20px 0 10px;
	}
	
div#content_sub_inner {
	width: 210px;	
	height: 334px;
	margin: 0 10px 0 10px;
	background: url(../images/pickledbkgrnd.png) no-repeat;
	}
	
div#content_news_inner {
	width: 210px;
	height: auto;
	}
	
div#content_news_video {
	position: absolute;
	width: 210px;
	margin-top: 10px;
	background: url(../images/videopromo.png) no-repeat;
	}
	
div#content_right_inner {
	width: 295px;
	}
	
div#content_right_shows {
	width: 295px;
	}

div#imagegallery {
	width: 295px;
	}
	
.address {
	margin-top: 10px;
	}	

.top {
	margin-top: 15px;
	}
	
.topvideo {
	margin-top: 15px;
	}
	
.narrow {
	padding: 0 20px 0 0;
	}
	
#content_main p {
	margin: 10px 10px 0 0;
	}
	
#content_main ul, #content_intro ul, #content_right_shows ul, div.imagegallery ul, #content_left ul {
	margin: 10px 0 0 0;
	}

#content_main ul li a, #content_intro ul li a, #content_right_shows ul li a, div.imagegallery ul li a, #content_left ul li a {
	display: block;
	}
	
#content_intro li, #content_news_shows li, #content_news_video li, #content_news_inner li, #content_right_shows li, div.imagegallery li, #content_left li {
	margin-bottom: .3em;
	}
	
p#firstpara a, p#intropara a, li#contact a, p#secondpara a {
	font-size: 1em;
	}
	
p#intropara {
	margin-top: 10px;
	margin-bottom: 10px;
	}
	
p#firstpara {
	margin-top: 0px;
	}
	
p#secondpara {
	margin-top: 10px;
	}
	
p#toppara {
	margin-top: 28px;
	}

p.caption {
	font: italic 500 0.4em 'Lucida Grande';
	} 
	
h2#intro {
	position: relative;
	margin-top: 20px;
	color: #9CA6AF;
	font-size: 1.3em;
	line-height: 1.3em;
	}
	
h4#content_right_inner {
	margin-bottom: 10px;
	}
	
h2, p#inlinepara {
	display: inline;
	}
	
blockquote#second {
	margin-top: 10px;
	}
	
#nav_back { 
	width: 162px;
	height: 47px;
	padding: 13px 0 0 14px;
	background: url(../images/navpeople.png) no-repeat;
	}
	
#nav_granddad { 
	width: 220px;
	height: 47px;
	padding: 13px 0 0 14px;
	background: url(../images/navgrand.png) no-repeat;
	}
	
ul#home, ul#people, ul#walkabout {
	position: absolute;
	margin: 30px 0 0 0;
	}
	
ul#bernard, ul#puppets, ul#granddad { 
	position: absolute;
	margin: 10px 0 0 0;
	}
	
ul#hunger {
	postion: absolute;
	margin: 31px 0 0 0;
	}
	
ul#houdini {
	postion: absolute;
	margin: 98px 0 0 0;
	}
	
ul#houdinistory {
	position: absolute;
	margin: 17px 0 0 0;
	}
	
ul#hungerstory {
	postion: absolute;
	margin: 25px 0 0 0;
	}
	
ul#mangestory {
	postion: absolute;
	margin: 39px 0 0 0;
	}
	
ul#mange {
	postion: absolute;
	margin: 89px 0 0 0;
	}
	
ul#peep {
	position: absolute;
	margin: 38px 0 0 0;
	}
	
ul#walkabout {
	position: absolute;
	margin: 44px 0 0 0;
	}
	
ul#creations {
	position: absolute;
	margin: 2px 0 0 0;
	}
	
#content_sub_inner img {
	margin: 30px 0 0 20px;
	}
	
h2#quote {
	position: relative;    
	font-size: 1.55em;
	line-height: 130%;
	}
	
h2#winner { 
	position: absolute;  
	font-size: 1.55em;
	line-height: 130%;
	color: #fff;
	}
	
h3#video {
	padding: 13px 0 0 12px;
	}
	
h5#back {
	margin: 10px 0 0 0;
	}

h5#backtop {
	margin: 5px 0 0 0;
	}
	
h5#backpuppet {
	margin: 40px 0 0 0;
	}
	
h5#backpeople {
	position: absolute;
	margin: 150px 0 0 0;
	}
	
#content_news_video ul {
	position: relative;
	padding: 90px 30px 0 0;
	}

#content_news_video h5 img {
	position: absolute; 
	}

#bernard h5 img { top: 30px; left: 0px; }
#peep h5 img { top: 30px; left: 53px; }
#hunger h5 img { top: 30px; left: 106px; }
#houdini h5 img { top: 30px; left: 159px; }
	
#content_intro ul {
	position: relative;
	padding: 10px 0 0 0;
	}
	
#dik img { 
	position: absolute;
	top: 10px; 
	left: 0; 
	}

#vicky img { 
	position: absolute;
	top: 10px; 
	left: 110px; 
	}
	
#education img { 
	position: absolute;
	top: 10px; 
	left: 0; 
	}
	
img#left {
	float: left;
	margin: 10px 10px 5px 0;  
	}	

img#right {
	float: right;
	margin: 0 0 5px 10px;  
	}
	
img#education {
	float: right;
	margin: 20px 0 0 0;  
	}
	
img#mugshots {
	float: left;
	margin: 4px 10px 0 0;  
	}

h3#shows {
	padding: 12px 0 0 12px;
	color: #fff;
	}
	
#content_right_shows ul {
	position: relative;
	padding: 10px 0 0 60px;
	}
	
#videolink h3 img {
	position: absolute;
	}

#videolink h3 { 
	padding: 5px 0 0 12px;
	font-size: 1.2em; 
	}
	
#videolink h3 img { 
	top: 0px; left: 0px; 
	}
	
ul#videoshows { 
	width: 133px;
	height: 47px;
	background: url(../images/videoshows.png) right no-repeat;
	}	
	
h3#gallery {
	margin: 0 0 10px 0;
	font: 700 1.3em 'Lucida Grande';
	color: #B45B39;
	text-transform: uppercase;
	}

				/*
----------------------------------------------------------------------
GALLERY SHOWS
---------------------------------------------------------------------- 
*/
	
div.gallery *, div.galleryman *, div.galleryco * {
	margin: 0;
	padding: 0;
	}
	
.gallery {
	width: 295px;
	height: 150px;
	margin: 10px 0 0 0;
	}
	
.gallery ul.row1 {
	margin: 0 0 0 0;
	}
	
.gallery ul.row2 {
	float: left;
	margin: -140px 0 0 70px;
	}
	
.gallery ul.row3 {
	float: left;
	margin: -140px 0 0 140px;
	}

.gallery ul.row4 {
	float: left;
	margin: -140px 0 0 210px;
	}
	
.galleryco {
	width: 295px;
	height: 230px;
	margin: 10px 0 0 0;
	}
	
.galleryco ul.row1 {
	margin: 0 0 0 0;
	}
	
.galleryco ul.row2 {
	float: left;
	margin: -210px 0 0 70px;
	}
	
.galleryco ul.row3 {
	float: left;
	margin: -210px 0 0 140px;
	}

.galleryco ul.row4 {
	float: left;
	margin: -210px 0 0 210px;
	}
	
.galleryman {
	width: 295px;
	height: 95px;
	margin: 0 0 0 0;
	}
	
.galleryman ul.row1 {
	margin: 0 0 0 0;
	}
	
.galleryman ul.row2 {
	float: left;
	margin: -70px 0 0 70px;
	}
	
.galleryman ul.row3 {
	float: left;
	margin: -70px 0 0 140px;
	}

.galleryman ul.row4 {
	float: left;
	margin: -70px 0 0 210px;
	}
	
.galleryhung {
	width: 295px;
	height: 230px;
	margin: 10px 0 0 0;
	}
	
.galleryhung ul.row1 {
	margin: 0 0 0 0;
	}
	
.galleryhung ul.row2 {
	float: left;
	margin: -210px 0 0 70px;
	}
	
.galleryhung ul.row3 {
	float: left;
	margin: -210px 0 0 140px;
	}

.galleryhung ul.row4 {
	float: left;
	margin: -210px 0 0 210px;
	}
	
.gallerywork ul.row1 {
	margin: 0 0 0 0;
	}
	
.gallerywork ul.row2 {
	float: left;
	margin: -210px 0 0 70px;
	}
	
.gallerywork ul.row3 {
	float: left;
	margin: -210px 0 0 140px;
	}

.gallerywork ul.row4 {
	float: left;
	margin: -210px 0 0 210px;
	}
	
.gallery ul li, .galleryco ul li, .galleryman ul li, .galleryhung ul li, .gallerywork ul li {
	width: 70px;
	height: 70px;
	list-style-type: none;
	}
	
.gallery ul li a, .galleryco ul li, .galleryman ul li, .galleryhung ul li, .gallerywork ul {
	display: block;
	}
	
.thumbnail img, .thumbnailco img, .thumbnailman img, .thumbnailhung img, .gallerywork img {
	border: none;
	}
	
.thumbnail:hover, .thumbnailco:hover, .thumbnailman:hover, .thumbnailhung:hover, .gallerywork:hover {
	background-color: transparent;
	}

.thumbnail:hover img, .thumbnailco:hover img, .thumbnailman:hover img, .thumbnailhung:hover img, .gallerywork:hover img {
	border: none;
	}

.thumbnail span { /*CSS for enlarged image*/
	position: absolute;
	width: 285px;
	height: 258px;
	background-color: #000;
	padding: 20px 5px 5px 5px;
	left: -1000px;
	visibility: hidden;
	color: #fff;
	font-size: .9em;
	text-decoration: none;
	}
	
.thumbnailco span { /*CSS for enlarged image*/
	position: absolute;
	width: 285px;
	height: 285px;
	background-color: #000;
	padding: 20px 5px 5px 5px;
	left: -1000px;
	visibility: hidden;
	color: #fff;
	font-size: .9em;
	text-decoration: none;
	}
	
.thumbnailman span { /*CSS for enlarged image*/
	position: absolute;
	width: 285px;
	height: 240px;
	background-color: #000;
	padding: 20px 5px 5px 5px;
	left: -1000px;
	visibility: hidden;
	color: #fff;
	font-size: .9em;
	text-decoration: none;
	}
	
.thumbnailhung span { /*CSS for enlarged image*/
	position: absolute;
	width: 285px;
	height: 285px;
	background-color: #000;
	padding: 20px 5px 5px 5px;
	left: -1000px;
	visibility: hidden;
	color: #fff;
	font-size: .9em;
	text-decoration: none;
	}
	
.thumbnailwork span { /*CSS for enlarged image*/
	position: absolute;
	width: 285px;
	height: 240px;
	background-color: #000;
	padding: 20px 5px 5px 5px;
	left: -1000px;
	visibility: hidden;
	color: #fff;
	font-size: .9em;
	text-decoration: none;
	}

.thumbnail span img, .thumbnailco span img, .thumbnailman span img, .thumbnailhung span img, .thumbnailwork span img { /*CSS for enlarged image*/
	border: none;
	}

.thumbnail:hover span, .thumbnailco:hover span, .thumbnailman:hover span, .thumbnailhung:hover span, .thumbnailwork:hover span { /*CSS for enlarged image*/
	visibility: visible;
	top: -20px;
	left: -315px; /*position where enlarged image should offset horizontally */
	z-index: 100;
	}
	
		/*
----------------------------------------------------------------------
FOOTER
---------------------------------------------------------------------- 
*/
	
div#footer {
	clear: both;
	width: 880px;
	height: 40px;
	padding: 0 0 0 20px;
	background-color: #18253B;
	}
	
#footer	ul {
	padding: 10px 0 0 0;
	}	

#footer	ul li {
	display: inline;
	}
	
#footer	ul li a:hover {
	color: #B45B39;
	}
	
li#phone {
	margin: 0 0 0 20px;
	font-weight: 700;
	font-size: 1.1em;
	color: #fff;
	}
	
li#copyright {
	margin: 0 0 0 267px;
	font-weight: 500;
	font-size: .65em;
	color: #9CA6AF;
	}
	
				/*
----------------------------------------------------------------------
CLEAR THE FLOATS
---------------------------------------------------------------------- 
*/