@CHARSET "UTF-8";
@font-face {
  font-family: "Hermes Sans";
  src: url('/static/fonts/HermesSans-Reg.otf');
}

body {
  background-color: #ddddd8;
  font-family: "Hermes Sans","Courier New", Courier, monospace;
  font-size: 14px;
  color: black;
  overflow-x: hidden; /* for the scrollbar caused by the bird animation */
  line-height: 1.5; /* not sure adding this is safe... */
}
img { border: 0; }
p {
  margin-top: 0;
  font-family: "Courier New", Courier, monospace;
}
p.fancy {
  font-family: "Hermes Sans","Courier New", Courier, monospace;
}

.clear { clear: both; }
.hr { width: 100%; clear: both; }
ul.list {
  list-style: none;
  display: inline;
  margin: 0;
  padding: 0;
}
a:link, a:visited, a:active { color: blue; }
a.plainLink { color: inherit; text-decoration: none; }
.blue { color: #0A55CC !important; }
.small { font-size: 11px !important; }
.underline { text-decoration: underline; }
.inline { display: inline; }
.courier {
  font-family: "Courier New", Courier, monospace;
  line-height: 1;
}

/***** BUTTONS and such *****/
.button {
  cursor: pointer;
}
.button.close {
  width: 17px;
  height: 16px;
  background: url(/static/img/button-close.png) center no-repeat;
}
.button.leftArrow {
  width: 15px;
  height: 15px;
  background: url(/static/img/arrow1-left.png) center no-repeat;
  display: inline-block;
}
.button.rightArrow {
  width: 15px;
  height: 15px;
  background: url(/static/img/arrow1-right.png) center no-repeat;
  display: inline-block;
}
.light .button.leftArrow {
  background-image: url(/static/img/arrow1-left-light.png);
}
.light .button.rightArrow {
  background-image: url(/static/img/arrow1-right-light.png);
}
.button.leftArrow.disabled {
  cursor: default;
  background-image: url(/static/img/arrow1-left-light.png);
}
.button.rightArrow.disabled {
  cursor: default;
  background-image: url(/static/img/arrow1-right-light.png);
}

.dragging {
  /*box-shadow: 1px 1px 5px #666;*/
}

/***** MAIN stuff *****/
#container {
  width: 940px;/*980px;*/
  background-color: white;
  margin: 59px auto 0;
  padding: 8px 20px;/*8px 18px;*/
  position: relative;
}
#bottomToTop { text-align: right; margin-top: 25px; }
#footer {
  width: 940px;/*980px;*/
  margin: 0 auto 120px;
  padding: 8px 20px;
  font-size: 12px;
}
#footer a {
  color: black;
  text-decoration: none;
}
#footerLeft  { float: left; }
#footerRight { float: right; }
#header {
  width: 100%;
}
#header a {
  color: black;
  font-size: 11px;
  text-decoration: none;
}
#header ul li {
  float: left;
}
#headerLeft {
  float: left;
  clear: both;
}
#headerRight {
  float: right;
}
#headerLeft  li { padding-right: 20px; }
#headerRight li { padding-left:  20px; }
#header li a {
  border-bottom: 1px solid transparent;
}
#header li a:hover, #header li a.active {
  border-bottom-color: black;
}
#header li.gray-nav-link a {
  color: gray;
}
#header li.gray-nav-link a:hover {
  color: inherit;
}
#header #headerCoopSubnav li a {
  border-bottom-color: transparent;
}
#header #headerCoopSubnav li a#navStudio.active {
  border-bottom-color: #0a55cc;
}
#header #headerCoopSubnav li a#navWork.active {
  border-bottom-color: #bbb;
}
#logo, #logoCoop {
  margin: 15px 0 25px;
  position: absolute;
  z-index: 500; /* TODO Is this in danger of being covered by something else */
  cursor: pointer;
}
#logoCoop {
  display: none;
}
#container.modeCoop #logo { display: none; }
#container.modeCoop #logoCoop { display: block; }
#logoSpacer {
  margin: 15px 0 20px; /* provides real estate for the logo which is position:absolute */
}
#headerLeft li#coopLi {
  position: relative;
}
ul#headerCoopSubnav {
  display: none;
  position: absolute;
  top: 17px;
  left: 0px;
  width: 200px;
}
#headerCoopSubnav a {
  color: #0a55cc;
}
#headerCoopSubnav.linksGray a {
  color: #6b6b6b;
}
#container.modeCoop #headerCoopSubnav {
  display: inline;
}
#container.modeCoop #headerLeft .futurefarmersMode {
  /* This is the definition for inactive states for items during co-op mode */
  color: #ccc;
}

