.popsync{
background-color:#b8860b;
padding: 4px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

ul.popup{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.popup li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:1px 1% 0 5%;
}
ul.popup img{
background-color:#b8860b;
padding: 4px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;

}
ul.popup span{
position:absolute;
left: -9999px;
background-color:#b8860b;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
font-weight: bold;
text-align: center; 
color: #ffff00; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.popup li:hover{
z-index: 50;
cursor:pointer;
}
ul.popup span img{
padding:2px;
background:#ccc;
}
ul.popup li:hover span{ 
top:-350px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 150px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.popup li:hover:nth-child(2) span{
top: -350px;
left: -200px; 
}
ul.popup li:hover:nth-child(3) span{
top: -350px;
left: -400px; 
}

ul.popup li:hover:nth-child(4) span{
top: -350px;
left: -450px;
}

ul.popup li:hover:nth-child(5) span{
top: -400px;
left: 150px;
}

ul.popup li:hover:nth-child(6) span{
top: -325px;
left: -200px;
}

ul.popup li:hover:nth-child(7) span{
top: -425px;
left: -175px;
}

ul.popup li:hover:nth-child(8) span{
top: -325px;
left: -140px;
}


/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.popup img, ul.popup span{
behavior: url(pie/PIE.htc); 
}

/*popsync for TABLETS*/

.popsync{
background-color:#b8860b;
padding: 4px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

ul.popupTablet{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.popupTablet li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:1px 30px 0 -20px;
}
ul.popupTablet img{
background-color:#b8860b;
padding: 4px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;

}
ul.popupTablet span{
position:absolute;
left: -9999px;
background-color:#b8860b;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
font-weight: bold;
text-align: center; 
color: #ffff00; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.popupTablet li:hover{
z-index: 50;
cursor:pointer;
}
ul.popupTablet span img{
padding:2px;
background:#ccc;
}
ul.popupTablet li:hover span{ 
top:-400px; /*the distance from the bottom of the thumbnail to the top of the popupTablet image*/
left: -10px; /*distance from the left of the thumbnail to the left of the popupTablet image*/
}
ul.popupTablet li:hover:nth-child(2) span{
top: -400px;
left: -180px; 
}
ul.popupTablet li:hover:nth-child(3) span{
top: -400px;
left: -350px; 
}

ul.popupTablet li:hover:nth-child(4) span{
top: -325px;
left: -175px;
}

ul.popupTablet li:hover:nth-child(5) span{
top: -325px;
left: -350px;
}

ul.popupTablet li:hover:nth-child(6) span{
top: -325px;
left: -500px;
}

ul.popupTablet li:hover:nth-child(7) span{
top: -425px;
left: -175px;
}

ul.popupTablet li:hover:nth-child(8) span{
top: -325px;
left: -140px;
}
ul.popupTablet li:hover:nth-child(9) span{
top: -325px;
left: -300px;
}

ul.popupTablet li:hover:nth-child(10) span{
top: -325px;
left: 35px;
}

ul.popupTablet li:hover:nth-child(11) span{
top: -325px;
left: -140px;
}

ul.popupTablet li:hover:nth-child(12) span{
top: -325px;
left: -300px;
}

ul.popupTablet li:hover:nth-child(13) span{
top: -325px;
left: 35px;
}

ul.popupTablet li:hover:nth-child(14) span{
top: -325px;
left: -140px;
}

ul.popupTablet li:hover:nth-child(15) span{
top: -325px;
left: -300px;
}

ul.popupTablet li:hover:nth-child(16) span{
top: -250px;
left: 40px;
}
ul.popupTablet li:hover:nth-child(17) span{
top: -250px;
left: -250px;
}
ul.popupTablet li:hover:nth-child(18) span{
top: -325px;
left: 35px;
}
ul.popupTablet li:hover:nth-child(19) span{
top: -325px;
left: -140px; 
}

ul.popupTablet li:hover:nth-child(20) span{
top: -325px;
left: -300px;
}

ul.popupTablet li:hover:nth-child(21) span{
top: -325px;
left: 0px;
}
ul.popupTablet li:hover:nth-child(22) span{
top: -325px;
left: 0px; 
}

ul.popupTablet li:hover:nth-child(23) span{
top: -325px;
left: -203px;
}

/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.popupTablet img, ul.popupTablet span{
behavior: url(pie/PIE.htc); 
}
/*END popsync for TABLETS*/

/*popsync for Phones*/

.popsync{
background-color:#b8860b;
padding: 4px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

ul.popupPhone{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.popupPhone li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:1px 30px 0 -20px;
}
ul.popupPhone img{
background-color:#b8860b;
padding: 4px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;

}
ul.popupPhone span{
position:absolute;
left: -9999px;
background-color:#b8860b;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
font-weight: bold;
text-align: center; 
color: #ffff00; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.popupPhone li:hover{
z-index: 50;
cursor:pointer;
}
ul.popupPhone span img{
padding:2px;
background:#ccc;
}
ul.popupPhone li:hover span{ 
top:-75px; /*the distance from the bottom of the thumbnail to the top of the popupPhone image*/
left: -10px; /*distance from the left of the thumbnail to the left of the popupPhone image*/
}
ul.popupPhone li:hover:nth-child(2) span{
top: -75px;
left: -160px; 
}
ul.popupPhone li:hover:nth-child(3) span{
top: -150px;
left: -80px; 
}

ul.popupPhone li:hover:nth-child(4) span{
top: -325px;
left: -175px;
}

ul.popupPhone li:hover:nth-child(5) span{
top: -325px;
left: -350px;
}

ul.popupPhone li:hover:nth-child(6) span{
top: -325px;
left: -500px;
}

ul.popupPhone li:hover:nth-child(7) span{
top: -425px;
left: -175px;
}

ul.popupPhone li:hover:nth-child(8) span{
top: -325px;
left: -140px;
}
ul.popupPhone li:hover:nth-child(9) span{
top: -325px;
left: -300px;
}

ul.popupPhone li:hover:nth-child(10) span{
top: -325px;
left: 35px;
}

ul.popupPhone li:hover:nth-child(11) span{
top: -325px;
left: -140px;
}

ul.popupPhone li:hover:nth-child(12) span{
top: -325px;
left: -300px;
}

ul.popupPhone li:hover:nth-child(13) span{
top: -325px;
left: 35px;
}

ul.popupPhone li:hover:nth-child(14) span{
top: -325px;
left: -140px;
}

ul.popupPhone li:hover:nth-child(15) span{
top: -325px;
left: -300px;
}

ul.popupPhone li:hover:nth-child(16) span{
top: -250px;
left: 40px;
}
ul.popupPhone li:hover:nth-child(17) span{
top: -250px;
left: -250px;
}
ul.popupPhone li:hover:nth-child(18) span{
top: -325px;
left: 35px;
}
ul.popupPhone li:hover:nth-child(19) span{
top: -325px;
left: -140px; 
}

ul.popupPhone li:hover:nth-child(20) span{
top: -325px;
left: -300px;
}

ul.popupPhone li:hover:nth-child(21) span{
top: -325px;
left: 0px;
}
ul.popupPhone li:hover:nth-child(22) span{
top: -325px;
left: 0px; 
}

ul.popupPhone li:hover:nth-child(23) span{
top: -325px;
left: -203px;
}

/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.popupPhone img, ul.popupPhone span{
behavior: url(pie/PIE.htc); 
}

/*END popsync for PHONES*/