@charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Droid+Sans); /* sheet = 1 */ H1, H2, H3 {text-align: center; font-family:'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; padding: 2px;} P {font: normal 1em 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; } .norm {font: normal .9em 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#bbbbbb;} .alto {font: normal .7em 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#bbbbbb;} .malto {font: normal .7em 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#bbbbbb;} .enlarge {font: 1.0em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#888888; padding: 2px;} .een {font: 1.1em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#880044;} .eens {font: 1.0em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#660033;} .twee {font: 1em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#888888;} .drie {font: 2.4em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#bbbbbb;} .vier {font: 2.4em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#660033;} .vijf {font: normal .7em 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; } .vijft{font: normal .6em 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; } .zes {font: 1.1em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; color:#666666;} .zev {font: .8em/120% 'Droid Sans','Liberation Sans','DejaVu Sans', Helvetica, Arial, Verdana, Sans-serif; ;} .subt {font-size: .9em; color:#888888;} .subt2{color:#888888 ;} frame {background-color: #dddcdc } HR {color:#bbbbbb ;} IMG {border: 0;} .alto img{ /*give the thumbnails a frame*/ background-color:#660033; /*frame colour*/ padding: 2px; /*frame size*/ /*add a drop shadow to the frame*/ -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); /*and give the corners a small curve*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /*BODY {background: #dddcdc url(url(/aileen_bannatyne/treeinv3b.jpg)) no-repeat center 10%; background-size:100%} */ /*BODY#pattern {background: url(url(/aileen_bannatyne/treeinv3b.jpg));}*/ A {text-decoration:none ;} A:link {color:#666666 ;} A:visited {color:#666666 ;} A:hover {color:#660033 ;} A:active {color:#666666 ;} /** from http://cssdemos.tupence.co.uk/image-popup.htm **/ /** div.thumbs{ position: relative; z-index:0; } */ /***Step 1 style the unordered list with the class 'enlarge'***/ ul.enlarge{ list-style-type:none; /*remove the bullet point*/ } ul.enlarge li{ list-style-type:none; /*remove the bullet point in ie*/ display:inline-block; /*places the images in a line*/ zoom:1; /* ie-hack from http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */ *display:inline; position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */ z-index: 1; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/ margin:20px 15px 20px 15px; /*space between the images*/ } /***Step 2 In the HTML in step one we placed the large image inside a , now we move it off the page until it's required***/ ul.enlarge li span{ position:absolute; /*see support section for more info on positioning*/ left: -9999px; /*moves the span off the page, effectively hidding it from view*/ } /***Step 3 Note: This styling will apply to both the thumbnail and popup image, unless you override these styles in step five***/ ul.enlarge li img{ /*give the thumbnails a frame*/ background-color:#660033; /*frame colour*/ padding: 2px; /*frame size*/ /*add a drop shadow to the frame*/ -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); /*and give the corners a small curve*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ul.enlarge li:hover{ z-index: 500; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/ /*cursor:pointer; changes the cursor to a hand*/ } ul.enlarge li:hover span{ /* positions the when the
  • (which contains the thumbnail) is hovered back onto the page by reducing left from -9999px */ top: -40px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ left: -200px; /*distance from the left of the thumbnail to the left of the popup image*/ } /***Override the styling of images set in step 3 to make the frame smaller and the background darker***/ ul.enlarge li span img{ padding: 2px; /*size of the frame*/ background: #660033; /*colour of the frame*/ } /***Step5 style the containing the framed images and the caption***/ ul.enlarge li span{ /**Style the frame**/ padding: 10px; /*size of the frame*/ background:#dddcdc; /*colour of the frame*/ /*add a drop shadow to the frame*/ -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75); -moz-box-shadow: 0 0 20px rgba(0,0,0, .75); box-shadow: 0 0 20px rgba(0,0,0, .75); /*give the corners a curve*/ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; /**Style the caption**/ text-align: center; }