/* For development purposes */

/*
#content {
	background-height: 100%;
	background-image: url('/img/test.png');
	background-width: 100%;
}
*/

/*
 *  Handy conversion chart:
 *
 *  1150 x 680 pixel layout   Percentage  NB It's now 1250 x 680
 *                     10px         1.5%
 *                     12px         1.8%
 *                     18px         2.6%
 *                     22px         3.2%
 *                     25px         3.7%
 *                     51px         7.5%
 *                     54px         7.9%
 *                    105px        15.4%
 *                    450px        66.2%  63.6% of #wrapper (450 / 708 * 100)
 *
 *  For example, menu items take up 7.9% of the height of the screen.
 *  That's 54px (according to the font size in Photoshop) out of 680px
 *  on the mockup.  54 / 680 * 100 = 7.9
 */

/* Everywhere ------------------------------------------------------- */

body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: Helvetica, Sans-Serif;
	font-size: 12px; /* This will be overwritten dynamically */
	margin: 0;
	overflow: scroll; /* Needed to stop site resizing on content reload.  That in turn is caused by #content allowing overflow, which is necessary to show the last row of project thumbnail descriptions. */
	overflow-x: hidden; /* Non-standard */
	padding: 0;
}

body.archive {
	background-color: #000000;
	color: #FFFFFF;
}

#wrapper {
	background-color: inherit; /* For archive/home transitions */
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

a {
	color: #000000;
	text-decoration: underline;
}


body.archive a {
	color: #FFFFFF;
}

a img {
	border: none;
}

#content {
	background-color: inherit; /* For archive/home transitions */
	/* overflow: hidden; No scrollbars in general, for #project_image only. */
	position: relative; /* For the + and - signs */
	z-index: 1; /* The plus and minus signs should be in front of the image. */
}

/* Togglable bits --------------------------------------------------- */

#toggles {
	font-size: 2.6%;
	height:32px;
}

#toggles, #toggles a {
	color: #CCCCCC;
	text-decoration: none;
}

#info_toggle, #pager {
	float: right;
}

#info_toggle_link {
	font-family: "Archer Bold", Cursive;
	/* font-size: 3.2%; This would be OK if #menu_toggle_link's font-size hadn't been moved to #toggles.  Now we need to compensate for that 2.6% parent font-size. */
	/* font-size: 123.1%; 3.2% is 123.1% of 2.6%: 3.2/2.6*100 = 123.1 */
	font-size: 170%;
	font-style: italic;
	font-weight: 400;
}

/* Compensate for canvas elements' internal padding */
#info_toggle_link canvas,
#info_toggle_link cufoncanvas {
	right: -1px !important;
	/*top: -1px !important;*/
	top: -5px !important;
}

#pager {
	font-weight: 500;
}

span.literal_word_page {
	color: #FFFFFF;
}

#menu_toggle {
	background-color: transparent;
}

#menu_toggle_link {
	/* font-size: 2.6%; This had to be moved to #toggles */
	font-family: "Berthold Akzidenz Grotesk BE", Sans-Serif;
	letter-spacing: -0.02em; /* Kerning in Photoshop is -20, measured in 1/1000th of an em, so it's -0.02em. */
	font-weight: 500;
}

/* Compensate for canvas elements' internal padding */
#menu_toggle_link canvas,
#menu_toggle_link cufoncanvas {
	left: -1px !important;
	top: -1px !important;
}

/* Menu ------------------------------------------------------------- */

#menu {
	background-color: inherit; /* For archive/home transitions */
	/* The height is managed in JavaScript. */
	display: none; /* Hidden by default */
	position: absolute;
	width: 90%; /* 100% would make it the size of the viewing portal.  The wrapper and content divs take up 90% of this width. */
	z-index: 3;

	/* Compensate for Cufon */
	margin-left: -2px;
	padding-left: 2px;
}

.menu_item {
	font-family: "Berthold Akzidenz Grotesk BE", Sans-Serif;
	font-size: 7.9%;
	font-weight: 500;
	/* line-height: 94%; Photoshop shows a font size of 54px and 51px leading. 51/54*100 = 94 */
	margin-bottom: -0.3%; /* Cufon doesn't seem to recognise line-height.  This looks about right. */
}

/* Compensate for canvas elements' internal padding */
.menu_item canvas,
.menu_item cufoncanvas {
	left: -3px !important;
	top: -3px !important;
}

.menu_item a {
	text-decoration: none;
}

/*.menu_item a:hover {
	color: #C5C5C7;
}*/

.menu_item a cufon {
	color: inherit;
}

.menu_item a cufon canvas {
	color: inherit;
}

/* Project listings ------------------------------------------------- */

#projects {
	font-size: 1.8%;
	height: 100%;
	width: 100%;
}

#projects_inner {
	height: 100%;
	width: 100%;
}

.project_thumbnail {
	float: left;
	height: 15.4%;
	margin-right: 0.9%; /* This ought to be 1.5% judging by my calculations.  However, it needs to be 0.6 in order to match up with the pager's calculations for how many images fit on a page.  In contrast, 0.8% aligns up with the test background at full size. */
	margin-bottom: 0.9%; /* This ought to be 1.5% judging by my calculations */
}

.project_thumbnail a {
	display: block;
	height: 100%;
	text-decoration: none;
}