.notebook {
  background: url(/static/img/notebook.png) left center no-repeat;
  display: none;
  height: 6px;
  width: 100%;
}
.notebook.hr {
  /*margin: 23px 0 17px;*/
  padding-top: 30px;
}
#container.modeCoop .notebook {
  display: block;
}
#notebookTop {
  position: absolute;
  right: 17px;
  top: -5px;
  width: 740px;
}
.notebook.notebookBlack {
  background-image: url(/static/img/notebook-black.png);
}

.contentView {
  display: none;
  position: relative;
}

/***** SPLASH *****/
#sitemapSpacer {
  /* pushes the sitemap down in place of the splash, which is pos:abs */
  height: 585px;
}
#splashWrpr {
  position: absolute;
  top: 105px;
  left: 20px;
  z-index: 1;
}
#contentSitemap { position: relative; }
#showHideStickies {
  position: absolute;
  top: -20px;
  right: 0px;
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 20px;
  margin-right: 5px;
  cursor: pointer;
  font-size: 10px;
  /* showing: */
  background-image: url(/static/img/x.png);
}
/*#showHideStickies.showing {  }*/
#showHideStickies.hiding { background-image: url(/static/img/plus.png); }
#showHideStickies span { visibility: hidden; }
#showHideStickies:hover span { visibility: visible; }
#showHideStickies.hidden {
  /* this is a special case to hide this elem when showing #introCoop */
  visibility: hidden;
}
#splash { position: relative; }
#nextSplash, #prevSplash {
  position: absolute;
  top: 223px;
  /* make the clickable areas much bigger than the graphics */
  width: 100px;
  height: 60px;
}
#nextSplash { right: 0px; background-position: 80% center; }
#prevSplash { left:  0px; background-position: 20% center; }
#image_info {
  font-size: 12px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 100px;
  padding-top: 18px;
  background: url(/static/img/button-plus.png) left top no-repeat;
}
#image_info.enabled {
  background-image: url(/static/img/button-plus-gray.png);
}
#image_info_pop_up {
}
#image_info_triangle {
  background: url("/static/img/bubble-arrow-yellow.png") no-repeat center;
  height: 22px;
  width: 21px;
  position: absolute;
  top: 0px;
  left: -12px;
}
#splashSpacer { margin: 75px; }

/***** HOME IMAGE CAPTIONS *****/
.heroCaptionHeading {
  display: block;
  margin-bottom: 5px;
}
.heroCaptionBody {
  font-size: 14px;
  line-spacing: 0.3;
}
#image_info_pop_up .captionNote {
  font-size: 12px;
}
#image_info_pop_up .captionHeading {
  font-size: 18px;
  text-decoration: underline;
}
#image_info_pop_up .captionTitle {
  font-size: 18px;
}
#image_info_pop_up .captionBody {
  font-size: 12px;
  margin: 15px 0;
}
/***** end HOME IMAGE CAPTIONS *****/


/***** pages that are overlays on top of splash+sitemap *****/
#overlayPages {
  display: none;
  margin-bottom: 0;
}
#overlayPages.overlayPagesVisible {
  display: block;
  margin-bottom: 150px;
}
#overlayPages .page {
}

/***** CONTACT *****/
#contact {
  display: none;
  background-color: #EEEEEE;
  height: 36px;
  padding: 65px 25px 0;
  position: absolute;
  width: 845px;
  z-index: 1; /* TODO: reconcile with sticky note logic */
}
#contactAddr { float: left; }
#contactEmail {
  color: inherit;
  float: right;
  text-decoration: none;
}


/***** INTRO (header rollover) *****/
#intro {
  background-color: #ddd;
  display: none;
  left: 155px;
  padding: 50px 20px;
  position: absolute;
  top: 40px;
  width: 730px;
}
#intro .button.close {
  position: absolute;
  right: 10px;
  top: 10px;
}
#introCoop {
  background-color: #2E4ECA;
  color: white;
  display: none;
  height: 436px;
  left: 20px;
  padding: 17px 14px;
  position: absolute;
  top: 97px;
  width: 912px;
  z-index: 2;
}
#introCoop a {
  color: white;
  text-decoration: underline;
}

