Photo wall, photo wall effect

Photo Wall

Reset:
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
Margin: 0;
Padding: 0;
}
Html, body {
Margin: 0;
Padding: 0;
}
Table {
Border-collapse: collapse;
Border-spacing: 0;
}
Fieldset, img {
Border: 0;
}
Input {
Border: 1px solid # b0b0b0;
Padding: 3px 5px 4px;
Color: #979797;
Width: pixel PX;
}
Address, caption, cite, code, dfn, th, var {
Font-style: normal;
Font-weight: normal;
}
Ol, ul {
List-style: none;
}
Caption, th {
Text-align: left;
}
H1, h2, h3, h4, h5, h6 {
Font-size: 100%;
Font-weight: normal;
}
Q: before, q: after {
Content :'';
}
Abbr, acronym {border: 0;
}

@ Import url('reset.css ');
Body {
Background: # f7f7f7 url (../images/pinstripe.gif) repeat top left;
Color: #000;
Font-family: Georgia, "Times New Roman", sans-serif;
Font-size: 12px;
}
A {
Color: #000;
Text-decoration: none;
}
Header h1 {
Margin: 10px 0 0 20px;
Font-size: 100px;
Text-transform: uppercase;
Text-shadow: 0px 0px 1px # fff;
Color: #444;
Font-family: 'wire one', arial, serif;
}
Header span {
Font-style: italic;
Margin:-10px 0 10px 188px;
Display: block;
Color: #555;
Text-shadow: 1px 1px 1px # fff;
}
. Iw_wrapper {
Width: 70%;
Margin: 30px auto 100px auto;
Position: relative;
}
Ul. iw_thumbs li {
Float: left;
Margin: 5px;
}
Ul. iw_thumbs li div {
Position: absolute;
Top: 5px;
Width: 180px;
Padding: 0px 10px;
Display: none;
Color: # fff;
Z-index: 100;
}
Ul. iw_thumbs li div h2 {
Font-family: 'wire one', arial, serif;
Font-size: 38px;
Text-transform: uppercase;
Text-shadow: 0px 0px 1px # fff;
}
Ul. iw_thumbs li div p {
Font-size: 11px;
Line-height: 16px;
Font-style: italic;
}
Ul. iw_thumbs li: nth-child (1 ){
Margin-left: 50px;
}
Ul. iw_thumbs li: nth-child (even ){
Margin-top: 30px;
}
Ul. iw_thumbs li: nth-child (3n ){
Margin-left: 20px;
}
Ul. iw_thumbs li img {
Border: 7px solid # fff;
Cursor: pointer;
Position: relative;
-Moz-box-shadow: 1px 1px 1px # aaa;
-Webkit-box-shadow: 1px 1px 1px # aaa;
Box-shadow: 1px 1px 1px # aaa;
}
Ul. iw_thumbs li img: hover {
-Moz-box-shadow: 1 px 1px 7px #777;
-Webkit-box-shadow: 1px 1px 7px #777;
Box-shadow: 1px 1px 7px #777;
}
Ul. iw_thumbs li: nth-child (even) img {
Height: 20px;
}
Ul. iw_thumbs li: nth-child (odd) img {
Height: 40px;
}
Ul. iw_thumbs li: nth-child (5n) img {
Height: 70px;
}
Ul. iw_thumbs li: nth-child (6n) img {
Height: 110px;
}
Ul. iw_thumbs li: nth-child (7n) img {
Height: 20px;
}
. Iw_ribbon {
Position: fixed;
Height: 126px;/* first 126 then 0 to close and 100% to open (while top goes to 0 )*/
Width: 0px;/* first 0 then animation to 100% */
Left: 0px;/* or right 0 */
Top: 0px;/* First, top of thumb, then animate to 0 */
Background: #000;
Opacity: 0.8;
Z-index: 10;
Overflow: hidden;
Display: none;
}
. Iw_close {
Position: absolute;
Top: 10px;
Right: 10px;
Background: # f0f0f0 url (../images/close.gif) no-repeat center;
Width: 18px;
Height: 18px;
Display: none;
Cursor: pointer;
}
. Iw_zoom {
Color: white;
Font-size: 8px;
Font-family: Arial, sans-serif;
Text-transform: uppercase;
Padding: 14px;
Display: none;
Float: right;
Margin-right: 30px;
}
. Iw_ribbon img {
Position: absolute;
Top: 50%;
Left: 50%;
Border: 7px solid # fff;
}
. Iw_loading {
Background: # fff url (../images/loader.gif) no-repeat center;
Width: 28px;
Height: 28px;
Position: absolute;
Top: 50%;
Left: 50%;
Z-index: 10000;
Margin:-14px 0px 0px-14px;
Opacity: 0.8;
}
/* Footer Style */
. Footer {
Position: fixed;
Bottom: 0px;
Left: 0px;
Width: 100%;
Font-size: 13px;
Background: #000;
Opacity: 0.9;
Height: 20px;
Padding-bottom: 5px;
Text-transform: uppercase;
Font-family: 'pt Sans narrow', Arial, sans-serif;
Z-index: 4;
}
. Footer {
Padding: 5px 10px;
Letter-spacing: 1px;
Text-shadow: 1px 1px 1px #000;
Color: # ddd;
Float: right;
}
. Footer a: hover {
Color: # fff;
}
. Footer a span {
Font-weight: bold;
}
. Footer a. left {
Float: left;
}