/* stylesheet for obsolescence.ca */

body {background: #3b4250; color: #111; font-family: Georgia, serif; text-align: center; margin: 0; margin-bottom: 10px;}

a {text-decoration: none;}
a:link,a:visited {color: #c9bfa7;}
a:hover,a:active {color: #fff;}
a img {border: none;}

.anchor {clear: both; height: 0; font-size: 0; line-height: 0;}

/*
page grey: #787878
sidebar blue 1: #434e5d
sidebar blue 2: #5d6c81
(double renticulation, 10px mosaic, then faded 30% over layer of blue 1)
*/

div {text-align: left; border: 0px black solid;}
div#page {position: relative; width: 970px; margin-left: auto; margin-right: auto; margin-bottom: 1em; overflow: hidden;}
#title {position: fixed; width: 750px; background: url(images/mosaic-title.gif) no-repeat bottom left; padding: 90px 0 0 0; margin-left: 220px; z-index: 5; opacity: .94; filter: alpha(opacity=94); cursor: pointer;}
div#side {position: fixed; width: 180px; color: #999; background: url(images/mosaic-side.gif) repeat-y bottom left; padding: 10px 20px 20px 20px; z-index: 4; opacity: .90; filter: alpha(opacity=90);}
div#body {position: relative; width: 690px; font-size: 1em; background: url(images/mosaic-body.gif) repeat-y top left; padding: 110px 30px 20px 250px; line-height: 1.5em;}

#home {position: absolute; /*top: 52px;*/ bottom: 18px; right: 30px;}
#subtitle-caption {position: absolute; bottom: 0; right: 0; padding-bottom: 10px; /*border: 1px #bbb solid;*/}

/* side */
#login {margin-top: 16px;}
#login p {font-size: 0.8em; margin-bottom: 3px;}
.loginbox {width: 134px; color: #777; font-size: 0.8em; background-color: #404957; border: 1px #3b4250 solid; padding: 2px; margin-bottom: 3px; font-family: Courier New;}
.loginbutton {background-color: #c9bfa7; border: 1px #3b4250 solid; padding: 1px;}
/*
#login input {width: 134px; color: #777; font-size: 0.8em; background-color: #404957; border: 1px #3b4250 solid; padding: 2px; margin-bottom: 3px; font-family: Courier New;}
*/

ul#collaborators {list-style: none; margin: 0; padding: 0; line-height: 1.4em;}
ul#collaborators li {padding-left: 0;}
ul#collaborators li p {margin-bottom: 0.4em;}
ul#collaborators ul {list-style: none; margin: 0; padding: 0; margin-bottom: 1em;}
ul#collaborators ul li {padding-left: 18px; background: url(images/bullet-10.gif) no-repeat 0px 7px;}

/* body */
#body ul {list-style: none; margin: 0; padding: 0;}
#body li {padding-left: 14px; background: url(images/bullet-05.gif) no-repeat 1px 0.6em; margin-bottom: 0.6em;}

.thumbnail {border: 1px #6d7887 solid; background: url(images/screen.gif);}

.gallery {float: right; width: 250px; margin: 10px -30px 1em 24px;}
.gallery img {margin-bottom: 0.6em; border: 1px #6d7887 solid;}
.gallery p {font-size: 0.95em; font-family: Courier New, Courier; line-height: 1.3em; margin: 0 10px 1.5em 0;}
.title {font-style: italic;}

ul#links {font-size: 1.1em; padding: 0 10px 0px 0; margin-bottom: 0;}
#links li {height: 20px; background: url(images/bullet-20-grey.gif) no-repeat 0px 0px; margin-bottom: 20px; padding-left: 30px;}

#page-corner {position: absolute; bottom: 0px; right: 0px; width: 45px; height: 110px; background: url(images/page-corner-lighter.gif) no-repeat 0px 0px;}
#page-corner:hover {background-position: -45px 0px;}

/* sub-pages */
h2, h3 {position: relative; font-weight: normal; width: 440px;} /* set widths avoid conflict with gallery div */
.body-header {position: relative; right: 30px; width: 440px; padding-left: 30px; margin-top: 9px; background: url(images/bullet-20.gif) no-repeat left center;}
.quote {margin: 0px 20px 0.5em 20px; font-size: 0.9em;}
.quoter {margin: 0px 20px 0px 20px; font-size: 0.9em;}
ol#footnotes {font-size: 0.9em; margin-top: 2em; padding-top: 1em; border-top: 1px #6d7887 solid;} /* id because class will not override #body li */
ol#footnotes li {margin: 0; padding: 0; background: none;}

.item-imagebox {margin-bottom: 1em;}
.item-image {border: 1px #6d7887 solid;}
.item-artist {display: inline; font-size: 1.1em;}
.item-title {display: inline; font-size: 1.1em; font-style: italic;}


/* collaboration research page */
.collaborative-item {border-bottom: 1px white dashed;}
.description {font-style: italic;}
.assessment {color: #fff;}