/***** ABOUT: #contentAbout *****/
.hr.tinyDot {
  height: 3px;
  background: url(/static/img/tinydot.png) center repeat-x;
}
#aboutIntro {
  width: 600px;
  display: inline-block;
  margin: 30px 0;
}
#aboutLinks {
  font-size: 12px;
  left: 338px;
  position: absolute;
  top: -40px;
}
#aboutLinks .separator {
  border-left: 1px solid #4345FC;
  border-right: 1px solid #8888FF;
  display: inline-block;
  height: 14px;
  margin-bottom: -3px;
  width: 0;
}
#aboutLinks a {
  display: inline-block;
  margin: 0 8px;
  text-decoration: none;
}
#aboutPeople {
  margin-left: 350px;
  margin-top: 25px;
}
.aboutHeading span { color: blue; text-decoration: underline; }
.aboutSubhead {
  text-decoration: underline;
  margin-top: 20px;
}
#aboutPeople .personLinks {
  display: inline-block;
  margin-top: 20px;
}
#aboutPeople .personLinks a {
  color: inherit;
}
#aboutWorkshop {
  margin-right: 550px;
  margin-top: 100px;
  position: relative;
}
#workshopLinks {
  position: absolute;
  right: -300px;
  bottom: 10px;
}
#workshopLinks .fellowshipBox {
  width: 200px;
  font-size: 12px;
  margin: 10px;
  padding: 10px;
}


/***** NEWS: #contentNews *****/
.dashHr {
  height: 10px;
  margin: 10px 0 10px -5px;
  background: url(/static/img/yellow-dash.png) left center repeat-x;
}
#overlayPages #contentNews {
  background-color: white;
}
#overlayPages #contentNews.page {
  padding-left: 150px;
  width: 760px;
  padding-bottom: 100px;
  padding-right: 0;
}
#newsHeader {
  margin-bottom: 40px;
  margin-left: -10px;
  font-size: 36px;
  font-family: "Hermes Sans", "Courier New", Courier, monospace;
  color: #000;
}
.news_top { height: 15px; } /* not sure why this is needed */
#newsItems {
  margin-left: 162px;
  margin-top: 27px;
}
#newsSection {
  background-color: #FFF774;
  margin-top: -70px;
  padding-left: 30px;
  padding-right: 15px;
}
.newsItem a {
  color: black;
  text-decoration: underline;
}
.newsItem {
  position: relative;
}
.newsTitle {
  text-decoration: underline;
}
.newsBullet {
  display: none; /* don't want these anymore */
  position: absolute;
  top: 5px;
  left: -25px;
  width: 12px;
  height: 10px;
  overflow: hidden;
  background: url(/static/img/leaf.png) center no-repeat;
}
.newsDescr {
  margin-top: 20px;
  font-size: 12px;
}

