/* CSS Document */ /* --------------------------------------------- 01. main/default elements --------------------------------------------- */ body { background:#FFFFFF url(../../images/bg_body.gif) repeat-x top; font-family:Arial, Helvetica, sans-serif} a:link {color:#FF6633; text-decoration: none} a:visited {color:#FF8000; text-decoration: none} p { font-size:12px; color:#888888} h1 { font-size:24px; color:#888888; text-transform:uppercase} h1 a:link { color:#888888; text-transform:uppercase; text-decoration:none} h1 a:hover { background:url(../../images/bg_dottedborder.gif) repeat-x bottom} h1 a:visited { color:#666666;} h3 { font-size:16px; color:#888888; text-transform:uppercase;} h3 a:link { color:#888888; text-transform:uppercase; text-decoration:none} h3 a:hover { background:url(../../images/bg_dottedborder.gif) repeat-x bottom} h3 a:visited { color:#666666;} h5 { font-size:12px; font-weight:bold; color:#666666; line-height:1.6em} h6 { font-size:10px; font-weight:bold; color:#AAAAAA} /* --------------------------------------------- 02. contaienr and wrapper --------------------------------------------- */ #container { width:100%; float:left; padding-bottom:40px} #wrapper { width:982px; margin:0 auto} /* --------------------------------------------- 03. header --------------------------------------------- */ #header { width:802px; height:106px; float:left; padding-top:20px; padding-left:180px} #header .logo { width:630px; height:90px; float:left; background:url(../../images/logo.png) no-repeat top left} #header .logo-link {position: absolute; width:630px; height:90px;} .nodisplay { display: none} /* --------------------------------------------- 04. top nav --------------------------------------------- */ #topnav { width:941px; height:48px; float:left; background:url(../../images/bg_navbar.png) no-repeat; padding:0 19px 17px 22px} #topnav ul li a { color:#AAAAAA; text-decoration:none} #topnav ul li a:hover { color:#FF6633; text-decoration:none} #topnav ul li a.selected { color:#FF6633; text-decoration:none} #topnav .home { float:left; padding-right:25px} #topnav .home ul { float:left} #topnav .home ul li { float:left; font-size:14px; font-weight:bold; color:#AAAAAA; text-transform:uppercase; padding-top:16px; padding-right:0px} #topnav .home ul li a { width:20px; height:15px; float:left; background:url(../../images/icon_home.gif) no-repeat;} #topnav .home ul li a:hover {width:20px; height:15px; float:left; color:#FF6633; background:url(../../images/icon_home_hover.gif) no-repeat;} #topnav .home ul li a.selected {width:20px; height:15px; float:left; color:#FF6633; background:url(../images/icon_home_hover.gif) no-repeat;} #topnav .home ul li span { display:none} #topnav .left { float:left;} #topnav .left ul { float:left} #topnav .left ul li { float:left; font-size:14px; font-weight:bold; color:#AAAAAA; text-transform:uppercase; padding-top:17px; padding-right:36px;} #topnav .right { float:right; padding-top:17px} #topnav .right ul { float:left} #topnav .right ul li { float:left; font-size:9px; font-weight:normal; color:#AAAAAA; line-height:2.2em; padding-left:15px} #topnav .right ul li a.facebook { width:17px; height:17px; float:left; background:url(../../images/icon_facebook.gif) no-repeat} #topnav .right ul li a.facebook:hover { background:url(../../images/icon_facebook_hover.gif) no-repeat} /* --------------------------------------------- 05. flash --------------------------------------------- */ #flashbox { width:982px; height:407px; float:left; background:url(../../images/bg_flashbox1.jpg) no-repeat bottom; border-top:1px solid #E2E2E2; margin-bottom:16px} #flashbox .flash { width:982px; height:336px; float:left} /* --------------------------------------------- 05.1. flash - Searchbox --------------------------------------------- */ #searchbox { width:943px; float:left; padding-left:39px} #searchbox .search { width:262px; height:50px; float:left; background: url(../../images/divider_searchbox.gif) no-repeat right center; padding-top:20px; padding-right:39px} #searchbox .search fieldset { width:262px; height:29px; float:left; background:url(../../images/bg_input.gif) no-repeat} #searchbox .search fieldset .input { width:222px; float:left; background:none; border:none; font-size:11px; font-weight:normal; color:#999999; padding:7px 9px} #searchbox .search fieldset .button_search { float:left; padding-top:7px} #searchbox ul { width:604px; float:left} #searchbox ul li { width:151px; height:43px; float:left; background:url(../../images/divider_searchbox.gif) no-repeat right center; padding-top:22px} #searchbox ul li a { width:151px; height:19px; float:left; color:#9E9E9E; text-decoration:none} #searchbox ul li a:hover { color:#FF6633} #searchbox ul li a.ra { background:url(../../images/link_ra.gif) no-repeat top center} #searchbox ul li a.ra:hover { background:url(../../images/link_ra_hover.gif) no-repeat top center} #searchbox ul li a.ra_selected { background:url(../../images/link_ra_hover.gif) no-repeat top center} #searchbox ul li a.stekt { background:url(../../images/link_stekt.gif) no-repeat top center} #searchbox ul li a.stekt:hover { background:url(../../images/link_stekt_hover.gif) no-repeat top center} #searchbox ul li a.stekt_selected { background:url(../../images/link_stekt_hover.gif) no-repeat top center} #searchbox ul li a.kokt { background:url(../../images/link_kokt.gif) no-repeat top center} #searchbox ul li a.kokt:hover { background:url(../../images/link_kokt_hover.gif) no-repeat top center} #searchbox ul li a.kokt_selected { background:url(../../images/link_kokt_hover.gif) no-repeat top center} #searchbox ul li a.grillet { background:url(../../images/link_iovnen.gif) no-repeat top center} #searchbox ul li a.grillet:hover { background:url(../../images/link_iovnen_hover.gif) no-repeat top center} #searchbox ul li a.grillet_selected { background:url(../../images/link_iovnen_hover.gif) no-repeat top center} /* --------------------------------------------- 06. content --------------------------------------------- */ #content { width:982px; float:left} /* --------------------------------------------- 07. quick links --------------------------------------------- */ #quicklinks { width:982px; float:left; padding-bottom:26px} #quicklinks .boxset { width:316px; float:left} #quicklinks .boxset_middle { width:316px; float:left; padding:0 17px} #quicklinks .photobox { width:314px; height:173px; float:left; background:url(../../images/bg_photobox.gif) no-repeat; padding:1px; position:relative} #quicklinks .photo { width:277px; height:134px; float:left; padding:19px 18px 20px 19px} #quicklinks .nyhet { float:left; margin-top:-173px; position:relative} #quicklinks h3 { float:left; padding-top:20px; font-size:14px} #quicklinks p { width:316px; float:left; line-height:1.3em; padding-top:4px} /* --------------------------------------------- 08. footer --------------------------------------------- */ #footer { width:980px; height:22px; float:left; background:url(../../images/bg_footer.gif) repeat-x top; border-top:1px solid #EDEDED; border-right:1px solid #E2E2E2; border-left:1px solid #E2E2E2; border-bottom:1px solid #CDCDCD; padding-top:11px;} #footer p { font-size:9px; color:#999999; position:relative} #footer .left { float:left; padding-left:15px} #footer .left p a { color:#999999; text-decoration:none;} #footer .left p a:hover { background:url(../../images/bg_dottedborder.png) repeat-x bottom} #footer .right { float:right; padding-right:20px} /* --------------------------------------------- 09. innerpage common styles - leftpanel --------------------------------------------- */ #leftpanel { width:316px; float:left; padding-right:17px} /* --------------------------------------------- 09.1. leftpanel - left navigation --------------------------------------------- */ #leftpanel .leftnav { width:315px; float:left; padding-bottom:10px} #leftpanel .leftnav ul { width:315px; float:left; background:url(../../images/bg_leftnav.png) no-repeat bottom; padding-bottom:1px} #leftpanel .leftnav ul li { width:294px; height:23px; float:left; background:url(../../images/bg_li_leftnav.png) no-repeat; font-size:11px; font-weight:bold; color:#999999; text-transform:uppercase; padding-top:12px; padding-left:21px} #leftpanel .leftnav ul li.latestnews { background:url(../../images/bg_li_latestnews.png) no-repeat; color:#666666} #leftpanel .leftnav ul li a { color:#999999; text-decoration:none} #leftpanel .leftnav ul li a:hover { color:#FF6633; text-decoration:none} #leftpanel .leftnav ul li a.selected { color:#FF6633; text-decoration:none} /* --------------------------------------------- 09.2. leftpanel - recipesbox --------------------------------------------- */ #recipesbox { width:277px; height:221px; float:left; background:url(../../images/bg_leftrecipesbox.png) no-repeat; padding:66px 19px 20px 20px} /* --------------------------------------------- 09.2.1. leftpanel - recipesbox - searchlist --------------------------------------------- */ #recipesbox .searchlist { width:276px; float:left} #recipesbox .searchlist ul { width:276px; height:22px; float:left; border-right:1px solid #ECECEC} #recipesbox .searchlist ul li { width:68px; height:17px; float:left; font-size:11px; font-weight:normal; color:#AAAAAA; text-align:center; text-transform:uppercase; line-height:1.2em; border-left:1px solid #ECECEC; padding-top:5px} #recipesbox .searchlist ul li a { color:#AAAAAA; text-decoration:none} #recipesbox .searchlist ul li a:hover { color:#FF6633; text-decoration:none} #recipesbox .searchlist ul li a.selected { color:#FF6633; text-decoration:none} /* --------------------------------------------- 09.2.2. leftpanel - recipesbox - search --------------------------------------------- */ #recipesbox .search { width:277px; height:29px; float:left; padding-top:19px; padding-bottom:13px} #recipesbox .search fieldset { width:277px; height:29px; float:left; background:url(../../images/bg_input2.png) no-repeat} #recipesbox .search fieldset .input { width:238px; float:left; background:none; border:none; font-size:11px; font-weight:normal; color:#999999; padding:7px 9px} #recipesbox .search fieldset .button_search { float:left; padding-top:7px} /* --------------------------------------------- 09.2.3. leftpanel - recipesbox - recipeslist --------------------------------------------- */ #recipesbox .recipeslist { width:277px; float:left; background:url(../../images/divider.png) repeat-x top; padding-top:16px} #recipesbox .recipeslist h6 { text-transform:uppercase; padding-bottom:10px} #recipesbox .recipeslist .arrow_left { float:left; padding-top:3px; padding-right:3px} #recipesbox .recipeslist .arrow_left a { width:8px; height:38px; float:left; background:url(../../images/arrow_left.gif) no-repeat} #recipesbox .recipeslist .arrow_left a:hover { width:8px; height:38px; float:left; background:url(../../images/arrow_left_hover.gif) no-repeat} #recipesbox .recipeslist .set { width:85px; float:left;} #recipesbox .recipeslist .set p { float:left; font-size:10px; color:#AAAAAA; text-transform:uppercase; padding:2px 3px} #recipesbox .recipeslist .set .photo { width:85px; float:left} #recipesbox .recipeslist .set .photo a { width:79px; float:left; padding:3px} #recipesbox .recipeslist .set .photo a:hover { background:url(../../images/bg_photo_recipe_hover.png) no-repeat} #recipesbox .recipeslist .arrow_right { float:left; padding-top:3px; padding-left:3px} #recipesbox .recipeslist .arrow_right a { width:8px; height:38px; float:left; background:url(../../images/arrow_right.gif) no-repeat} #recipesbox .recipeslist .arrow_right a:hover { width:8px; height:38px; float:left; background:url(../../images/arrow_right_hover.gif) no-repeat} /* --------------------------------------------- 10. innerpage common styles - rightpanel --------------------------------------------- */ #rightpanel { width:649px; float:left} #rightpanel h1 { padding-bottom:17px; padding-left:20px; overflow:hidden} #rightpanel h5 { padding-bottom:20px; padding-left:20px} /* --------------------------------------------- 10.1 rightpanel - photo box, print, rss, del --------------------------------------------- */ #rightpanel .photobox { width:609px; height:295px; float:left; background:url(../../images/bg_photo_article.jpg) no-repeat; padding:20px; margin-bottom:25px; position:relative} #rightpanel .button_print { float:left; font-size:10px; font-weight:normal; color:#888888; padding-right:16px} #rightpanel .button_print a { height:20px; float:left; padding:0 0 0 20px; color:#888888; text-decoration:none; background:url(../../images/button_print_left.gif) top left no-repeat} #rightpanel .button_print a span { height:16px; float:left; background:#F1F1F1 url(../../images/button_grey_right.gif) top right no-repeat; padding:4px 5px 0px 5px; color:#888888; cursor:pointer} #rightpanel .button_del { float:left; font-size:10px; font-weight:normal; color:#888888; padding-right:16px} #rightpanel .button_del a { height:20px; float:left; padding:0 0 0 16px; color:#888888; text-decoration:none; background:url(../../images/button_del_left.gif) top left no-repeat} #rightpanel .button_del a span { height:16px; float:left; background:#F1F1F1 url(../../images/button_grey_right.gif) top right no-repeat; padding:4px 5px 0px 5px; color:#888888; cursor:pointer} #rightpanel .button_rss { float:left; font-size:10px; font-weight:normal; color:#888888} #rightpanel .button_rss a { height:20px; float:left; padding:0 0 0 16px; color:#888888; text-decoration:none; background:url(../../images/button_rss_left.gif) top left no-repeat} #rightpanel .button_rss a span { height:16px; float:left; background:#F1F1F1 url(../../images/button_grey_right.gif) top right no-repeat; padding:4px 5px 0px 5px; color:#888888; cursor:pointer} /* --------------------------------------------- 10.2 rightpanel - article --------------------------------------------- */ #article { width:649px; float:left} #article .content_article { width:610px; float:left; padding-left:20px } #article .content_article p { width:610px; float:left; line-height:1.5em; padding-bottom:18px} #article .content_article p a:link { color:#FF6633; text-decoration:none} #article .content_article p a:hover { color:#FF6633; text-decoration:none; background:url(../../images/bg_dottedborder_hover.gif) repeat-x bottom} #article .content_article p a:visited { color:#FF8000; text-decoration:none} #article .content_article p a:visited:hover { color:#FF8000; text-decoration:none; background: url(../../images/bg_dottedborder_visited.gif) repeat-x bottom} #article .button_test { float:left; font-size:10px; font-weight:normal; color:#888888; padding-bottom:20px} #article .button_test a { height:20px; float:left; padding:0 0 0 5px; color:#888888; text-decoration:none; background:url(../../images/button_grey_left.gif) top left no-repeat} #article .button_test a span { height:16px; float:left; background:#F1F1F1 url(../../images/button_grey_right.gif) top right no-repeat; padding:4px 7px 0px 2px; color:#888888; cursor:pointer} #article .button_print { padding-bottom:34px} /* --------------------------------------------- 10.3 rightpanel - news --------------------------------------------- */ #news { width:649px; float:left; padding-bottom:30px} #news h5 { padding-bottom:0px} /* --------------------------------------------- 10.3.1 rightpanel - news - newslist --------------------------------------------- */ #newslist { width:649px; float:left;} #newslist .set { width:649px; float:left; padding-top:18px;} #newslist .divider { width:649px; height:200px; float:left; background:url(../../images/divider_shadow.png) no-repeat center; padding-top:25px; padding-bottom:5px; margin-top:-100px; margin-bottom:-115px;} #newslist .set_top { width:649px; float:left; } #newslist .photo { width:161px; height:78px; float:left; background:url(../../images/bg_photo_news.gif) no-repeat; padding:6px; position:relative} #newslist .hefte { width:161px; height:150px; float:left; background:url(../../images/bg_photo_recipes.gif) no-repeat; padding:6px; position:relative} #newslist .content { width:450px; float:left; padding-left:18px} #newslist .content p { line-height:1.5em; padding-top:4px; position:relative} #newslist .content h3 {position:relative; font-size:14px} /* --------------------------------------------- 10.3.2 rightpanel - news - pagination --------------------------------------------- */ #rightpanel .pagination { width:649px; float:left; padding-top:10px} #rightpanel .pagination p { font-size:11px; font-weight:bold; color:#CCCCCC; text-transform:uppercase} #rightpanel .pagination .left { float:left} #rightpanel .pagination .left p a { color:#CCCCCC; text-decoration:none; padding:0 1px} #rightpanel .pagination .left p a:hover { color:#AAAAAA; text-decoration:none} #rightpanel .pagination .left p a.selected { color:#AAAAAA; text-decoration:none} #rightpanel .pagination .right { float:right} #rightpanel .pagination .right p a { color:#AAAAAA; text-decoration:none; padding:0 1px} #rightpanel .pagination .right p a:hover { color:#AAAAAA; text-decoration:none} #rightpanel .pagination .right p span { color:#CCCCCC; text-decoration:none} /* --------------------------------------------- 10.4 rightpanel - other markets --------------------------------------------- */ #othermarkets { width:609px; float:left; background:url(../../images/bg_othermarkets.jpg) no-repeat; padding:20px} #othermarkets h1 { padding:0px; line-height:1.2em; padding-bottom:10px} #othermarkets h5 { padding:0px; font-size:11px; font-weight:normal; text-transform:uppercase; padding-bottom:20px} #othermarkets .map { float:left} #othermarkets .country { width:609px; height:609px; float:left} #othermarkets .country h1 { padding-bottom:15px} #othermarkets .country p { line-height:1.7em} #othermarkets .country p span { font-weight:bold } /* --------------------------------------------- 10.5 leftpanel - quotes --------------------------------------------- */ #leftquotes { width:277px; float:left; background:url(../../images/quote_right.gif) no-repeat bottom right; padding-left:20px} #leftquotes .quotes { width:225px; float:left; background:url(../../images/quote_left.gif) no-repeat top left; padding:6px 30px 0 22px} #leftquotes .quotes h3 {padding-bottom:7px;} #leftquotes .quotes p { color:#AAAAAA; line-height:1.4em} #leftquotes .quotes p a { float:right; color:#FF6633; text-decoration:none; padding-top:3px; font-size:11px} #leftquotes .quotes p a:hover { color:#FF6633; text-decoration:none; background:url(../../images/bg_dottedborder_hover.gif) repeat-x bottom} /* --------------------------------------------- 10.5.1 rightpanel - recipe --------------------------------------------- */ #recipe { width:649px; float:left; padding-bottom:34px} /* --------------------------------------------- 10.5.1 rightpanel - recipe -leftcontent --------------------------------------------- */ #recipe .content { width:629px; float:left; padding-left:20px} #recipe h1 { width:610px; float:left; padding-bottom:15px;} #recipe .content p { line-height:1.6em; padding-bottom:20px} #recipe .content p a:link { color:#FF6633; text-decoration:none} #recipe .content p a:hover { color:#FF6633; text-decoration:none; background:url(../../images/bg_dottedborder_hover.gif) repeat-x bottom} #recipe .content p a:visited { color:#FF8000; text-decoration:none} #recipe .content p a:visited:hover { color:#FF8000; text-decoration:none; background: url(../../images/bg_dottedborder_visited.gif) repeat-x bottom} #recipe .content .leftcontent { width:390px; float:left; padding-right:33px; padding-top:10px} #recipe .content .set { width:390px; float:left} #recipe .content .position { float:left} #recipe .content .position p { font-size:10px; text-transform:uppercase; padding-right:15px} #recipe .content .preptime { float:left; background:url(../../images/icon_preptime.png) no-repeat top left; padding-left:21px} #recipe .content .preptime p { font-size:10px} /* --------------------------------------------- 10.5.2 rightpanel - recipe - ingredienser --------------------------------------------- */ #recipe .ingredienser { width:156px; float:left; background:url(../../images/bg_ingredienserbox.png) no-repeat top left; padding:10px 30px 20px 20px} #recipe .ingredienser p { color:#666666; text-transform:uppercase; padding-bottom:20px} #recipe .ingredienser ul { width:156px; float:left} #recipe .ingredienser ul li { width:156px; float:left; font-size:12px; font-weight:normal; color:#666666; line-height:1.6em} /* --------------------------------------------- 10.6 rightpanel - recipes --------------------------------------------- */ #recipes { width:649px; float:left; padding-bottom:30px} #recipes .set { width:649px; float:left;} #recipes .set_top { width:649px; float:left;} #recipes .divider { width:649px; height:200px; float:left; background:url(../../images/divider_shadow.png) no-repeat center; padding-top:20px; padding-bottom:15px; margin-top:-100px; margin-bottom:-95px;} #recipes .photo { width:161px; height:78px; float:left; background:url(../../images/bg_photo_news.gif) no-repeat; padding:6px; position:relative} #recipes .content { width:455px; float:left; padding-left:18px} #recipes .content .heading { width:455px; float:left; padding-bottom:5px} #recipes .content .heading h3 { float:left; padding-right:0px; position:relative } #recipes .content .heading .preptime { float:right; background:url(../../images/icon_preptime.png) no-repeat top left; padding-left:21px; position:relative} #recipes .content .heading .preptime p { color:#BBBBBB} #recipes .content p { line-height:1.5em} /* --------------------------------------------- 10.7 rightpanel - search results --------------------------------------------- */ #searchresultbar { width:605px; height:46px; float:left; background:url(../../images/bg_searchresultsbar.jpg) no-repeat; padding:18px 20px 17px 24px} #searchresultbar .hits { float:left; padding-top:5px} #searchresultbar .hits p { color:#666666} #searchresultbar .search { width:277px; height:29px; float:right} #searchresultbar .search fieldset { width:277px; height:29px; float:left; background:url(../../images/bg_input2.png) no-repeat} #searchresultbar .search fieldset .input { width:238px; float:left; background:none; border:none; font-size:11px; font-weight:normal; color:#999999; padding:7px 9px} #searchresultbar .search fieldset .button_search { float:left; padding-top:7px} /* --------------------------------------------- 10.8 rightpanel - restaurents --------------------------------------------- */ #restaurant { width:641px; float:left; background:url(../../images/bg_othermarkets.jpg) no-repeat top left; padding:19px 0 15px 8px} #restaurant h1 { width:610px; float:left; padding-left:13px; padding-bottom:20px; padding-right:0px} #restaurant h5 { padding-left:13px; padding-bottom:14px} #restaurant .set { width:633px; float:left} #restaurant .set .name { width:406px; float:left; padding-right:6px} #restaurant .set .name h6 a { width:392px; height:24px; float:left; background:url(../../images/bg_namebox.gif) no-repeat; font-size:11px; color:#666666; text-decoration:none; padding-left:14px; padding-top:11px; padding-bottom:12px} #restaurant .set .name h6 a.selected { background:url(../../images/bg_namebox_selected.gif) no-repeat} #restaurant .set .sted { width:221px; float:left} #restaurant .set .sted h6 a { width:208px; height:24px; float:left; background:url(../../images/bg_placebox.gif) no-repeat; font-size:11px; color:#AAAAAA; text-decoration:none; padding-left:13px; padding-top:11px; padding-bottom:12px} #restaurant .set .sted h6 a.selected { background:url(../../images/bg_placebox_selected.gif) no-repeat; color:#666666} #restaurant ul { float:left; padding-bottom:15px} #restaurant ul li { font-size:12px; font-weight:normal; color:#888888; line-height:1.2em; padding-left:14px; padding-bottom:6px} #restaurant ul li a { color:#888888; text-decoration:none} #restaurant ul li a:hover { color:#FF6633; text-decoration:none} #restaurant ul li a.selected { color:#FF6633; text-decoration:none; font-size:10px; text-transform:uppercase} /* --------------------------------------------- 10.9 rightpanel - stores --------------------------------------------- */ #stores { width:629px; float:left; background:url(../../images/bg_othermarkets.jpg) no-repeat top left; padding:19px 0 25px 20px} .noborder#stores { background: none; } #stores h1 { width:610px; float:left; padding:0px; padding-bottom:18px} #stores p { line-height:1.6em; padding-bottom:33px; padding-left:2px} #stores .set1 { width:628px; float:left; padding-bottom:17px; padding-left:1px} #stores .jumpmenu { color:#888888} #stores .set2 { width:271px; float:left; padding-right:19px} #stores ul { float:left; padding-top:5px; clear: both; } #stores ul li { font-size:12px; font-weight:normal; color:#888888; line-height:1.4em; padding-bottom:3px} #stores ul li a { color:#888888; text-decoration:none} #stores ul li a:hover { color:#FF6633; text-decoration:none} #stores ul li a.selected { color:#FF6633; text-decoration:none; font-size:10px; text-transform:uppercase} #restaurant p { padding-left: 13px; padding-bottom: 14px; } #salmaPlayerArticle { margin-bottom: 15px; } .content_article ul { margin-bottom: 15px; } .content_article ul li { list-style: circle; margin-left: 20px; } .content_article h3 { margin-bottom: 5px; } .content_article ul li { color: #888888; } .content_article ul li, .content_article ul li a { font-size: 12px; } /* .facebook { display: none; } */ .frontpage_banner { padding: 20px; } #images { position:relative; width: 982px; height:336px; list-style: none; } #images .image { position:absolute; top:0; left:0; /* width: 200px; height: 200px;*/ z-index:8; opacity:0.0; } #images .image.active { z-index:10; opacity:1.0; } #images .image.last-active { z-index:9; }