/* Copyright (c) Gary Swift, Design Matrix, 2012. All rights reserved.
   http://www.designmatrix.com
*/

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000000;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

#homepagelink a {
  float: left;
  color: #FFAA00; /* red orange */
  /* With #access ul font-size: 13px, line-height: 2.0em would be 26px. */
  font-size: 26px;
  line-height: 1.5em;
  /* Override padding for "#access a" in toshea/style.css */
  padding: 0;
  white-space: nowrap;
}

#homepagelink a:hover {
  background: transparent;
  color: #FFCC00; /* gold */
}

.clear {
  clear: both;
}

.article, #footer {
  clear: both;
  width: 90%;
  /* Line up with toshea/style.css left and right margins.  */
  margin: auto 7.6%;
}

#breadcrumb {
  /* Put breadcrumb right under the title. */
  clear: both;
  float: left;
  /* MSIE works better with % than em, e.g., 200% than 2em. */
  font-size: 125%;
  /* Important for home page header to be same height as on slideshows. */
  padding-bottom: 3px;
  white-space: nowrap;
  width: 25%;
  /* Avoid the headerblurb from colliding with the right edge of breadcrumb. */
  padding-right: 1em;
}

#headerblurb {
  /* Important for home page header to be same height as on slideshows. */
  padding-bottom: 3px;
  font-size: 125%;
  /* So it tucks under the #breadcrumb with narrow windows. */
  float: left;
}

/* The order of the breadcrumb and headerblurb are reversed on the home page. */
#homepage #breadcrumb {
  clear: none;
  /* The following float and display are important to prevent breadcrumb from
     tucking under headerblurb on narrow screens.
  */
  float: none;
  display: inline-block;
  padding-right: 0;
  font-size: 100%;
  /* Needed by webkit browsers to prevent tucking under on narrow screens. */
  width: auto;
}

#homepage #headerblurb {
  clear: both;
  padding-right: 1em;
}

#teaser {
  font-size: 80%;
  white-space: nowrap;
  clear: both;
}

/* Avoid nested left margins from #access div. */
#access div #breadcrumb, #access div #headerblurb {
  margin: 0;
}

/* For Home Page */
/*
body#homepage {
  color: #EEEEE5;
  background-image: url('images/artworks/black_square_1978_1.jpg');
  background-repeat: no-repeat;
}
*/

#homepage #breadcrumb, #homepage #headerblurb, #homepage #footer {
  color: #EEEEE5;
}

#homepage #page {
  background: transparent;
}

/* Probably should be in themes/toshea/style.css */
#homepage #access {
  background: transparent;
}

#collage {
  clear: both;
  /* The image scale percentages will be relative to this. */
  height: 700px;
  /* So the images are positioned relative to this div. */
  position: relative !important;
  margin: auto;
  /* Override margin: 0 7.6% in .article and somewhere from toshea/style.css
     which Safari picks up even on desktops.
  */
  margin-left: -7.6%;
  background: transparent;
}

#collage div {
  /* Put the image label on a black background instead of neighboring image. */
  background: #000000;
}

/* Set the collage image div's width to the width of the image for the label.
   Convert the image width to a percentage so that they scale with the
   browser width.
*/
#exhibit {
  position: absolute;
  top: 12.5%;
  /* Puts it right on the left edge of the page. */
  left: -4px;
  /* Image width: 709px */
  width: 70.9%;
}

#painting {
  position: absolute;
  /* Puts it right on the right edge of the page. */
  left: 52.5%;
  top: 17.5%;
  /* Image width: 500px */
  width: 50%;
}

#tand {
  position: absolute;
  left: 30%;
  top: 5%;
  /* Image width: 600px */
  width: 60%;
}

#pill {
  position: absolute;
  left: 19%;
  top: 30%;
  /* Image width: 600px */
  width: 60%;
}

#blackcast {
  position: absolute;
  left: 9.5%;
  top: 6.5%;
  /* Image width: 500px */
  width: 50%;
}

#transcast {
  position: absolute; 
  left: 17.5%;
  /* Puts it right on the bottom edge of the navigation header. */
  top: -6px;
  /* Image width: 504px */
  width: 50.4%
}

.piclinks {
  color: #70D3F2; /* pill blue */
}

/* Get rid of image link borders on MSIE.
   If the <img> tag has class piclinks this works:
	 a img.piclinks {
	 If the <a> tag has class piclinks this works:
	 a.piclinks img  {
	 If the <div> tag has class piclinks this works:
	 .piclinks a img  {
*/
.piclinks a img  {
  border: none;
  /* This resizes the collage images to 100% of the containing div. */
  width: 100%;
  /* Lines up labels when the images are scaled for handheld devices. */
  display: block;
}

/* Gets rid of "focus rectangle" red dotted outline on Firefox.
.piclinks a:focus {
  outline: 0;
}
*/

#menuspacer {
  /* Align bottom #topmenu links with bottom #homepagelink. */
  height: .9em;
  /* This will cause it to tuck under the title. 
     float: left;
  */
}

/* Too much space on MSIE 6, but you can't adjust the height below the
   font size.  Setting font-size to the desired height doesn't work. 
   Best workaround for this bug is overflow: hidden;
*/
* html #menuspacer {
  /*
  font-size: .9em;
  */
  overflow: hidden;
}

#topmenu {
  /* Make the whole menu tuck under the title as a block. */
  float: left;
}

#topmenu a {
  color: #FFAA00;
  /* With #menuspacer div to pad above #topmenu, we don't need this which
     causes too much vertical space when menu links tuck under the title.
     padding-top: .9em;
  */
  font-weight: bold;
}

@media only screen and (max-width: 450px) {
  #breadcrumb, #headerblurb {
    font-size: 100%;
  }
  #collage div {
    font-size: 100%;
  }
}