iSpot: Example styles for iSpot embeds. Copyright 2012 The Open University | http://ispot.org.uk

ispot-embed.css

/*
 * Example styles for iSpot embeds.
 * Copyright 2012 The Open University.
 */

/* HTML page styles.
*/
body{
  font:.8em sans-serif;
  background:#fcfcfc;
  color:#222;
  margin:2em;
}
a img{ border:none; }


/* General iSpot-embed stuff.
*/
.ispot.embed-rsp{
  border:1px solid #bbb;
  border-radius:5px;
  margin:2em;
}
.ispot.embed-rsp .obs-teaser{ margin:5px; }
.ispot.embed-rsp .pager,
.ispot.embed-rsp .taxonomy-term-description,
.ispot.embed-rsp .node-container,
.ispot.embed-rsp tt
  { display:none; }

/* iSpot node and list embeds.
*/
.ispot.embed-rsp.node,
.ispot.embed-rsp.list { /*Spec target: 5 items, 210 x 570 px*/
  width:240px;
  max-height:700px;
  overflow-x:hidden;
  overflow-y:auto;
}
.ispot.embed-rsp.list h3{font-size:1em; margin:0;}
.ispot.embed-rsp.list .observation-images img,
.ispot.embed-rsp.node .observation-images img {
  width:100px;
  height:100px;
  float:left;
  border-radius:3px;
}
.ispot.embed-rsp h3, .ispot.embed-rsp .teaser-info-line, .ispot.embed-rsp .geolocation{ float:right; }
.ispot.embed-rsp .teaser-info-line { clear:right; }
.ispot.embed-rsp .obs-teaser,
.ispot.embed-rsp .logo,
.ispot.embed-rsp a.more{
  display:block; clear:both;
}
.ispot.embed-rsp a.more{ text-align:right; margin:4px 2px; }

.ispot.embed-rsp .teaser-info-line,
.ispot.embed-rsp .teaser-info-line strong
   { display:none; }
.ispot.embed-rsp .teaser-info-line.by,
.ispot.embed-rsp .teaser-info-line.dt-obs
   { display:block; }
.ispot.embed-rsp .teaser-info-line.by strong {display:inline;}


/* Horizontal lists.
*/
.ispot-horizontal .embed-rsp.list{
  border:none;
  width:800px;
  height:200px;
  overflow-y:hidden;
}
.ispot-horizontal .embed-rsp.list .in1{
  border:1px solid #bbb;
  border-radius:5px;
  width:650px;
  overflow-x:auto;
}
.ispot-horizontal .embed-rsp.list .in2{
  width:1100px;
  overflow-y:hidden;
}
.ispot-horizontal .embed-rsp.list .obs-teaser{
  width:210px;
  float:left;
  clear:none;

}
.ispot-horizontal .logo, .ispot-horizontal .more{
  float:right;
  position:relative;
  top:-100px;
}


/** Experimental hover effect.
*/
.ispot-hover .obs-teaser{
  margin:2px;
  padding:2px;
  border:2px solid transparent;
  border-radius:4px;
}
.ispot-hover .obs-teaser:hover{
  border:2px solid #bbb;
  background:#ffd;

  transition:all 1s;
  -moz-transition:all 1s; /* Firefox 4 */
  -webkit-transition:all 1s; /* Safari and Chrome */
  -o-transition:all 1s; /* Opera */
}


/* iSpot map embeds.
*/
.ispot.embed-rsp.map{ width:570px; height:585px; }
.ispot.embed-rsp.map iframe{ width:100%;  /*OR: width:300px; height:300px;*/ }
.ispot.embed-rsp.map .logo{ position:relative; top:-24px; width:135px; }