@charset "utf-8";
/* CSS Document */

#main p {
  text-align: justify;
}
#main a {
  font-weight: bold;
}
#main p a:hover {
  background: #666;
}
#main div.opening {
  width: 100%;
  max-width: 425px;/* the size of the image */
}
#main div.openingImg {
  width: 100%;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
#main div.openingImg a {
  display: block;
  width: 100%;
  padding: 5px;
  border: 2px solid #666;
}
#main div.openingImg a:hover {
  border: 2px solid #ffc;
}
#main div.openingImg img {
  width: 100%;
}
#main div.tech {
  width: 100%;
  padding: 6px;
  margin-bottom: 2em;
  border: 1px solid #666;
  background: #999;
}
#main div.tech p {
  color: #fff;
  font-size: 1.1em;
}
#main div.testimonial  {
  padding: 1.5em 0;
  margin-top: 2em;
  border: 2px dotted #666;
  border-left: none;
  border-right: none;
}
#main div.testimonial  blockquote {
  font-size: 1em;
  font-style: italic;
  padding-left: 23px;
  background: url(/imgs/portfolio/quotUL.gif) left top no-repeat;
}
#main div.testimonial  blockquote span {
  padding-right: 23px;
  background: url(/imgs/portfolio/quotBR.gif) right bottom no-repeat;
}
#main p.speaker {
  font-size: 1em;
  position: relative;
  left: 35%;
  top: 0.5em;
}
#previews div.piece {
  margin-bottom: 2.5em;
  width: 210px;/* added this with carousel, not necessary but nice to have */
}
#previews div.lastPiece {
  margin-bottom: 0;
}
#previews div.piece div {
  position: relative;
  margin-bottom: 2.5em;
}
#previews div.piece p.date {
  position: absolute;
  left: 2.4em;
  top: 1.4em;
  color: #690;
  font-style: italic;
}
#previews div.piece a img {
  padding: 4px;
  border: solid 1px #996;
  border-right: solid 1px #663;
  border-bottom: solid 1px #663;
}
#previews div.piece a:hover img {
  border: 1px solid #ffc;
}
#previews div.piece a + p {
  font-size: 1.0em;
  position: relative;
  top: -3px;/* to offset the transparent border */
}
/************************************************************** carousel styles ***************************************/
#previews .scrollable {
  position: relative;/*leave this value alone*/
  width: 216px;
  height: 358px;
  overflow: hidden;
}
#previews .scrollable .items{
  position: absolute; /*leave this value alone*/
  width: 2000em;/* !!!! this needs to be very large, or all items will not be displayed */
}
#previews .scrollable .panel{
  float: left; /*leave this value alone*/
  /*overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
  width: 210px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
  padding: 3px;
  margin-right: 5px;
}
a.next, a.prev {
  display: block;
  float: left;
  width: 19px;
  height: 19px;
  cursor: pointer;
  background: url(/imgs/portfolio/right.gif) no-repeat;
  margin-top: 25px;
}
a.prev {
  background: url(/imgs/portfolio/left.gif) no-repeat;
  margin-right: 40px;
  margin-left: 70px;
}
a.next {
}
a.prev:hover, a.next:hover {
	background-position:0px -18px;		
}