Contextual Related Posts styles

crp-vertical.css

/* Vertical Related Posts */

/* The full list */
.crp_related ul li {
list-style-type:none;
/* float:left; */
margin:0 40px 0 0;
width: 230px;
}

/* Each related posts area */
.crp_related ul li a {
display: block;
/* font-weight: bold; */
word-wrap: break-word;
padding: 20px 20px 10px 10px;
float: left;
background: #f7f4f4;
border: #ccc 2px solid;
border-radius: 9px;
width: 220px;
margin: 5px 0 10px 0;
text-decoration: none;
}

/* What happens when the mouse is moved over title and image area. */
.crp_related ul li a:hover {
border: #8e8888 2px solid;
background: #ece9e9;
}

/* The related posts image */
.crp_related ul li img {
margin:0 15px;
}

text-below-thumbs.css

/* Related Posts with text below thumbnails */

.crp_related {
clear: both;
}
.crp_related h3 {
margin: 0 !important;
}
.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
.crp_related li, .crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: center;
}
.crp_related li {
margin: 5px !important;
/*next line is border box around image and title– comment out to remove*/
border: 1px solid #ccc;
padding: 4px;
}
.crp_related li:hover {
/*next line is color of hover over background*/
background: #ccc;
border-color: #bbb;
}
.crp_related a {
width: 125px;
height: 140px;
text-decoration: none;
}
.crp_related a:hover {
text-decoration: none;
}
.crp_related img {
max-width: 125px;
margin: auto;
}

/*below is text for pic titles*/
.crp_related .crp_title {
position: absolute;
display: block;
height: 30px;
bottom: 2px;
left: 0px;
padding: 0px;
width: 125px; /* = 150px – (3px * 2) */
color: #fff;
font-size: 14px;
line-height: 15px;
text-align: center;
text-shadow: #000 .1em .1em .2em;
background: rgb(0.5, 0.5, 0.5);
background: rgba(0, 0, 0, 0.5);
}
.crp_related li:hover .crp_title {
background: rgb(0.2, 0.2, 0.2);
background: rgba(0, 0, 0, 0.8);
}

.crp_related .crp_thumb, .crp_related li, .crp_related .crp_title {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.crp_clear {
clear: both;
}