Thumbnail arrows not lining up
I'm sure that in my css edits I messed this up, but I am in need of help to fix it. Please look at:
index.php?_a=document&doc_id=5
Here's the common.css for the gallery:
/* body background
--------------------------------------------------*/
body.pg {
background-color: #FFFFFF;
}
/* wrapper
--------------------------------------------------*/
.pg-rfl {
width: 600px;
font-family: Arial, Helvetica, sans-serif;
}
/* navigation links
--------------------------------------------------*/
.pg-rfl .nav {
width: 600px;
margin: 0 auto;
padding-bottom: 8px;
text-align: right;
}
.pg-rfl .nav a {
background-color: #000;
color: #FFFFFF;
padding: 3px 7px;
font-size: 12px;
line-height: 12px;
text-decoration: none;
outline: none;
}
.pg-rfl .nav a:hover {
background-color: #FFFFFF;
color: #613719;
}
/* fullsize image
--------------------------------------------------*/
.pg-rfl .fullsize {
width: 600px;
height: 481px;
padding: 10px;
background-color: #FFFFFF;
margin: 0 auto;
border: solid 1px #613719;
border-bottom: none;
}
.pg-rfl .fullsize img {
position: absolute;
display: none;
border: none;
}
.pg-rfl .fullsize .fullsize-enlarge {
background-image: url(../images/enlarge.png);
background-repeat: no-repeat;
background-position: 50% 50%;
width: 600px;
height: 481px;
position: absolute;
z-index: 100;
cursor: pointer;
display: none;
}
.pg-rfl .fullsize .loader {
position: absolute;
text-align: center;
color: #474747;
font-size: 20px;
width: 600px;
margin: 220px 0 0 0;
}
.pg-rfl .fullsize .loader img {
vertical-align: middle;
display: inline;
position: relative;
margin-right: 5px;
}
/* title, description
--------------------------------------------------*/
.pg-rfl .title {
width: 600px;
margin: 0 auto;
background-color: #dbdbdb;
padding: 10px;
border: solid 0px #000000;
border-top: none;
border-bottom: none;
}
.pg-rfl .title .fullsize-title {
color: #000000;
font-weight: bold;
font-size: 12px;
}
.pg-rfl .title .fullsize-description {
color: #000000;
font-weight: bold;
font-size: 12px;
}
/* ribbon
--------------------------------------------------*/
.pg-rfl .ribbon {
}
.pg-rfl .ribbon .prev {
width: 46px;
height: 89px;
float: left;
background-image: url(../images/dark_prev.png);
background-repeat: no-repeat;
background-position: 0 50%;
cursor: pointer;
}
.pg-rfl .ribbon .prev:hover {
background-image: url(../images/dark_prev_hover.png);
}
.pg-rfl .ribbon .next {
width: 46px;
height: 89px;
float: left;
background-image: url(../images/dark_next.png);
background-repeat: no-repeat;
background-position: 100% 50%;
cursor: pointer;
}
.pg-rfl .ribbon .next:hover {
background-image: url(../images/dark_next_hover.png);
}
.pg-rfl .ribbon .thumbs-wrapper {
padding: 5px 5px 5px 5px;
background-color: #303030;
border: solid 1px #000;
border-top: none;
overflow: hidden;
height: 70px;
width: 600px;
float: left;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs {
overflow: hidden;
width: 600px;
height: 70px;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs img {
border: solid 4px #1c1c1c;
float: left;
margin: 0 0 0 9px;
cursor: pointer;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs img.current {
border-color: #474747;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs img:hover {
border-color: #fff;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs .no-images {
text-align: center;
color: #474747;
padding: 20px 0 25px 0;
font-size: 20px;
}
/* tooltip
--------------------------------------------------*/
.pg-rfl-tip {
width: 200px;
background-image: url(../images/dark_tip_bottom.png);
background-repeat: no-repeat;
background-position: 50% 100%;
}
.pg-rfl-tip .tip-top {
}
.pg-rfl-tip .tip {
background-color: #fff;
padding: 7px;
}
.pg-rfl-tip .tip .tip-title {
color: #613719;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 3px 5px;
overflow: hidden;
margin-bottom: 5px;
width: 176px;
}
.pg-rfl-tip .tip .tip-text {
font-family: Arial, Helvetica, sans-serif;
color: #888;
font-size: 11px;
overflow: hidden;
width: 186px;
}
.pg-rfl-tip .tip-bottom {
height: 7px;
font-size: 1px;
}
And here's the light.css for the gallery:
/* body background
--------------------------------------------------*/
body.pg {
background-color: #FFFFFF;
}
/* wrapper
--------------------------------------------------*/
.pg-rfl {
}
/* navigation links
--------------------------------------------------*/
.pg-rfl .nav {
}
.pg-rfl .nav a {
background-color: #FFFFFF;
font-weight: bold;
color: #613719;
}
.pg-rfl .nav a:hover {
background-color: #FFFFFF;
font-weight: bold;
color: #CCCCCC;
}
/* fullsize image
--------------------------------------------------*/
.pg-rfl .fullsize {
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.pg-rfl .fullsize img {
}
.pg-rfl .fullsize .fullsize-enlarge {
}
.pg-rfl .fullsize .loader {
color: #ccc;
}
.pg-rfl .fullsize .loader img {
}
/* title, description
--------------------------------------------------*/
.pg-rfl .title {
width: 600px;
margin: 0 auto;
background-color: #dbdbdb;
padding: 10px;
border: solid 0px #000000;
border-top: none;
border-bottom: none;
}
.pg-rfl .title .fullsize-title {
color: #000000;
font-weight: bold;
font-size: 12px;
}
.pg-rfl .title .fullsize-description {
color: #000000;
font-weight: bold;
font-size: 12px;
}
/* ribbon
--------------------------------------------------*/
.pg-rfl .ribbon {
}
.pg-rfl .ribbon .prev {
background-image: url(../images/light_prev.png);
}
.pg-rfl .ribbon .prev:hover {
background-image: url(../images/light_prev_hover.png);
}
.pg-rfl .ribbon .next {
background-image: url(../images/light_next.png);
}
.pg-rfl .ribbon .next:hover {
background-image: url(../images/light_next_hover.png);
}
.pg-rfl .ribbon .thumbs-wrapper {
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs {
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs img {
border-color: #dbdbdb;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs img.current {
border-color: #999;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs img:hover {
border-color: #603719;
}
.pg-rfl .ribbon .thumbs-wrapper .thumbs .no-images {
color: #ccc;
}
/* tooltip
--------------------------------------------------*/
.pg-rfl-tip {
background-image: url(../images/light_tip_bottom.png);
}
.pg-rfl-tip .tip-top {
}
.pg-rfl-tip .tip {
background-color: #613719;
}
.pg-rfl-tip .tip .tip-title {
color: #613719;
background-color: #fff;
font-weight: bold;
font-size: 12px;
}
.pg-rfl-tip .tip .tip-text {
color: #fff;
}
.pg-rfl-tip .tip-bottom {
}
Can anyone please help me get the arrows back to where they go? I had to decrease the # of thumbnails due to width restrictions (running this inside a shopping cart)
I'm having a hard time getting it back to normal.
Thanks in advance for any help anyone!!!