/* 
	Heritage Burnaby Main Stylesheet
	January 2008
	Atomic Crayon / karen@atomiccrayon.com / SMRT
*/


/* Tripoli reset styles */

* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; line-height: 1; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
dfn,  cite, var, address { font-style: normal; }
th,  h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { /*list-style: none;*/ }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */

/* most background images won't repeat */

* { background-repeat: no-repeat; }


/* Sections flagged with =
	GENERIC
	WRAPPER
	LOGO
	NAVIGATION
	MINOR NAVIGATION
	IMAGE BAR
	CONTENT
	FOOTER
	PAGE SPECIFIC
		Home
		Atlas
		Research
		Artifact
		Photograph
		Heritage
	SIFR
*/


/* Colours

brown: #4c3c1b
yellow: #f7f19f
light grey: #f1f0f0
medium grey: #d8d8d8
dark grey: #737272
beige: #a09a8c
blue: #289eac (Artifact section)
green: #789613 (Photograph section)
orange: #ba4c09 (Heritage section)
dark yellow: #e1c007 (Library section)

*/

/* headline font: Delicious Roman 28px */


/* fix for Element CMS table & absolute positioning */

.cms_main_table {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}


/* =GENERIC
----------------------------------------------------*/

html, body {
	height: 100%; /* to push footer to the bottom */	
}

body {
	color:#000;
	background-color: #fff;
	font-size: 76%;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	background-image: url(images/main-bk.png);
	background-repeat: repeat-x;
	background-position: 0 110px;
}


a:focus {
	overflow: hidden;
	border: dotted 1px #666;
}

.clear {
	clear: both;
}


/* =WRAPPER
----------------------------------------------------*/

#wrapper { /* ie6.css */
	min-height:100%; /* to push footer to the bottom */
	position: relative; /* to push footer to the bottom */
}

#wrapper2 {
	width: 750px;
	margin: 0 auto;
	position: relative;
}


/* =LOGO
----------------------------------------------------*/

#logo {
	position: absolute;
	top: 25px;
	left: 0;
}

#logo #print-logo {
	display: none;
}

#logo h1 a {
	display: block;
	background-image: url(images/logo-print.png);
	width: 199px;
	height: 61px;
	text-indent: -9999px;
}

#logo #tag {
	text-indent: -9999px;
}

#logo a#city-link {
	display: none;
}

a#skip:link, a#skip:visited, a#skip:hover {
	position: relative;
	display: block;
	width: 200px;
	top: 20px;
	left: 380px;
	text-decoration: underline;
	font-size: 1.6em;
	text-indent: -9999px;
}

a#skip:active, a#skip:focus {
	text-indent: 0;
}


/* =NAVIGATION
----------------------------------------------------*/

#navigation {
	position: absolute;
	top: 110px;
	left: 0;
	width: 750px;
}

#navigation ul {
	list-style: none;
	position: relative;
	width: 401px;
	height: 31px;
	margin: 0 auto;
	background-image: url(images/navigation.png);
	background-repeat: no-repeat;
}

#navigation li {
	display: inline;
}

#navigation li a {
	display: block;
	position: absolute;
	height: 31px;
	top: 0;
	text-indent: -9999px;
}

#navigation li a:hover, #navigation li a:active, #navigation li a:focus {
		
}

#navigation li a#experience-nav {
	left: 0;
	width: 106px;
}

#navigation li a#experience-nav:hover, #navigation li a#experience-nav:active, #navigation li a#experience-nav:focus,  .experience #navigation li a#experience-nav {
	background-position: 0 -31px;
	background-image: url(images/navigation.png);
}

#navigation li a#learn-nav {
	left: 116px;
	width: 72px;
}

#navigation li a#learn-nav:hover, #navigation li a#learn-nav:active, #navigation li a#learn-nav:focus, .learn #navigation li a#learn-nav {
	background-position: -116px -31px;
	background-image: url(images/navigation.png);
}

