*{
/* Resetting the default styles of the page */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:10px;
}
.sponsor{
width:120px;
height:120px;
float:left;
margin:12px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background:url("http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
width:90px;
height:90px;
position:absolute;
top:50%;
left:50%;
margin:-48px 0 0 -48px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:10px 10px 10px 10px;
font-style:italic;
}
.sponsorURL{
font-size:11px;
font-weight:bold;
padding-left:10px;
}
.clear{
/* This class clears the floats */
clear:both;
}
/* The styles below are only necessary for the styling of the demo page: */
#main{
position:relative;
margin:0 auto;
width:600px;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px white;
margin-bottom:30px;
background:url("http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/img/page_bg.gif") repeat-x bottom #f8f8f8;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
position:absolute;
right:10px;
top:10px;
}
.note{
font-size:12px;
font-style:italic;
padding-bottom:5px;
text-align:center;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