.project_thumbnail img {
	height: 100%; /* This only works in Firefox if View > Zoom is set to 100% */
	width: 100%; /* Without this, the image may occasionally be 1px thinner than its container div */
}

#projects .project_description {
	background-color: #000000;
	color: #FFFFFF;
	display: none;
	font-family: Helvetica, Sans-Serif;
	/*font-weight: bold;*/
	/* Padding worked out inline due to variable image width percentage */
	position: relative;
	top: -4px;
	/* #TODO: Wrap text.  white-space: wrap; doesn't help. */
}

/* Info ------------------------------------------------------------- */

#info {
	background-color: inherit; /* For archive/home transitions */
	display: none;
	font-size: 1.8%;
	font-weight: bold;
	position: absolute;
	/*height: 15.4%;*/
	height: 11.5%; /* Client's request */
	width: 90%; /* 100% would make it the size of the viewing portal.  The wrapper and content divs take up 90% of this width. */
	z-index: 2;
}

#info #image_links {
	float: right;
}

#info #image_links a {
	color: #CCCCCC;
	text-decoration: none;
}

#info #left_block {
	float: left;
	margin-right: 1.5%;
	width: 15.4%;
}

#info #right_block {
	color: #CCCCCC;
	margin-left: 16.9%; /* Left block width + margin-right */
}

/* Project image, including horizontal scrollbar -------------------- */

#project_image {
	font-size: 1.8%;
	height: 100%;
	width: 100%;
	z-index: 1; /* The plus and minus signs should be in front of the image. */
}

#project_image_inner {
	height: 100%;
	overflow: auto; /* For horizontal scrolling. */
	overflow-y: hidden; /* Non-standard. */
	width: 100%;
	z-index: 1; /* The plus and minus signs should be in front of the image. */
}

#project_image_inner img {
	z-index: 1; /* The plus and minus signs should be in front of the image. */
}

/*

For plus and minus, the 1250px width is divided up like this: 0px "minus" hover area starts with 40px gap before start of "minus" image, then another 500px until end of "minus" hover area, where "plus" hover area starts.  Its "plus" image ends (not starts but ENDS) after another 670px, leaving another 40px gap until the end of the "plus" hover area and the total width.

Update: now the "minus" area should be 540px wide, including the 40px.

*/

#minus {
	background-color: transparent !important;
	bottom: 16px; /* Scrollbar */
	display: block;
	left: 0;
	position: absolute;
	top: 0;
	/* width: 26.5%; (40 + 293) / 1255 * 100 */
	width: 43.0%; /* (40 + 500) / 1255 * 100 */
	z-index: 2; /* The plus and minus signs should be in front of the image. */
}

#plus {
	background-color: transparent !important;
	bottom: 16px; /* Scrollbar */
	display: block;
	position: absolute;
	/* width: 73.5%; 100 - 26.5 */
	width: 57.0%; /* 100 - 43.0 */
	right: 0;
	top: 0;
	z-index: 2; /* The plus and minus signs should be in front of the image. */
}

#minus_img {
	display: none;
	height: 4.7%; /* 32 / 680 * 100 */
	left: 7.4%; /* 40 / (40 + 500) * 100 */
	position: absolute;
	top: 47.6%; /* ((680 / 2) - (32 / 2)) / 680 * 100 */
	width: 5.9% /* 32 / (40 + 500) * 100.  32 = Actual image width. */
}

#plus_img {
	display: none;
	height: 4.7%; /* 32 / 680 * 100 */
	right: 5.6%; /* 40 / (40 + 670) * 100 */
	position: absolute;
	top: 47.6%; /* ((680 / 2) - (32 / 2)) / 680 * 100 */
	width: 4.5% /* 32 / (40 + 670) * 100.  32 = Actual image width. */
}

/* Contact page ----------------------------------------------------- */

#contact {
	font-size: 1.8%;
	font-weight: bold;
}

#contact #left_block,
#contact #right_block {
	float: left;
	width: 15.5%;
	font-size:12px;
}

#contact #pdf_files {
	margin-left: 31%;
}

#contact #pdf_files span.content,
#contact #pdf_files a,
#contact #credits,
#contact #credits a {
	color: #CCCCCC;
}

#contact #credits {
	float: right;
}

/* Showreel */

#showreel {
	font-size: 0;
	height: 74.1%; /* 504 out of 680 pixels */
	width: 71.7%; /* 896 of 1250 pixels */
}

#showreel object, #showreel embed {
	height: 100%;
	width: 100%;
}

/* Secret bits (don't show dynamically created links) */

div#secret_area {
	display: none;
}

div#category_name {
	display: none;
}

/* Browser specific hacks */

body.firefox a:focus {
	-moz-outline: none;
	outline: none;
}

body.safari div.menu_item {
	margin-bottom: -1%;
}

body.internet_explorer img {
	-ms-interpolation-mode: bicubic;
}

body.internet_explorer #info {
	font-size: 2%; /* IE displays text too small */
}

body.internet_explorer #content {
	font-size: 175%; /* IE displays text too small */
}

/* IE <8 can't cope with inheritance, naturally */

body.internet_explorer #wrapper,
body.internet_explorer #content,
body.internet_explorer #menu,
body.internet_explorer #info {
	background-color: #FFFFFF;
}

/* Firefox can't quite fit the thumbnails */

body.firefox div.project_thumbnail {
	margin-right: 0.8%;
}