#navigation li a#research-nav {
	left: 198px;
	width: 96px;
}

#navigation li a#research-nav:hover, #navigation li a#research-nav:active, #navigation li a#research-nav:focus, .research #navigation li a#research-nav {
	background-position: -198px -31px;
	background-image: url(images/navigation.png);
}

#navigation li a#atlas-nav {
	left: 304px;
	width: 70px;
}

#navigation li a#atlas-nav:hover, #navigation li a#atlas-nav:active, #navigation li a#atlas-nav:focus, .page-atlas #navigation li a#atlas-nav {
	background-position: -304px -31px;
	background-image: url(images/navigation.png);
}


/* =MINOR NAVIGATION
----------------------------------------------------*/

#minor-navigation {
	position: absolute;
	top: 77px;
	left: 543px;
}

#minor-navigation ul {
	list-style: none;
	position: relative;
	width: 207px;
	height: 10px;
	background-image: url(images/minor-navigation.png);
}

#minor-navigation li {
	display: inline;
}

#minor-navigation li a {
	display: block;
	position: absolute;
	height: 10px;
	top: 0;
	text-indent: -9999px;
}

#minor-navigation li a#home-nav {
	left: 0;
	width: 32px;
}

#minor-navigation li a#aboutus-nav {
	left: 60px;
	width: 54px;
}

#minor-navigation li a#contactus-nav {
	left: 142px;
	width: 65px;
}


/* =IMAGE BAR
----------------------------------------------------*/

#image-bar {
	position: absolute;
	width: 750px;
	height: 116px;
	top: 142px;
	left: 0;
	background-image: url(images/image-bar-generic.jpg);
}


/* =CONTENT
----------------------------------------------------*/

#content { /*ie6.css*/
	padding: 0 50px;
	padding-bottom: 140px; /* footer height + 50px - push footer to the bottom */
	margin-top: 264px;
}

#content a:link, #content a:visited {
	color: #ba4c09;
	font-weight: bold;
	text-decoration: underline;
}

#content a:hover, #content a:active, #content a:focus {
	text-decoration: underline;
	color: #289eac;
}

#content p {
	font-size: 1em;
	line-height: 1.6em;
	margin: 0 0 1.2em 0;
}

#content ul, ol {
	font-size: 1em;
	margin: 0 0 1.2em 0;
}

#content li {
	margin: 0 0 .5em 4em;
	line-height: 1.4;
}

#content h1, #content h2, #content h3, #content h4 {
	color: #4c3c1b;
	font-size: 1.8em;
	margin: 1.4em 0 .2em 0;
}

#content h3 {
	font-size: 1.6em;
}

#content h4 {
	font-size: 1.3em;
}

#content h2.headline { /* other styling done w/ sifr3 */ /*ie6.css*/
	padding-left: 60px;
	margin: 0 0 0 -60px;
	background-image: url(images/headline-dingbat.png);
	background-position: 0 8px;
}


/* =FOOTER
----------------------------------------------------*/

#footer { /* push footer to bottom of page */
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 90px;   /* Height of the footer */
	background-color: #f1f0f0;
	border-top: solid #d8d8d8 4px;
}

#footer-inside {
	width: 750px;
	margin: 16px auto;
	position: relative;
}

#footer a {
	color: #000;
	text-decoration: none;
}

#footer #footer-navigation {
	word-spacing: .4em;
	font-weight: bold;
}

#footer #footer-navigation a {
	word-spacing: 0;
}

#footer p {
	margin: 0 0 .7em 0;
	line-height: 1;
}

#footer a#top-link {
	position: absolute;
	top: -44px;
	left: 710px;
	display: block;
	width: 40px;
	height: 26px;
	background-color: #d8d8d8;
	background-image: url(images/top.png);
	background-position: center center;
	text-indent: -9999px;
}

/* =PAGE SPECIFIC
----------------------------------------------------*/

