/* Anchors that link to l2 elements get special classes - the order the classes are specified is the same as listed here */

/** Each anchor (or img if no anchor) gets a class base don the function used for rendering. This is usually the easiest class to override */
.l2-function-default {
}
.l2-function-node {
}
.l2-function-attachment {
}
/* Usually an image */
.l2-function-inline {
}
/* Overlay : contents may be text or have an img */
.l2-function-overlay {
}
/* slideshow : contents may be text of an img */
.l2-function-slideshow {
}


/** Each link type can be themed, this is tricky since links can be the same for different functions */
/* A plain link */
a.l2-link-plain {
}
/* link to a node */
a.l2-link-node {
}
/* link to attachment */
a.l2-link-attachment {
}
/* link is to an overlay */
a.l2-link-overlay {
  text-align: center;
}
/* link contains an image */
a.l2-contains-image {
  padding: 1px;
  line-height: 110%;
}
a:hover.l2-contains-image {
}
a:hover.l2-link-overlay {
}
/* link is in a description within the overlay */
a.l2-link-description {
}

/* Only needed when captions are placed under images */
.l2-image-wrapper {
  line-height: 0;
  display: inline;
}
span.l2-image-caption {
  line-height: 120%;
}

/* Simple div matrix uses br to split rows */
.l2-slideshow-matrix-wrapper {
  /* This also centers matrix elements */
  text-align: center;
}
.l2-slideshow-matrix {
  line-height: 0;
}
.l2-slideshow-matrix table,
.l2-slideshow-matrix tbody {
  width: auto;
  border: none;
}
.l2-slideshow-matrix td {
  padding: 0;
}
.l2-slideshow-matrix td.l2-matrix-caption {
  padding-top: 5px;     /* compensate for the matrix hover effect */
}
.l2-slideshow-matrix a img {
/*
  filter: alpha(opacity=75);
  opacity: .75;
*/
}

.l2-slideshow-matrix a:hover img {
/*
  filter: alpha(opacity=100);
  opacity: 1;
*/
}

.l2-image-wrapper {
  text-align: center;
}

.l2-float-inline {
  display: inline;
  margin: 0 5px 0 5px;
}
.l2-float-left {
  float: left;
  margin: 0 5px 5px 0;
}
.l2-float-right {
  float: right;
  margin: 0 0 5px 5px;
}


/** Simple animation for images and overlay images: note how padding/margins are used so the animation does not cause text to reflow  **/
a.l2-function-inline {
  padding: 2px;
}
a:hover.l2-function-inline {
}

/* This is not perfect since any overlay size will get this effect, to avoid use thumbnail (for most cases) */
a.l2-size-overlay img {
  margin: 2px;
  width: 64px;
  height: 64px;
}

a:hover.l2-size-overlay img {
  margin: 0px;
  width: 68px;
  height: 68px;
}

/** Fancybox sometimes makes title element too wide, set to auto instead of 100% **/
#fancy_title table {
  width: auto;
}
/** Add a center option to title in case table is made non-auto  - make weight higher neough to override core CSS **/
#fancy_title #fancy_title_main div {
  text-align: center;
}

/*
 nice idea but very dependent on sizes - including wrapping div - making it very inflexible for a gernal purpose CMS

.l2-play {
  display: inline;
}
.l2-play-icon {
  display: none;
}
a:hover.l2-function-slideshow,
a:hover.l2-function-overlay {
  position: relative;
}
a:hover.l2-function-slideshow img.l2-play-icon,
a:hover.l2-function-overlay img.l2-play-icon {
  display: block;
  position: absolute;
  top: -38px;
  left: 19px;
  width: 32px;
  height: 32px;

  filter: alpha(opacity=75);
  opacity: .75;
}
*/

/* mangifier icon */
span.l2-overlay-magnify {
  display: block;
  position: relative; 
  width: 100%;          /* as wide as the container */
  background: url(magnify.gif) no-repeat bottom right;    /* this auto places the overlay to the right */
  height: 20px;         /* Height of overlay */
  bottom: 24px;         /* Position from bottom, + a few pixels for looks */
}

/* video icon */
span.l2-overlay-play {
  display: block;
  position: relative; 
  width: 100%;          /* as wide as the container */
  background: url(play.gif) no-repeat bottom right;    /* this auto places the overlay to the right */
  height: 20px;         /* Height of overlay */
  bottom: 24px;         /* Position from bottom, + a few pixels for looks */
}

/** Outline **/
div.l2-menu-outline {
  text-align: left;
}

/** user settings should go in a separate file or appended here (not recommended) */