/***** SITEMAP *****/
#sitemapControls {
  margin-bottom: 15px;
}
#sitemapControls .smCtrlSection {
  float: left;
  width: 225px;
  padding-right: 10px;
}
#sitemapControls.showingText .smCtrlSection .showingImages {
  display: none;
}
#sitemapControls.showingImages .smCtrlSection .showingText {
  display: none;
}
#sitemapControls #sitemapHead {
  width: 220px;
  padding-left: 8px;
  padding-right: 0;
}
#sitemapControls h1, #sitemapControls h2 { margin: 0; }
#sitemapControls .sitemapOption {
  background-repeat: no-repeat;
  background-position: left 5px;
  margin-left: -20px;
  padding-left: 20px;
  cursor: pointer;
}
#sitemapControls .sitemapOption.selected {
  background-image: url(/static/img/x.png);
}
#sitemapControls.showingText   #sitemapFormatList { display: none; }
#sitemapControls.showingImages #sitemapFormatTns  { display: none; }
#sitemapControls .sitemapSort {
}
#sitemapControls #search {
  position: relative;
  border-bottom: 1px solid black;
  margin-top: 10px;
}
#sitemapControls #search input {
  border: none;
  outline: none;
  font-size: 12px;
  width: 215px;
}
#sitemapControls img#searchSubmit {
  bottom: 0px;
  position: absolute;
  right: 0;
  cursor: pointer;
}
#sitemapPosition {
  /* allows pos:abs on #sitemapList and #sitemapProjects to get a smoother animation */
  position: relative; 
  height: 1000px; /* <- needs to be updated programatically! */
}
.projectTnText {
  font-family: "GravurCondensed Regular", Gravur, "Courier New", Courier, monospace;
  font-size: 13pt;
  color: #858eff; /* approximate. actual mockup has layer at 48% opacity */
}
.projectTnText.active {
  color: #0012ff;
}
input.sitemapSearch {
  font-family: "GravurCondensed Regular", Gravur, "Hermes Sans", "Courier New", Courier, monospace;
  font-size: 12pt;
  color: black;
}
#sitemapList {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eef4f4;
  padding: 25px 10px 0;
  display: none;
  
  /*min-height: 750px;*/
  /* make sure the blue area isn't creeping on the content during search: */
  min-height: 300px;
}
#sitemapList .mainSection {
  font-family: "DidactGothic", "Hermes Sans", "Courier New", Courier, monospace;
  font-size: 14pt;
}
#sitemapList a {
  color: inherit;
  text-decoration: none;
}
#sitemapList a:hover {
  text-decoration: underline;
}
#sitemapList li {
  font-family: "DidactGothic", "Courier New", Courier, monospace;
  font-size: 12px;
}
#sitemapList .smHead, #sitemapList .smMeta {
  font-size: 16px;
  font-family: "Hermes Sans", "Courier New", Courier, monospace;
  text-transform: uppercase;
}
#sitemapList .smHead .lower {
  text-transform: none;
}
#sitemapList .smMeta {
  font-size: 14px;
}
#sitemapList .smSubHead {
  font-size: 14px;
  text-decoration: underline;
}
#sitemapList .menu_break {
  margin: 10px;
}
#sitemapList .column {
  float: left;
  padding-right: 8px;
  width: 225px;
}
#sitemapList #sitemapLinksMain {
  float: left;
  width: 220px;
  padding-right: 0;
}
#sitemapLinksProjects {
}
#sitemapLinksDesign {
}
#sitemapLinksArchive {
}
#sitemapList .column span.smHead {
  display: block;
  margin-bottom: 15px;
}



/***** PROJECT THUMBNAILS *****/
#sitemapProjects {
  /*position: relative;*/
  /*
     #sitemapPosition tries to improve the fade transition, 
     but needs abs here and a fixed height for itself... messy
     (pos:rel is needed for the project thumbnails) 
  */
  position: absolute;
  top: 0;
  left: 0;
  
  clear: both;
  display: block;
  
  /*min-height: 750px;*/
}
#sitemapProjects .arrow {
  position: absolute;
  bottom: -200px;
  width: 214px;
  height: 160px;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
}
#sitemapProjects .arrow.left {
  left: 10px;
  background-image: url("/static/img/projects-scroll-back.png")
}

#sitemapProjects .arrow.left.disabled {
  visibility: hidden;
}
#sitemapProjects .arrow.right {
  right: 14px;
  background-image: url("/static/img/projects-scroll-fwd.png")
}

#sitemapProjects .arrow.right.disabled {
  visibility: hidden;
}

.prjwrpr, .prjSpacer {
  /* .prjSpacer needed to fill out the project thumbnail area */
  display: inline-block;
  font-size: 12px;
  height: 250px;
  margin: 0 10px;
  overflow: hidden;
  width: 214px;
}
.prjwrpr {
  cursor: pointer;
  vertical-align: top;
  color: #6a84b1;
}
.prjwrpr:hover {
  color: #0012ff;
}

.prjwrpr img {
  /*
  opacity: 0.5;
  filter: url(/static/css/filters.svg#grayscale);
  filter: gray;
  -webkit-filter: grayscale(1);
  */
}
.prjwrpr:hover img {
  /*
  opacity: 1.0;
  filter: none;
  -webkit-filter: grayscale(0);
  */
}

.prjtn {
  position: relative;
  /*background-color: #d0dfff;*/
  height: 161px;
  overflow: hidden;
}
.prjTnLine {
  width: 100%;
  height: 5px;
  background-color: blue;
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
}
.prjwrpr:hover .prjTnLine {
  display: block;
}