/* =Home */

.home {
 	background-image: url(images/home-bk.png);
	background-position: 0 110px;
}


.home #logo a#city-link {
	position: absolute;
	top: 0px;
	left: 228px;
	display: block;
	width: 105px;
	height: 64px;
	background-image: url(images/burnaby-logo.png);
	text-indent: -9999px;
}


.home #image-bar {
	height: 161px;
	background-image: url(images/image-bar-home.jpg);
}

.home #content {
	margin-top: 314px;
	padding-right: 0;
}

.home #content .col {
}

.home #content #one {
	float: left;
	width: 350px;
}

.home #content #two {
	float: right;
	width: 304px;
	padding-top: 4px;
}

.home #content #two .box  {
	position: relative;
	width: 282px;
	height: 80px;
	margin-bottom: 12px;
	padding: 7px;
}

.home #content #two .box h3 {
	margin: 0;
	width: 190px;
	height: 20px;
	text-indent: -9999px;
}

.home #content #two #experience h3 {
	background-image: url(images/subhead-experience.png);
}

.home #content #two #learn h3 {
	background-image: url(images/subhead-learn.png);
}

.home #content #two #research h3 {
	background-image: url(images/subhead-research.png);
}

.home #content #two #atlas h3 {
	background-image: url(images/subhead-atlas.png);
}



.home #content #two .box a.go-link  {
	position: absolute;
	top: -5px;
	left: -5px;
	width: 294px;
	height: 80px;
	border: solid 5px #d8d8d8;
	background-image: url(images/button-go.png);
	background-position: bottom right;
	text-indent: -9999px;
}

.home #content #two .box a.go-link:hover, .home #content #two .box a.go-link:active, .home #content #two .box a.go-link:focus {
	border-color: #a09a8c;
}

.home #content .clear {
	margin-top: -300px;  /* fixes a very weird float bug in IE 6 & 7 -- no idea why though */
}

/* =Atlas */

.page-atlas #content {
/*	margin-top: 314px;*/
	padding-right: 0;
}

.page-atlas #content .col {
	padding-bottom: 40px;

}

.page-atlas #content #one {
	float: left;
	width: 350px;
}

.page-atlas #content #one #copyright {
	margin-top: 35px;
	background-color: #eee;
	padding: 10px;
}

.page-atlas #content #one #copyright li {
	list-style: none;
	margin: 5px 0 5px -5px;
	padding-left: 20px;
	background-image: url(images/bullet_arrow_right.png);
	background-position: left top;
	background-repeat: no-repeat;
}

.page-atlas #content #two {
	float: right;
	width: 304px;
	padding-top: 11px;
}

.page-atlas #content #two .box  {
	position: relative;
	width: 282px;
	width: 170px;
	height: 147px;
	margin-bottom: 12px;
	padding: 7px 7px 7px 112px;
}

.page-atlas #content #two .box h3 {
	margin: 0 0 10px 0;
}

.page-atlas #content #two .box img {
	display: block;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 100px;
	height: 139px;
	border: solid 1px #999;
}

.page-atlas #content #two .box a.go-link  {
	position: absolute;
	top: -5px;
	left: -5px;
	width: 294px;
	height: 145px;
	height: 147px;
	border: solid 5px #d8d8d8;
	background-image: url(images/button-go.png);
	background-position: bottom right;
	text-indent: -9999px;
}

.page-atlas #content #two .box a.go-link:hover, .page-atlas #content #two .box a.go-link:active, .page-atlas #content #two .box a.go-link:focus {
	border-color: #a09a8c;
}

.page-atlas #content #support {
	font-size: .9em;
	margin-top: 20px;
	padding-top: 5px;
     border-top: 1px dotted #ccc;
	height: 70px;
	position: relative;
}

.page-atlas #content #support img {
	position: absolute;
}
 
.page-atlas #content #support img#heritage {
	 left: 0;
	bottom: 14px;
}

