/* Portfolio Page Screen CSS Document */ .offscreen { display: none; } #portfolio-filter {} #portfolio-filter #filter-tabs { width: 255px; height: 24px; padding: 0 10px; } #portfolio-filter #filter-tabs div { height: 24px; float: left; margin-right: 3px; background-position: 0 0; background-repeat: no-repeat; } #portfolio-filter #filter-tabs a { height: 24px; display: block; outline: none; } #portfolio-filter #filter-tabs a:hover { background-position: 0 -24px; background-repeat: no-repeat; } #portfolio-filter #filter-tabs span { display: none; visibility: hidden; } #portfolio-filter #filter-tabs .selected, #project-filter #filter-tabs .selected a:hover { background-position: 0 -48px; } #portfolio-filter #filter-tabs .byclient, #project-filter #filter-tabs .byclient a:hover { width: 68px; background-image: url(../../images/filter_tab_byclient.gif); } #portfolio-filter #filter-tabs .bytype, #project-filter #filter-tabs .bytype a:hover {width: 61px; background-image: url(../../images/filter_tab_bytype.gif);} #portfolio-filter #filter-tabs .showcase, #project-filter #filter-tabs .showcase a:hover {width: 74px; background-image: url(../../images/filter_tab_showcase.gif);} #portfolio-filter #nofilter-header { width: 275px; height:16px; overflow: hidden; background: url(../../images/nofilter_header.gif) top left no-repeat; } #portfolio-filter #nofilter-body { width: 275px; height:377px; background: url(../../images/nofilter_body_background.gif) top left repeat-y; } #portfolio-filter #nofilter-footer { width: 275px; height:15px; overflow: hidden; background: url(../../images/nofilter_footer.gif) top left no-repeat; } #portfolio-filter #nofilter-body .etched-logo { width: 275px; height: 377px; background: url(../../images/nofilter_body_background_logo.gif) center center no-repeat; } #portfolio-filter #filter-header { width: 275px; height:16px; overflow: hidden; background: url(../../images/filter_header.gif) top left no-repeat; } #portfolio-filter #filter-body { width: 275px; background: url(../../images/filter_body_background.gif) top left repeat-y; } #portfolio-filter #filter-footer { width: 275px; height:15px; overflow: hidden; background: url(../../images/filter_footer.gif) top left no-repeat; } /* -- Scroll Pane Styles -- */ #portfolio-filter #filter-body .scroll-pane { width: 286px; overflow: auto; height: 377px; } #portfolio-filter #filter-body .jScrollPaneTrack { background: url(../../images/scroll_track.gif) repeat-y; } #portfolio-filter #filter-body .jScrollPaneDrag { background: url(../../images/scroll_drag_middle.gif) no-repeat 0 50%; } #portfolio-filter #filter-body .jScrollPaneDragTop { background: url(../../images/scroll_drag_top.gif) no-repeat; height: 2px; } #portfolio-filter #filter-body .jScrollPaneDragBottom { background: url(../../images/scroll_drag_bottom.gif) no-repeat; height: 2px; } #portfolio-filter #filter-body a.jScrollArrowUp { height: 10px; background: url(../../images/scroll_arrow_up.gif) no-repeat 0 0; } #portfolio-filter #filter-body a.jScrollArrowUp:hover { background-position: 0 -10px; } #portfolio-filter #filter-body a.jScrollArrowDown { height: 10px; background: url(../../images/scroll_arrow_down.gif) no-repeat 0 0; } #portfolio-filter #filter-body a.jScrollArrowDown:hover { background-position: 0 -10px; } #portfolio-filter #filter-body a.jScrollActiveArrowButton, #portfolio-filter #filter-body a.jScrollActiveArrowButton:hover { background-position: 0 -20px; } #portfolio-filter #filter-body .filter-list-lvl1 { width: 248px; margin: 0 0 0 6px; padding: 0; } #portfolio-filter #filter-body .filter-list-lvl1 li { font-size: 70%; } #portfolio-filter #filter-body .filter-list-item-lvl1 { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #8e8d8e; background: url(../../images/filter_client_lvl1_background.gif) #302f30 top left repeat-x; } #portfolio-filter #filter-body .filter-list-item-link-lvl1 { width: 225px; height: 20px; padding-left: 21px; display: block; color: #fff; text-decoration: none; line-height: 20px; background: url(../../images/filter_client_expand.gif) 5px center no-repeat; } #portfolio-filter #filter-body .filter-list-item-link-lvl1:active, #portfolio-filter #filter-body .filter-list-item-link-lvl1:hover { color: #ff6633; } #portfolio-filter #filter-body .filter-list-item-link-lvl1-selected { width: 225px; height: 20px; padding-left: 21px; display: block; color: #d2c6aa; text-decoration: none; line-height: 20px; background: url(../../images/filter_client_contract.gif) 5px center no-repeat; } #portfolio-filter #filter-body .filter-list-item-link-lvl1-selected:active, #portfolio-filter #filter-body .filter-list-item-link-lvl1-selected:hover { color: #d2c6aa; } #portfolio-filter #filter-body .filter-list-lvl2 { margin: 0; padding: 0; } #portfolio-filter #filter-body .filter-list-lvl2 li { font-size: 100%; } #portfolio-filter #filter-body .filter-list-item-lvl2 { margin: 0; padding: 0; list-style: none; border-top: 1px solid #8e8d8e; background: url(../../images/filter_client_lvl2_background.gif) #f0e6cd top left repeat-y; } #portfolio-filter #filter-body .filter-list-item-link-lvl2 { width: 225px; height: 18px; padding-left: 21px; display: block; border: 1px solid #525051; color: #525051; text-decoration: none; line-height: 20px; background: url(../../images/filter_client_project_bullet.gif) 5px center no-repeat;} #portfolio-filter #filter-body .filter-list-item-link-lvl2:active, #portfolio-filter #filter-body .filter-list-item-link-lvl2:hover { color: #a49c8c; } #portfolio-filter #filter-body .filter-list-item-link-lvl2-selected { width: 225px; height: 18px; padding-left: 21px; display: block; border: 1px solid #525051; color: #ff6633; text-decoration: none; line-height: 20px; background: url(../../images/filter_client_project_bullet_selected.gif) 5px center no-repeat;} #portfolio-filter #filter-body .filter-list-item-link-lvl2-selected:active, #portfolio-filter #filter-body .filter-list-item-link-lvl2-selected:hover { color: #ff6633; } #portfolio-pane { width: 655px; } #portfolio-pane #portfolio-pane-body { width: 635px; padding: 0 10px; background: url(../../images/portfolio_pane_header.gif) #f1eee5 top left no-repeat; } #portfolio-pane #portfolio-pane-footer { width: 655px; height: 10px; overflow: hidden; background: url(../../images/portfolio_pane_footer.gif) #f1eee5 top left no-repeat; } /* Portfolio Panel Title */ #portfolio-pane #portfolio-pane-body .portfolio-title { width: 255px; height: 30px; margin-top: 24px; background: url(../../images/portfolio_pane_title_background.gif) top left repeat-x; } #portfolio-pane #portfolio-pane-body .portfolio-title div { width: 255px; height: 30px; background-position: 0 7px; background-repeat: no-repeat; } #portfolio-pane #portfolio-pane-body .portfolio-title h3 { display: none; visibility: hidden; } #portfolio-pane #portfolio-pane-body .portfolio-title .projectdetail { background-image: url(../../images/portfolio_pane_title_projectdetail.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .showcase { background-image: url(../../images/portfolio_pane_title_showcase.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .brand-identity { background-image: url(../../images/portfolio_pane_title_brandidentity.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .stationery { background-image: url(../../images/portfolio_pane_title_stationery.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .brochures-folders { background-image: url(../../images/portfolio_pane_title_brochuresandfolders.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .annual-reports { background-image: url(../../images/portfolio_pane_title_annualreports.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .newsletters { background-image: url(../../images/portfolio_pane_title_newsletters.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .flyers { background-image: url(../../images/portfolio_pane_title_flyers.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .leaflets { background-image: url(../../images/portfolio_pane_title_leaflets.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .posters { background-image: url(../../images/portfolio_pane_title_posters.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .direct-mail { background-image: url(../../images/portfolio_pane_title_directmail.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .national-trade-press { background-image: url(../../images/portfolio_pane_title_nationalandtradepress.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .magazine { background-image: url(../../images/portfolio_pane_title_magazine.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .retail-packaging { background-image: url(../../images/portfolio_pane_title_retailpackaging.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .cd-dvd-sleeves { background-image: url(../../images/portfolio_pane_title_cdanddvdsleeves.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .box-sets { background-image: url(../../images/portfolio_pane_title_boxsets.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .point-of-sale { background-image: url(../../images/portfolio_pane_title_pointofsale.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .exhibition-stands { background-image: url(../../images/portfolio_pane_title_exhibitionstands.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .signage { background-image: url(../../images/portfolio_pane_title_signage.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .vehicle-livery { background-image: url(../../images/portfolio_pane_title_vehiclelivery.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .web-corporate { background-image: url(../../images/portfolio_pane_title_corporate.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .e-commerce { background-image: url(../../images/portfolio_pane_title_ecommerce.gif); } /* Portfolio Information */ #portfolio-pane #portfolio-pane-body .portfolio-information-byclient { height: auto !important; height: 154px; min-height: 154px; padding-top: 1px; } #portfolio-pane #portfolio-pane-body .portfolio-information-byclient h4 { font-size: 70%; font-weight: normal; margin-top: 0; margin-bottom: 3px; line-height: 1em; } #portfolio-pane #portfolio-pane-body .portfolio-information-byclient p { font-size: 90%; font-weight: bold; margin-top: 0; margin-bottom: 8px; line-height: 1em; } #portfolio-pane #portfolio-pane-body .portfolio-information-bytype { height: auto !important; height: 53px; min-height: 53px; border: 1px solid #d2c6aa; background-color: #e8e2d3; padding: 6px; } #portfolio-pane #portfolio-pane-body .portfolio-information-bytype p { font-size: 70%; margin-top: 0; margin-bottom: 0; line-height: 1.4em; } /* Portfolio Thumb Pagination */ #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination-disabled { width: 255px; height: 16px; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination { width: 255px; height: 16px; overflow: hidden; background: url(../../images/portfolio_pane_thumb_pagination_background.gif) top left no-repeat; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination div { height: 16px; width: 60px; background-position: 0 0; background-repeat: no-repeat; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination a { height: 16px; display: block; outline: none; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination a:hover { background-position: 0 -16px; background-repeat: no-repeat; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination span { display: none; visibility: hidden; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .disabled, #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .disabled a:hover { background-position: 0 -32px; } /* Previous */ #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .previous { float: left; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .previous, #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .previous a:hover { background-image: url(../../images/portfolio_pane_thumb_pagination_previous.gif); } /* More */ #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .more { float: right; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .more, #portfolio-pane #portfolio-pane-body .portfolio-thumb-pagination .more a:hover { background-image: url(../../images/portfolio_pane_thumb_pagination_more.gif); } /* Portfolio Thumbs */ #portfolio-pane #portfolio-pane-body .portfolio-thumb-images { width: 255px; } #portfolio-pane #portfolio-pane-body .portfolio-thumb-images div { width: 77px; height: 77px; float: left; border: 1px solid #d2c6aa; background-color: #e8e2d3; } /* Portfolio Main Image */ #portfolio-pane #portfolio-pane-body .portfolio-main-image img { border: 1px solid #d2c6aa; } #portfolio-pane #portfolio-pane-body .portfolio-main-image div { display:inline } /* Portfolio Main Image Information */ #portfolio-pane #portfolio-pane-body .portfolio-main-image-information { width: 368px; height: 30px; border: 1px solid #d2c6aa; background-color: #e8e2d3; } #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .caption { width: 356px; padding: 8px 6px; } #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .caption-with-button { width: 276px; float: left; padding: 8px 6px; } #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .caption p, #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .caption-with-button p { font-size: 80%; margin: 0; line-height: 1em; } #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .button-visitwebsite { width: 75px; height: 19px; float: left; margin-top: 6px; background: url(../../images/portfolio_pane_button_visitwebsite.gif) 0 0 no-repeat; } #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .button-visitwebsite a { width: 75px; height: 19px; display: block; outline: none; } #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .button-visitwebsite a:hover { width: 75px; height: 19px; background: url(../../images/portfolio_pane_button_visitwebsite.gif) 0 -19px no-repeat; } #portfolio-pane #portfolio-pane-body .portfolio-main-image-information .button-visitwebsite span { display: none; visibility: hidden; } /* Portfolio Showcase */ #portfolio-showcase-introduction { width: 255px; height: 358px; background: url(../../images/portfolio_showcase_introduction.gif) 10px center no-repeat; } #portfolio-showcase-introduction p { display: none; visibility: hidden; } #portfolio-pane #portfolio-pane-body .portfolio-showcase-main-image img { border: 1px solid #d2c6aa; } #portfolio-pane #portfolio-pane-body .portfolio-showcase-main-image div { display:inline } #portfolio-filter .showcase-panel-container { width: 255px; padding: 7px 10px 0 10px; } #portfolio-filter .showcase-panel { width: 235px; height: 175px; padding: 0 10px 0 10px; background: url(../../images/filter_showcase_panel_background.gif) top left no-repeat;} #portfolio-filter .showcase-panel p { text-align: center; font-size: 80%; color: #fff; } #portfolio-filter .showcase-panel-title { width: 235px; height: 31px; background: url(../../images/filter_showcase_title_background.gif) top left repeat-x; } #portfolio-filter .showcase-panel-title div { width: 235px; height: 31px; background-position: center 8px; background-repeat: no-repeat; } #portfolio-filter .showcase-panel-title h3 { display: none; visibility: hidden; } #portfolio-filter .showcase-panel-title .recommended { background-image: url(../../images/filter_showcase_title_recommended.gif); } #portfolio-filter .showcase-panel-title .alternatively { background-image: url(../../images/filter_showcase_title_alternatively.gif); } #portfolio-filter .showcase-panel-button { width: 135px; height: 55px; margin: 0 auto 0 auto; } #portfolio-filter .showcase-panel-button div { width: 135px; height: 55px; background-position: top left; background-repeat: no-repeat; } #portfolio-filter .showcase-panel-button a { width: 135px; height: 55px; display: block; background-position: top left; background-repeat: no-repeat; } #portfolio-filter .showcase-panel-button a:hover { background-position: bottom left; } #portfolio-filter .showcase-panel-button span { display: none; visibility: hidden; } #portfolio-filter .showcase-panel-button .launchcooliris { background-image: url(../../images/filter_showcase_button_launchcooliris.gif); } #portfolio-filter .showcase-panel-button .launchflashversion { background-image: url(../../images/filter_showcase_button_launchflashversion.gif); } #portfolio-filter .showcase-panel-button .getcooliris { background-image: url(../../images/filter_showcase_button_getcooliris.gif); } /* Portfolio Interstitial */ #portfolio-introduction { width: 255px; height: 388px; margin-top:34px; background: url(../../images/portfolio_index_introduction.gif) 10px center no-repeat; } #portfolio-introduction p { display: none; visibility: hidden; } #portfolio-pane #portfolio-pane-body .browse-panel { width: 370px; } #portfolio-pane #portfolio-pane-body .browse-panel .button { width: 124px; float: left; } #portfolio-pane #portfolio-pane-body .browse-panel .button div { width: 124px; height: 124px; background-position: top left; background-repeat: no-repeat; } #portfolio-pane #portfolio-pane-body .browse-panel .button a { width: 124px; height: 124px; display: block; background-position: top left; background-repeat: no-repeat; } #portfolio-pane #portfolio-pane-body .browse-panel .button a:hover { background-position: bottom left; } #portfolio-pane #portfolio-pane-body .browse-panel .button span { display: none; visibility: hidden; } #portfolio-pane #portfolio-pane-body .browse-panel .button .browsebyclient { background-image: url(../../images/portfolio_index_button_byclient.gif); } #portfolio-pane #portfolio-pane-body .browse-panel .button .browsebytype { background-image: url(../../images/portfolio_index_button_bytype.gif); } #portfolio-pane #portfolio-pane-body .browse-panel .button .showcase { background-image: url(../../images/portfolio_index_button_showcase.gif); } #portfolio-pane #portfolio-pane-body .browse-panel .explanation { width: 236px; float: left; } #portfolio-pane #portfolio-pane-body .browse-panel .explanation p { font-size: 70%; } #portfolio-pane #portfolio-pane-body .browse-panel .explanation .title { width: 236px; height: 30px; background: url(../../images/portfolio_pane_title_background.gif) top left repeat-x; } #portfolio-pane #portfolio-pane-body .browse-panel .explanation .title div { width: 236px; height: 30px; background-position: 0 4px; background-repeat: no-repeat; } #portfolio-pane #portfolio-pane-body .browse-panel .explanation .title p { display: none; visibility: hidden; } #portfolio-pane #portfolio-pane-body .browse-panel .explanation .title .browsebyclient { background-image: url(../../images/portfolio_index_title_byclient.gif); } #portfolio-pane #portfolio-pane-body .browse-panel .explanation .title .browsebytype { background-image: url(../../images/portfolio_index_title_bytype.gif); } #portfolio-pane #portfolio-pane-body .browse-panel .explanation .title .showcase { background-image: url(../../images/portfolio_index_title_showcase.gif); } #portfolio-pane #portfolio-pane-body .portfolio-title .projectdetail { background-image: url(../../images/portfolio_pane_title_projectdetail.gif); } /* Portfolio Pane Loading */ #loading-portfolio-pane-graphic { position: absolute; top: 166px; left: 3px; width: 100px; height: 100px; background: url(../../images/portfolio_loading.gif) center center no-repeat; z-index: 10; } #portfolio-pane #portfolio-pane-body #loading-main-image { position: absolute; top: 0; left: 0; z-index: 5; width: 370px; height: 412px; margin-top: 10px; background-color: #f1eee5; opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); } #portfolio-pane #portfolio-pane-body #loading-main-image-graphic { position: absolute; top: 135px; left: 135px; width: 100px; height: 100px; background: url(../../images/portfolio_loading.gif) center center no-repeat; z-index: 6; } #portfolio-pane #portfolio-pane-body #loading-thumbs-client { position: absolute; top: 255px; left: 0; z-index: 7; width: 255px; height: 167px; background-color: #f1eee5; opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); } #portfolio-pane #portfolio-pane-body #loading-thumbs-client-graphic { position: absolute; top: 290px; left: 77px; width: 100px; height: 100px; background: url(../../images/portfolio_loading.gif) center center no-repeat; z-index: 8; } #portfolio-pane #portfolio-pane-body #loading-thumbs-type { position: absolute; top: 64px; left: 0px; z-index: 7; width: 255px; height: 358px; background-color: #f1eee5; opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); } #portfolio-pane #portfolio-pane-body #loading-thumbs-type-graphic { position: absolute; top: 193px; left: 77px; width: 100px; height: 100px; background: url(../../images/portfolio_loading.gif) center center no-repeat; z-index: 8; } #portfolio-pane #portfolio-pane-body #loading-thumbs-type-info { position: absolute; top: 355px; left: 0; z-index: 7; width: 255px; height: 67px; background-color: #f1eee5; opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); } #portfolio-pane #portfolio-pane-body #loading-thumbs-type-info-graphic { position: absolute; top: 339px; left: 77px; width: 100px; height: 100px; background: url(../../images/portfolio_loading.gif) center center no-repeat; z-index: 8; } #portfolio-pane #portfolio-pane-body #loading-information { position: absolute; top: 24px; left: 0; z-index: 9; width: 255px; height: 398px; /*margin-top:24px;*/ background-color: #f1eee5; opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); } /*#portfolio-pane #portfolio-pane-body #loading-main-image { position: absolute; top: 0; left: 0; z-index: 5; width: 368px; height: 410px; margin-top: 10px; background-color: #e8e2d3; border: 1px solid #d2c6aa; opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); } #portfolio-pane #portfolio-pane-body #loading-main-image-graphic { position: absolute; top: 135px; left: 135px; width: 100px; height: 100px; background: url(../../images/portfolio_loading.gif) center center no-repeat; z-index: 6; }*/ /* Showcase Flash version Pane */ #embed-box { position: absolute; top: 55px; left: 15px; z-index: 10; width: 940px; height: 432px; background-color: #121212; } #embed-box .embed-box-header { width: 920px; height: 22px; background: url(../../images/showcase_embed_header.gif) top left repeat-x; padding: 3px 10px; } #embed-box .close-button { width: 80px; height: 22px; float: right; background: url(../../images/showcase_embed_close_button.gif) top left no-repeat; } #embed-box .close-button a { width: 80px; height: 22px; display: block; background: url(../../images/showcase_embed_close_button.gif) top left no-repeat; } #embed-box .close-button a:hover { background-position: bottom left; } #embed-box .close-button span { display: none; visibility: hidden; } #cooliris-wall { width: 940px; height: 404px; }