/***** PROJECT VIEW *****/
#contentProject {
}
a.linkBox {
  background-color: #fcff99;
  font-family: "Courier New", Courier, monospace;
  text-decoration: underline;
  display: inline-block;
  padding: 20px;
  color: inherit;
  text-transform: uppercase;
  /*width: 170px;*/
  font-size: 14px;
  margin-bottom: 15px;
}
a.linkBox:hover {
  text-decoration: underline !important;
  color: inherit !important;
  background-color: #e2c7ba/* !important*/;
}
#container.modeCoop #contentProject a.linkBox {
  background-color: white;
}
#container.modeCoop #contentProject a.linkBox:hover {
  background-color: white;
}
#contentProject .projectInfo a {
  color: inherit;
  text-decoration: underline;
}
#contentProject .projectInfo a.more, 
#contentProject .projectInfo a:hover {
  color: #003DFF;
  text-decoration: none;
}
#contentProject .projectInfo {
  float: left;
  /*text-align: justify;*/
  width: 440px;
  line-height: 1.4;
  font-size: 13px;
}
.projectInfo .projectHeading {
  min-height: 75px;
  padding-right: 15px;
}
.projectInfo .projectTitle {
  font-size: 24px;
  display: inline;
}
.projectInfo .projectYear {
  display: inline;
  font-size: 24px;
  clear: both;
}
.projectInfo .projectDescription {
  margin-bottom: 20px;
  clear: both;
  padding-right: 15px;
}

.projectInfo .projectMetadata.left {
  float: left;
  width: 220px;
  padding-right: 10px;
}
.projectInfo .projectMetadata.right {
  float: right;
  width: 195px;
  padding-right: 10px;
}
.projectInfo .projectMetadata .infoSection {
  display: inline-block; /* keeps empty divs from using their margin */
  min-width: 150px;      /* ensures a line break after this section  */
  margin-bottom: 20px;
}
.projectInfo .projectArtists {
}
.projectInfo .projectDimensions {
}
.projectInfo .projectMedia {
}
.projectInfo .projectPress {
}
.projectInfo .projectExhibitions {
}
.projectInfo .projectAwards {
}
.projectInfo .projectCollections {
}

#contentProject .projectNav {
  float: right;
  width: 500px;
  font-size: 10px;
  text-align: right;
  margin-bottom: 10px;
}
#contentProject .projectNav div.button {
  margin-bottom: -3px;
}
#contentProject .projectNav span {
  margin: 0 10px;
  text-transform: uppercase;
  cursor: pointer;
}
#contentProject .projectNav .disabled {
  color: #939393;
  cursor: default;
}
#contentProject .projectImages {
  float: right;
  width: 500px;
  clear: right;
}
#contentProject .projectImages img.imgfull {
  width: 500px;
}
#contentProject .projectImage {
  position: relative;
  padding-bottom: 10px;
}
#contentProject .projectImage .projectImageCaption {
  background-color: #FCFF99;
  display: none;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  left: -20px;
  max-width: 90%;
  padding: 5px;
  position: absolute;
  top: 20px;
}
#contentProject .projectImage:hover .projectImageCaption {
  display: block;
}



/*** CO-OP ***/
#contentDesign p {
  font-family: "Hermes Sans","Courier New", Courier, monospace;
}
#studioHero {
  position: relative;
}
#studioHeroCaption {
  position: absolute;
  top: 15px;
  left: 14px;
  background-color: #0a55cb;
  padding: 18px 45px 18px 18px;
  color: white;
  max-width: 218px;
}
#studioHeroCaptionClose {
  width: 11px;
  height: 12px;
  position: absolute;
  right: 9px;
  top: 7px;
  background: url(/static/img/x-clear-white.png) center no-repeat;
  cursor: pointer;
}
#studioIntro {
  width: 410px;
}
.columnLeft, .columnRight {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.columnLeft {
  margin-left: 10px;
  margin-right: 65px;
  width: 455px;
}
.columnRight {
  width: 395px;
}
.studioHeading { text-decoration: underline; }
.studioSubhead {
  color: #0A55CC;
  margin-top: 20px;
}
#studioPeople .personLinks {
  display: inline-block;
  margin-top: 20px;
}
#studioPeople .personLinks a {
  color: inherit;
}