.page-atlas #content #support img#canada {
	 left: 280px;
	bottom: 10px;
}

.page-atlas #content #support img#burnaby {
	 right: 0;
	bottom: 0;
}


.page-atlas #content .clear {
	margin-top: -300px;  /* fixes a very weird float bug in IE 6 & 7 -- no idea why though */
}



/* =Research */

.research #searches {
	background-image: url(images/search-icons.gif);
	width: 703px;
	height: 129px;
	list-style: none;
	margin: 140px 0 0 0;
	padding: 0;
	position: relative;
}

.research #searches li {
	margin: 0;
	padding: 0;
}

.research #searches li {
	text-indent: -9999px;
}

.research #searches li {
	position: relative;
	width: 140px;
	height: 129px;
	float: left;
}

.research #searches li p.search-link a {
	display: block;
	width: 140px;
	height: 129px;
	position: absolute;
	top: 0;
	left: 0;
}


.research #searches li p.search-link a:focus, .research #searches li p.search-link a:hover, .research #searches li p.search-link a:active {
	background-image: url(images/search-icons-over.gif);
}


.research #searches li#photograph p.search-link a {
	background-position: 0 0;
}

.research #searches li#artifact p.search-link a {
	background-position: -140px 0;
}

.research #searches li#textual p.search-link a {
	background-position: -280px 0;
}

.research #searches li#heritage p.search-link a {
	background-position: -420px 0;
}

.research #searches li#library p.search-link a {
	background-position: -560px 0;
}




.research #searches li#one-search {
	position: absolute;
	top: -120px;
	left: 0;
	width: 703px;
	height: 92px;
}

.research #searches li#one-search p.search-link a {
	background-image: url(images/one-search.gif);
	width: 703px;
	height: 92px;
}



/* =Artifact */

.artifact #image-bar {
	background-image: url(images/image-bar-artifact.jpg);
}

.artifact #content h2.headline { /* other styling done w/ sifr3 */
	background-image: url(images/headline-dingbat-blue.png);
	background-position: left top;
	padding-bottom: 5px;
}


/* =Photograph */

.photograph #image-bar {
	background-image: url(images/image-bar-photograph.jpg);
}

.photograph #content h2.headline { /* other styling done w/ sifr3 */
	background-image: url(images/headline-dingbat-olive.png);
	background-position: left top;
	padding-bottom: 5px;
}

/* =Text */

.text #image-bar {
	background-image: url(images/image-bar-text.jpg);
}

.text #content h2.headline { /* other styling done w/ sifr3 */
	background-image: url(images/headline-dingbat-green.png);
	background-position: left top;
	padding-bottom: 5px;
}


/* =Heritage */

.heritage #image-bar {
	background-image: url(images/image-bar-heritage.jpg);
}


.heritage #content h2.headline { /* other styling done w/ sifr3 */
	background-image: url(images/headline-dingbat-orange.png);
	background-position: left top;
	padding-bottom: 5px;
}


/* =Library */

.librarycollections #content h2.headline { /* other styling done w/ sifr3 */
	background-image: url(images/headline-dingbat-yellow.png);
	background-position: left top;
	padding-bottom: 5px;
}


/* =SIFR
----------------------------------------------------*/

.sIFR-flash {
  visibility: visible !important;
  margin: 0;
  padding: 0;
}

.sIFR-unloading .sIFR-flash {
  visibility: hidden !important;
}

.sIFR-replaced, .sIFR-ignore {
  visibility: visible !important;
}

.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.sIFR-replaced div.sIFR-fixfocus {
  margin: 0pt; 
  padding: 0pt; 
  overflow: auto; 
  letter-spacing: 0px; 
  float: none;
}

.sIFR-dummy { 
  width: 0px;
  height: 0px;
  margin-left: 42px;
  z-index: 0;
}

/*---- Header styling ---*/

.sIFR-active h2.headline {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;

  font-size: 28px;
}