h1, h2, h3, h4, h5, h6 { font-weight:bold } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */
.alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes.



/* Font stack options

	The following represents a list of font stacks, as recommended by Nathan Ford in
	http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

	I've added inverted commas around the relevant family names to ensure compatibility.
	p = balanced for paragraphs or body copy
	t = balanced for headlines or titles

	- - - -

Arial, "Helvetica Neue", Helvetica, sans-serif - p, t

Baskerville, "Times New Roman", Times, serif - p
Baskerville, "Times, Times New Roman", serif - t

Cambria, Georgia, Times, "Times New Roman", serif - p, t
"Century Gothic", "Apple Gothic", sans-serif - p, t

Consolas, "Lucida Console", Monaco, monospace - p, t

"Copperplate Light", "Copperplate Gothic Light", serif - p, t

"Courier New", Courier, monospace - p, t

"Franklin Gothic Medium", "Arial Narrow Bold", Arial, sans-serif - p, t

Futura, "Century Gothic", "Apple Gothic", sans-serif - p, t

Garamond, "Hoefler Text", "Times New Roman", Times, serif - p
Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif - t

Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif - p
Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - t

Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif - p
Georgia, Times, "Times New Roman", serif - t

GillSans, Calibri, Trebuchet, sans-serif - p
GillSans, Trebuchet, Calibri, sans-serif - t

"Helvetica Neue", Arial, Helvetica, sans-serif - p
Helvetica, "Helvetica Neue", Arial, sans-serif - t

Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif - p, t

"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - p, t

Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif - p
Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif - t

Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t

Times, "Times New Roman", Georgia, serif - p, t

Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif - p
Trebuchet, Tahoma, Arial, sans-serif - t

Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t

*/

/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, 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:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */
a { text-decoration: none; border: none;}
a:hover, a:visited {border: none;}
li:hover {border: none;}
li {
overflow: hidden;
}


@font-face {
    font-family: 'BCCantoriaLightBCCantoriaLtIt';
    src: url('../fonts/bc_cantoria_light_italic-webfont.eot');
    src: url('../fonts/bc_cantoria_light_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bc_cantoria_light_italic-webfont.woff') format('woff'),
         url('../fonts/bc_cantoria_light_italic-webfont.ttf') format('truetype'),
         url('../fonts/bc_cantoria_light_italic-webfont.svg#BCCantoriaLightBCCantoriaLtIt') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*

@font-face {
font-family: 'BSHarringtonBSHarrington';
src: url('../fonts/bs_harrington-webfont.eot');
src: url('../fonts/bs_harrington-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bs_harrington-webfont.woff') format('woff'),
url('../fonts/bs_harrington-webfont.ttf') format('truetype'),

url('../fonts/bs_harrington-webfont.svg#') format('svg');
font-weight: normal;

font-style: normal;


}

*/

@font-face {
font-family: 'CourierRegular';
src: url('../fonts/courier-webfont.eot');
src: url('../fonts/courier-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/courier-webfont.woff') format('woff'),
url('../fonts/courier-webfont.ttf') format('truetype'),
url('../fonts/courier-webfont.svg#CourierRegular') format('svg');
font-weight: normal;
font-style: normal;


}

/*
@font-face {
font-family: 'BSGalBSGalaxieCassiopeiaBasic';
src: url('../fonts/bs_galaxie_cassiopeia_basic-webfont.eot');
src: url('../fonts/bs_galaxie_cassiopeia_basic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bs_galaxie_cassiopeia_basic-webfont.woff') format('woff'),

url('../fonts/bs_galaxie_cassiopeia_basic-webfont.ttf') format('truetype'),
url('../fonts/bs_galaxie_cassiopeia_basic-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;


}

*/
@font-face {
font-family: 'BirchStdRegular';
src: url('../fonts/birchstd-webfont.eot');
src: url('../fonts/birchstd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/birchstd-webfont.woff') format('woff'),
url('../fonts/birchstd-webfont.ttf') format('truetype'),
url('../fonts/birchstd-webfont.svg#BirchStdRegular') format('svg');
font-weight: normal;
font-style: normal;


}




/*----------------- MAIN -------------------*/

body{
width: 100%;
height: 100%;
overflow: hidden;
background: black;
}

#homepage, #page{
margin: 0 auto;
width: 960px;
height: 600px;
position: relative;
}
#homepage{
background: black url('../homepage/bg.png') center center no-repeat;
}
#page{
margin-top: -19px;
background: black url('../pages/bg.png') center center no-repeat;
}
/* ------------------ HOMEPAGE ------------------*/

/*-------------- LOGO ------------------*/
#homepage h1{
height: 110px;
width: 309px;
position: absolute;
top: 70px;
left: 0px;
}

#homepage h1 a{
display: block;
height: 125px;
width: 309px;
position: relative;
background: black url(../homepage/alfredhitchcockbooks.png) center center no-repeat;
}
a span, #page h1 span{
display: block;
position: absolute;
top: -100000px;
}

/*-------------- NAV ------------------*/

#homepage ul{
position: absolute;
top: 0px;
left: 306px;
}
#homepage ul li{
display: block;
height: 120px;
margin: 0;
padding: 0;
width: auto;
float: left;

}
#homepage ul li a{
display: block;
height: 120px;
margin: 0;
padding: 0;
	transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	opacity: 0;
}
#homepage ul li a:visited{
padding: 0;
border: 0;
}
#homepage ul li#birds, #homepage ul li#birds a{
width: 178px;
}
#homepage ul li#marnie, #homepage ul li#marnie a{
width: 142px;
}
#homepage ul li#maryrose, #homepage ul li#maryrose a{
width: 156px;
}
#homepage ul li#hitchcock9, #homepage ul li#hitchcock9 a{
width: 177px;
}

