@import "/css/main.css";

/*

 version 2 with support for lists

 */
ul.flops {
 width: 75%;
 margin:0;
}
p.flip,
li.flip {
 height: 84px;
 min-height: 84px;
 width: 75%;
}
li.flip {
 margin: 10px 0;
 padding: 0;
 text-align: left;
 list-style-type: none;
}
p.flip span,
p.flip span a,
li.flip span,
li.flip span a {
 width:80px;
 height:80px;
}
p.flip span,
li.flip span {
 float: left;
 margin-right: 1em;
 display: block;
 position: relative;
}
p.flip span a,
li.flip span a {
 background-color: transparent;
 background-repeat: no-repeat;
 background-position: 0% 100%;
 border: 2px solid #f2f1ed;
 position: absolute;
 z-index: 1000;
}
/*
 to center vertically
 duplicates (replaces) context rule when in use
 */
li.flip a.title {
 line-height: 80px;
 text-decoration: underline;
}

/*

 Use a#fragmentId or a.className.

 */


span.flop a.ceramics { background-image: url(bgrds/ceramic-cut.png); text-decoration: none;}
span.flop a.centerpiece { background-image: url(bgrds/centerpiece-cut.png); text-decoration: none;}
span.flop a.rug { background-image: url(bgrds/wolf-cut.png); text-decoration: none;}
span.flop a.frame { background-image: url(bgrds/frame-cut.png); text-decoration: none;}
span.flop a.painted-rock { background-image: url(bgrds/rock-cut.png); text-decoration: none;}
span.flop a.tole { background-image: url(bgrds/bunny-cut.png); text-decoration: none;}
span.flop a.painting { background-image: url(bgrds/paintcut.png); text-decoration: none;}
span.flop a.sewing { background-image: url(bgrds/artcut.png); text-decoration: none;}
span.flop a.misc { background-image: url(bgrds/sunflower-cut.png); text-decoration: none;}


/* ///////////////////////////////////////////////////////////////////

 leave this rule at bottom of list

 */

span.flop a:hover {
 text-decoration:none;
 background-position:0% 0%!important;
 border:2px dotted #963;
}