@CHARSET "UTF-8";
html, body {
	margin: 0;
	padding: 0;
	background: white;	
}
:focus {
	outline: 0;
}
#container {
	/*margin: 76px auto 0;*/
	width: 1212px;
	position: relative;
	height: 867px;
	margin: 0 auto;
}
h1 {
	position: absolute;
	top: 0;
	left: 14px;
	background: url("elements/James_Goodcock_Imaging.webp") no-repeat;
	height: 71px;
	text-indent: -3000px;
	width: 100%;
	margin: 0;
	padding: 0;
}

#profile {
	position: absolute;
	top: 0;
	right: 73px;
	background: url("elements/profile.webp") no-repeat;
	width: 223px;
	height: 41px;
	text-indent: -3000px; 
}

#contact {
	position: absolute;
	top: 41px;
	right: 73px;
	background-image: url("elements/contact.webp");
	width: 223px;
	height: 29px;
}
#contact a {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("elements/contact_active.webp");
}
#type_selector {
	position: absolute;
	top: 124px;
	right: 73px;
}
#type_selector a {
	display: block;
	width: 100%;
	height: 100%;
}
#type_selector div {
	height: 26px;
	float: left;
}
#type_selector div.cgi {
	background-image: url("elements/cgi.webp");
	width: 44px;
}
#type_selector div.cgi a {background-image: url("elements/cgi_active.webp");}
#type_selector div.video {
	background-image: url("elements/video.webp");
	width: 54px;
}
#type_selector div.video a {background-image: url("elements/video_active.webp");}

#images {
	position: absolute;
	left: 14px;
	top: 150px;
	height: 685px;
	overflow: hidden;
	width: 1125px;
	height: 685px;
	z-index: 1;
}
#images img {
	position: absolute;
	top: 0;
	left: 0;
	width: 1125px;
	height: 685px;
}
#image_pager {
    position: absolute;
    width: 73px;
    right: 0;
    top: 546px;
}
#image_pager div {
	width: 73px;
    height: 32px;	
}
#image_pager a {
	display: block;
	width: 100%;
	height: 100%;
}
#image_pager div.phase_01 {background-image: url("elements/phase_01.webp");}
#image_pager div.phase_02 {background-image: url("elements/phase_02.webp");}
#image_pager div.phase_03 {background-image: url("elements/phase_03.webp");}
#image_pager div.phase_04 {background-image: url("elements/phase_04.webp");}
#image_pager div.phase_05 {background-image: url("elements/phase_05.webp");}
#image_pager div.phase_06 {background-image: url("elements/phase_06.webp");}
#image_pager div.phase_07 {background-image: url("elements/phase_07.webp");}
#image_pager div.phase_08 {background-image: url("elements/phase_08.webp");}
#image_pager div.phase_09 {background-image: url("elements/phase_09.webp");}
#image_pager div.phase_01 a {background-image: url("elements/phase_01_active.webp");}
#image_pager div.phase_02 a {background-image: url("elements/phase_02_active.webp");}
#image_pager div.phase_03 a {background-image: url("elements/phase_03_active.webp");}
#image_pager div.phase_04 a {background-image: url("elements/phase_04_active.webp");}
#image_pager div.phase_05 a {background-image: url("elements/phase_05_active.webp");}
#image_pager div.phase_06 a {background-image: url("elements/phase_06_active.webp");}
#image_pager div.phase_07 a {background-image: url("elements/phase_07_active.webp");}
#image_pager div.phase_08 a {background-image: url("elements/phase_08_active.webp");}
#image_pager div.phase_09 a {background-image: url("elements/phase_09_active.webp");}

#videos {
	position: absolute;
	left: 14px;
	top: 150px;
	height: 685px;
	overflow: hidden;
	width: 1125px;
	height: 685px;
	background-color: #e4e4e4;
	z-index: 1;
}
#videos a {
	display: none;
}

#project_pager {
	position: absolute;
	right: 72px;
	top: 835px;
}
#project_pager div {
	width: 39px;
	height: 44px;
	float: left;
}
#project_pager a {
	display: block;
	width: 100%;
	height: 100%;
}
#project_pager div.next {background-image: url("elements/navigation_next.webp");}
#project_pager div.next a {background-image: url("elements/navigation_next_active.webp");}
#project_pager div.previous {background-image: url("elements/navigation_previous.webp");}
#project_pager div.previous a {background-image: url("elements/navigation_previous_active.webp");}

#project_name {
	position: absolute;
	left: 14px;
	top: 835px;
	height: 24px;
	overflow: hidden;
}

#debug_panel {
	position: absolute;
	top: 3px;
	left: 3px;
	background-color: white;
	border: 1px solid black;
	padding: 5px;
}

/********************************************/

body.mini #container {
	height: 610px;
}
body.mini #profile {
	background: url("elements/profile_mini.webp") no-repeat;
	top: 88px;
	left: -7px;
}
body.mini #contact {
	left: -7px;
	top: 130px;
	background-image: url("elements/contact_mini.webp");
}
body.mini #contact a {
	background-image: url("elements/contact_mini_active.webp");
}
body.mini #images,
body.mini #videos {
	top: 68px;
	left: 286px;
}
body.mini #images,
body.mini #images img,
body.mini #videos {
	width: 828px;
	height: 504px;
}
body.mini #type_selector {
	right: 98px;
	top: 47px;
}
body.mini #project_name {
	left: 284px;
	top: 572px;
	width: 830px;
}
body.mini #project_pager {
	right: 99px;
	top: 572px;
}
body.mini #image_pager {
	right: 25px;
	top: 284px;
}