/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls/gallery/left_right_click.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #gallery {width:400px; position:relative; height:100px; padding:400px 0 20px 0; margin:0 0 20px 0;} #gallery img.left {width:14px; height:24px; background:#4f3e26; float:left;cursor:pointer; padding-top:24px;} #gallery img.right {width:14px; height:24px; background:#4f3e26; float:left;cursor:pointer; padding:24px 0 0 3px;} /* thumbs outer box properties */ #gallery ul {list-style:none; padding:10px 0 0 2px; margin:0; float:left; border:0; border-width:0;} /* thumbs properties */ #gallery ul li {display:inline; width:40px; height:40px; float:left; margin:0 3px 0 3px; border:0; cursor:pointer;} #gallery ul li.hide {display:none;} /* using background images */ #gallery ul li.th1 {background:url(../images/galleries/demo/demo_01_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th2 {background:url(../images/galleries/demo/demo_02_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th3 {background:url(../images/galleries/demo/demo_03_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th4 {background:url(../images/galleries/demo/demo_04_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th5 {background:url(../images/galleries/demo/demo_05_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th6 {background:url(../images/galleries/demo/demo_06_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th7 {background:url(../images/galleries/demo/demo_07_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th8 {background:url(../images/galleries/demo/demo_08_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th9 {background:url(../images/galleries/demo/demo_09_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th10 {background:url(../images/galleries/demo/demo_10_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th11 {background:url(../images/galleries/demo/demo_11_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th12 {background:url(../images/galleries/demo/demo_12_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th13 {background:url(../images/galleries/demo/demo_13_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th14 {background:url(../images/galleries/demo/demo_14_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th15 {background:url(../images/galleries/demo/demo_15_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th16 {background:url(../images/galleries/demo/demo_16_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th17 {background:url(../images/galleries/demo/demo_17_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th18 {background:url(../images/galleries/demo/demo_18_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th19 {background:url(../images/galleries/demo/demo_19_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th20 {background:url(../images/galleries/demo/demo_20_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th21 {background:url(../images/galleries/demo/demo_21_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th22 {background:url(../images/galleries/demo/demo_22_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th23 {background:url(../images/galleries/demo/demo_23_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th24 {background:url(../images/galleries/demo/demo_24_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th25 {background:url(../images/galleries/demo/demo_25_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th26 {background:url(../images/galleries/demo/demo_26_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th27 {background:url(../images/galleries/demo/demo_27_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th28 {background:url(../images/galleries/demo/demo_28_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th29 {background:url(../images/galleries/demo/demo_29_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.th30 {background:url(../images/galleries/demo/demo_30_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards01 {background:url(../images/galleries/cards/cards_01_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards02 {background:url(../images/galleries/cards/cards_02_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards03 {background:url(../images/galleries/cards/cards_03_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards04 {background:url(../images/galleries/cards/cards_04_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards05 {background:url(../images/galleries/cards/cards_05_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards06 {background:url(../images/galleries/cards/cards_06_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards07 {background:url(../images/galleries/cards/cards_07_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards08 {background:url(../images/galleries/cards/cards_08_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards09 {background:url(../images/galleries/cards/cards_09_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards10 {background:url(../images/galleries/cards/cards_10_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards11 {background:url(../images/galleries/cards/cards_11_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards12 {background:url(../images/galleries/cards/cards_12_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards13 {background:url(../images/galleries/cards/cards_13_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards14 {background:url(../images/galleries/cards/cards_14_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards15 {background:url(../images/galleries/cards/cards_15_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards16 {background:url(../images/galleries/cards/cards_16_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards17 {background:url(../images/galleries/cards/cards_17_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards18 {background:url(../images/galleries/cards/cards_18_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards19 {background:url(../images/galleries/cards/cards_19_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards20 {background:url(../images/galleries/cards/cards_20_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards21 {background:url(../images/galleries/cards/cards_21_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards22 {background:url(../images/galleries/cards/cards_22_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards23 {background:url(../images/galleries/cards/cards_23_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards24 {background:url(../images/galleries/cards/cards_24_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards25 {background:url(../images/galleries/cards/cards_25_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards26 {background:url(../images/galleries/cards/cards_26_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards27 {background:url(../images/galleries/cards/cards_27_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards28 {background:url(../images/galleries/cards/cards_28_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards29 {background:url(../images/galleries/cards/cards_29_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards30 {background:url(../images/galleries/cards/cards_30_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards31 {background:url(../images/galleries/cards/cards_31_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards32 {background:url(../images/galleries/cards/cards_32_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards33 {background:url(../images/galleries/cards/cards_33_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards34 {background:url(../images/galleries/cards/cards_34_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.cards35 {background:url(../images/galleries/cards/cards_35_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures01 {background:url(../images/galleries/brochures/brochures_01_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures02 {background:url(../images/galleries/brochures/brochures_02_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures03 {background:url(../images/galleries/brochures/brochures_03_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures04 {background:url(../images/galleries/brochures/brochures_04_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures05 {background:url(../images/galleries/brochures/brochures_05_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures06 {background:url(../images/galleries/brochures/brochures_06_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures07 {background:url(../images/galleries/brochures/brochures_07_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures08 {background:url(../images/galleries/brochures/brochures_08_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures09 {background:url(../images/galleries/brochures/brochures_09_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures10 {background:url(../images/galleries/brochures/brochures_10_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures11 {background:url(../images/galleries/brochures/brochures_11_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures12 {background:url(../images/galleries/brochures/brochures_12_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures13 {background:url(../images/galleries/brochures/brochures_13_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures14 {background:url(../images/galleries/brochures/brochures_14_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures15 {background:url(../images/galleries/brochures/brochures_15_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures16 {background:url(../images/galleries/brochures/brochures_16_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures17 {background:url(../images/galleries/brochures/brochures_17_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.brochures18 {background:url(../images/galleries/brochures/brochures_18_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos01 {background:url(../images/galleries/logos/logos_01_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos02 {background:url(../images/galleries/logos/logos_02_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos03 {background:url(../images/galleries/logos/logos_03_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos04 {background:url(../images/galleries/logos/logos_04_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos05 {background:url(../images/galleries/logos/logos_05_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos06 {background:url(../images/galleries/logos/logos_06_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos07 {background:url(../images/galleries/logos/logos_07_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos08 {background:url(../images/galleries/logos/logos_08_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos09 {background:url(../images/galleries/logos/logos_09_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos10 {background:url(../images/galleries/logos/logos_10_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos11 {background:url(../images/galleries/logos/logos_11_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos12 {background:url(../images/galleries/logos/logos_12_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos13 {background:url(../images/galleries/logos/logos_13_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos14 {background:url(../images/galleries/logos/logos_14_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos15 {background:url(../images/galleries/logos/logos_15_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos16 {background:url(../images/galleries/logos/logos_16_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos17 {background:url(../images/galleries/logos/logos_17_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos18 {background:url(../images/galleries/logos/logos_18_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos19 {background:url(../images/galleries/logos/logos_19_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos20 {background:url(../images/galleries/logos/logos_20_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos21 {background:url(../images/galleries/logos/logos_21_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos22 {background:url(../images/galleries/logos/logos_22_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos23 {background:url(../images/galleries/logos/logos_23_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos24 {background:url(../images/galleries/logos/logos_24_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos25 {background:url(../images/galleries/logos/logos_25_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos26 {background:url(../images/galleries/logos/logos_26_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos27 {background:url(../images/galleries/logos/logos_27_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.logos28 {background:url(../images/galleries/logos/logos_28_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.id01 {background:url(../images/galleries/id/id_01_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.poster01 {background:url(../images/galleries/poster/poster_01_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.poster02 {background:url(../images/galleries/poster/poster_02_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.poster03 {background:url(../images/galleries/poster/poster_03_s.jpg); background-repeat:no-repeat; background-position:center;} #gallery ul li.poster04 {background:url(../images/galleries/poster/poster_04_s.jpg); background-repeat:no-repeat; background-position:center;} /* remove visibility:hidden; if you want to use the original images as thumbnails */ #gallery ul li img {visibility:hidden; display:block; width:40px; height:40px;} /* description */ #gallery ul li span {display:none; position:absolute; left:18px; top:460px; width:350px;font-family: arial, sans-serif; color:#afa08b; font-size:10px; line-height:1em; text-align:justify; padding:10px 0 20px 10px;} #gallery ul li b {color:#f1903a;} #gallery ul li.chosen {border-color:#fff; cursor:default;} #gallery ul li.chosen div {position:absolute; left:0; top:0; width:400px; height:400px; background:#4f3e26; border:0; border-width:0;}/* div properties */ #gallery ul li.chosen div i {width:400px; height:400px; display:table-cell; vertical-align:middle; text-align:center;} #gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:0; margin:0 auto;}/* div properties */ /* description */ #gallery ul li.chosen span {display:block;}