#mosaic {position:absolute; top:12px; left:0; z-index:1;} /*position each div.thumb object according to its thumbnail location in mosaic*/ #mosaic .thumb {position:absolute; top:0px; left:0px;} #mosaic #a2, #mosaic #c2, #mosaic #f2, #mosaic #g2, #mosaic #j2, #mosaic #k2 {top:49px;} #mosaic #d2, #mosaic #e2 {top:69px;} #mosaic #b2, #mosaic #h2, #mosaic #i2 {top:89px;} #mosaic #g3 {top:118px; left:434px;} #mosaic #b1, #mosaic #b2 {left:89px;} #mosaic #c1, #mosaic #c2 {left:178px;} #mosaic #d1, #mosaic #d2 {left:227px;} #mosaic #e1 {left:296px;} #mosaic #e2 {left:316px;} #mosaic #f1, #mosaic #f2 {left:365px;} #mosaic #g2, #mosaic #g3 {left:434px;} #mosaic #g1 {left:454px;} #mosaic #h1, #mosaic #h2 {left:503px;} #mosaic #i2 {left:572px;} #mosaic #i1 {left:592px;} #mosaic #j1, #mosaic #j2 {left:641px;} #mosaic #k2 {left:710px;} #mosaic #k1 {left:730px;} /*a.viewport objects clip child spans containing mosaic sprite background (this is a workaround for dodgy browser support of background-position-x/y)*/ #mosaic .viewport {position:absolute;overflow:hidden;outline:none;} /*clip nested span.sprite using width/height of parent a.viewport */ #mosaic .s4x4 a.viewport {width:40px;height:40px;} #mosaic .s6x6 a.viewport {width:60px;height:60px;} #mosaic .s8x8 a.viewport {width:80px;height:80px;} #mosaic .h8x4 a.viewport {width:80px;height:40px;} #mosaic .h6x3 a.viewport {width:60px; height:30px;} #mosaic .v4x8 a.viewport {width:40px;height:80px;} #mosaic .v6x10 a.viewport {width:60px; height:100px;} #mosaic .v6x71 a.viewport {width:60px; height:100px;} /*span.sprite objects hold mosaic background; positioned to thumbnails */ #mosaic .sprite {position:absolute;top:0px;left:0px;width:770px;height:150px; background:url(images/FromScratch-Mosaic-022218.jpg) 0 0 no-repeat;} /*position span.sprite objects by reversing x/y value of parent div.thumb (lines 3-37 above)*/ #mosaic #a2 span.sprite, #mosaic #c2 span.sprite, #mosaic #f2 span.sprite, #mosaic #g2 span.sprite, #mosaic #j2 span.sprite, #mosaic #k2 span.sprite {top:-49px;} #mosaic #d2 span.sprite, #mosaic #e2 span.sprite {top:-69px;} #mosaic #b2 span.sprite, #mosaic #h2 span.sprite, #mosaic #i2 span.sprite {top:-89px;} #mosaic #g3 span.sprite {top:-118px; left:-434px;} #mosaic #b1 span.sprite, #mosaic #b2 span.sprite {left:-89px;} #mosaic #c1 span.sprite, #mosaic #c2 span.sprite {left:-178px;} #mosaic #d1 span.sprite, #mosaic #d2 span.sprite {left:-227px;} #mosaic #e1 span.sprite {left:-296px;} #mosaic #e2 span.sprite {left:-316px;} #mosaic #f1 span.sprite, #mosaic #f2 span.sprite {left:-365px;} #mosaic #g2 span.sprite, #mosaic #g3 span.sprite {left:-434px;} #mosaic #g1 span.sprite {left:-454px;} #mosaic #h1 span.sprite, #mosaic #h2 span.sprite {left:-503px;} #mosaic #i2 span.sprite {left:-572px;} #mosaic #i1 span.sprite {left:-592px;} #mosaic #j1 span.sprite, #mosaic #j2 span.sprite {left:-641px;} #mosaic #k2 span.sprite {left:-710px;} #mosaic #k1 span.sprite {left:-730px;} /* tooltip styling. by default the element to be styled is .tooltip */ #mosaic .tooltip {display:none; font-size:12px; padding:15px; z-index:99; text-align:left; border:solid 2px #778791;position:absolute;top:30px !important;left:auto !important; background: rgb(231,245,246); /* Old browsers */ background: -moz-linear-gradient(top, rgba(231,245,246,1) 35%, rgba(57,73,85,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,rgba(231,245,246,1)), color-stop(100%,rgba(57,73,85,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(231,245,246,1) 35%,rgba(57,73,85,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(231,245,246,1) 35%,rgba(57,73,85,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(231,245,246,1) 35%,rgba(57,73,85,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(231,245,246,1) 35%,rgba(57,73,85,1) 100%); /* W3C */ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 0px 15px 20px 10px rgba(20, 20, 20, 0.7); -moz-box-shadow: 0px 15px 20px 10px rgba(20, 20, 20, 0.7); box-shadow: 0px 15px 20px 10px rgba(20, 20, 20, 0.7); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } #mosaic .tooltip * { color:#051523; text-shadow:-1px -1px 0 #8ca6b5; text-decoration:none;} #mosaic .tooltip em {text-shadow:none !important;} #mosaic .tooltip h3 { font-size:30px; font-weight:700;} #mosaic .tooltip p, #mosaic .tooltip p a { font-size:16px; text-shadow:none; margin:0; padding:0; line-height:1;} #mosaic .tooltip a:hover { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;} #mosaic .tooltip p a{ white-space:nowrap; color:#fff;} #mosaic .tooltip img {display:block; border:none;height:130px;width:auto;margin-bottom:10px;border:solid 2px #c0cdd1;} #mosaic .tooltip h3:hover img {border-color:#051523; -webkit-box-shadow: 2px 2px 1px 0px rgba(15, 15, 15, .2); -moz-box-shadow: 2px 2px 1px 0px rgba(15, 15, 15, .2); box-shadow: 2px 2px 1px 0px rgba(15, 15, 15, .2); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;} #mosaic .tooltip h3:hover a { color:#051523 !important; text-shadow:2px 2px 1px rgba(15, 15, 15, 0.2); /*text-shadow:1px 1px 0 #a6bfce;*/ -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } #b1 .tooltip, #b2 .tooltip {left:-10px !important;} #c1 .tooltip, #c2 .tooltip {left:-20px !important;} #d1 .tooltip, #d2 .tooltip {left:-30px !important;} #e1 .tooltip, #e2 .tooltip {left:-40px !important;} #f1 .tooltip, #f2 .tooltip {left:-50px !important;} #g1 .tooltip, #g2 .tooltip, #g3 .tooltip {left:-60px !important;} #h1 .tooltip, #h2 .tooltip {left:-70px !important;} #i1 .tooltip, #i2 .tooltip {left:-80px !important;} #j1 .tooltip, #j2 .tooltip {left:-90px !important;} #k1 .tooltip, #k2 .tooltip {left:-100px !important;}