#homepage ul li#birds a{
background: black url(../homepage/the-birds-button_over.png) top left no-repeat;
}
#homepage ul li#marnie a{
background: black url(../homepage/marnie-button_over.png) top left no-repeat;
}
#homepage ul li#maryrose a{
background: black url(../homepage/mary-rose-button_over.png) top left no-repeat;
}
#homepage ul li#hitchcock9 a{
background: black url(../homepage/hitchcock9-button_over.png) top left no-repeat;
}
#homepage ul li a:hover{
	opacity: 1;
}
/*-------------- BOOKS ------------------*/

#book {
	display: block;
	height: 300px;
	width: 180px;
	position: absolute;
	top: 300px;
}

	#book a {
		display: block;
		height: 300px;
		width: 180px;
	}
	
	#book.one {
		left: 305px;		
	}
	
	#book.one a {
		background: url(../homepage/book1.png) center center no-repeat;		
	}
	
	#book.two {
		left: 541px;		
	}
	
	#book.two a {
		background: url(../homepage/book2.png) center center no-repeat;		
	}
	
	#book.three {
		left: 780px;		
	}
	
	#book.three a {
		background: url(../homepage/book3.png) center center no-repeat;		
	}


/*------------------- PAGE ------------------*/
#page h1{
display: block;
width: 633px;
height: 240px;
position: absolute;
top: 51px;
left: 69px;
opacity: 0.9;
}
#page h1#birds{

background: black url(../pages/birds-title.png) top left no-repeat;
}
#page h1#marnie{
background: black url(../pages/marnie-title.png) top left no-repeat;
}
#page h1#maryrose{
background: black url(../pages/mary-rose-title.png) top left no-repeat;
}
#page h1#hitchcock9{
background: black url(../pages/hitchcock9-title.png) top left no-repeat;
}


ul#nav{
position: absolute;
top: 72px;
left: 709px;

}
ul#nav li{
display: block;
height: 78px;
width: 251px;
margin: 0;
padding: 0;
opacity: 0;
	transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
}
ul#nav li:hover{
opacity: 1;
}
ul#nav li a{
display: block;
height: 78px;
width: 251px;
}
ul#nav li#birds{

background: black url(../pages/the-birds-button_over.png) top left no-repeat;
}
ul#nav li#marnie{
margin-top: -1px;
background: black url(../pages/marnie-button_over.png) top left no-repeat;
}
ul#nav li#maryrose{
margin-top: 18px;
background: black url(../pages/mary-rose-button_over.png) top left no-repeat;
}
ul#nav li#hitchcock9{
margin-top: 11px;
background: black url(../pages/hitchcock9-button_over.png) top left no-repeat;
}

ul#nav li#birds:hover{
background: black url(../pages/the-birds-button_over.png) top left no-repeat;
}
ul#nav li#marnie:hover{

background: black url(../pages/marnie-button_over.png) top left no-repeat;
}
ul#nav li#maryrose:hover{
background: black url(../pages/mary-rose-button_over.png) top left no-repeat;
}
ul#nav li#hitchcock9:hover{
background: black url(../pages/hitchcock9-button_over.png) top left no-repeat;
}

#page img#bottom-image{
width: 411px;
height: 296px;
position: absolute;
top: 304px;
left: 0px;
}
#page #content{
color: white;
width: 370px;
height: 300px;
position: absolute;
top: 300px;
left: 310px;
z-index: 4000;
overflow: hidden;
font-size: 12px;
font-family: Time New Romans;
font-family: helvetica;
background: url(../pages/hand-01.png) bottom right no-repeat;

}
#page #content.hitchcock9, #page #content.thebirds{
background-image: none;
}
#page #content.hitchcock9 p, #page #content.thebirds p{
width: 370px;
position: absolute;
top: 0px;
left: 0px;
display: block;
opacity: 1;
text-align: center;
background: none;
height: 300px;
}
#page #content p#p1{
width: 370px;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
display: block;
opacity: 1;
text-align: center;
height: 300px;
}
#page #content p#p2{
position: absolute;
top: 0px;
left: 0px;
display: block;
opacity: 0;

}
#page #content p#p1, #page #content p#p2{
	transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	-webkit-transition: all 1s linear;
}
#page #content:hover p#p1{
opacity: 0;
}
#page #content:hover p#p2{
opacity: 1;
}
a#back-to-home{
display: block;
position: absolute;
top: 506px;
left: 850px;
width: 97px;
height: 94px;
background: url(../pages/homebutton.png) left top no-repeat;
}
a#back-to-home:hover{
background: url(../pages/homebutton_over.png) left top no-repeat;
}
#content.thebirds p{
font-family: BCCantoriaLightBCCantoriaLtIt;
font-size: 16px;
}
#content.marnie p#p1{
font-family: times roman;
font-size: 16px;
}
#content.marnie p#p2{
font-family: times roman;
font-size: 14px;
}
#content.marnie p#p2 strong{
display: block;
text-align:center;
}
#content.marnie p#p2 strong{
font-family: times roman;
font-size: 14px;
}
#content.marnie p#p2 hr {
display: block;
height: 1px;
background: transparent;
border: none;
margin: 1px 0 1px 0;
}
#content.maryrose p#p1{
font-family: BirchStdRegular;
font-size: 22px;
letter-spacing: 2px;
}
#content.maryrose p#p2{
font-family: times roman;
font-size: 12px;
}
#content.hitchcock9 p{
font-family: CourierRegular;
font-size: 13px;
}