@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.cooking { background-image: url(bgrds/lasagna-cut.png); text-decoration: none;}
span.flop a.baking { background-image: url(bgrds/cookie-cut.png); text-decoration: none;}
span.flop a.rugs { background-image: url(bgrds/canvas-cut.png); text-decoration: none;}
span.flop a.snowman { background-image: url(bgrds/snowman-cut.png); text-decoration: none;}
span.flop a.card { background-image: url(bgrds/card-cut.png); text-decoration: none;}
span.flop a.album { background-image: url(bgrds/season-cut.png); text-decoration: none;}
span.flop a.box { background-image: url(bgrds/box-cut.png); text-decoration: none;}
span.flop a.braid-rug { background-image: url(bgrds/rug-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;
}