Building a List/Grid View Switcher with jQuery

+ADw-p+AD4-A fairly common web interface feature is the dynamic List/Grid view switcher. On product pages or blog archives you???ll sometimes find buttons to change the layout from display List to smaller Grid. In this tutorial I???ve built a simpler example using basic CSS and some jQuery commands.+ADw-/p+AD4 +ADw-p+AD4-I???ll be using interface elements??which include buttons and thumbnail photos. Feel free to demo the code yourself and try out a similar experience on your own website. This is a tricky effect to nail down, but when done properly your users will love the unique experience.+ADw-/p+AD4 +ADw-p+AD4APA-img class+AD0AIg-aligncenter wp-image-2658 +ACI src+AD0AIg-http://androidtoall.com/wp-content/uploads/grid-list-1-300x200.jpg+ACI alt+AD0AIg-grid-list-1+ACI width+AD0AIg-704+ACI height+AD0AIg-470+ACI srcset+AD0AIg-http://androidtoall.com/wp-content/uploads/grid-list-1-300x200.jpg 300w, http://androidtoall.com/wp-content/uploads/grid-list-1.jpg 600w+ACI sizes+AD0AIg(max-width: 704px) 100vw, 704px+ACI /+AD4APA-/p+AD4 +ADw-div id+AD0AIg-toc+AF8-container+ACI class+AD0AIg-toc+AF8-light+AF8-blue no+AF8-bullets+ACIAPgA8-p class+AD0AIg-toc+AF8-title+ACIAPg-Contents+ADw-/p+AD4APA-ul class+AD0AIg-toc+AF8-list+ACIAPgA8-li+AD4APA-a href+AD0AIgAj-Coding+AF8-the+AF8-Basic+AF8-HTML+ACIAPgA8-span class+AD0AIg-toc+AF8-number toc+AF8-depth+AF8-1+ACIAPg-1+ADw-/span+AD4 Coding the Basic HTML+ADw-/a+AD4APA-/li+AD4APA-li+AD4APA-a href+AD0AIgAj-Looking+AF8-at+AF8-CSS+AF8-Styles+ACIAPgA8-span class+AD0AIg-toc+AF8-number toc+AF8-depth+AF8-1+ACIAPg-2+ADw-/span+AD4 Looking at CSS Styles+ADw-/a+AD4APA-/li+AD4APA-li+AD4APA-a href+AD0AIgAj-jQuery+AF8-Switch+AF8-Effects+ACIAPgA8-span class+AD0AIg-toc+AF8-number toc+AF8-depth+AF8-1+ACIAPg-3+ADw-/span+AD4 jQuery Switch Effects+ADw-/a+AD4APA-/li+AD4APA-li+AD4APA-a href+AD0AIgAj-Updating+AF8-Products+AF8-List+AF8-Display+ACIAPgA8-span class+AD0AIg-toc+AF8-number toc+AF8-depth+AF8-1+ACIAPg-4+ADw-/span+AD4 Updating Products List Display+ADw-/a+AD4APA-/li+AD4APA-/ul+AD4APA-/div+AD4 +ADw-h3+AD4APA-span id+AD0AIg-Coding+AF8-the+AF8-Basic+AF8-HTML+ACIAPg-Coding the Basic HTML+ADw-/span+AD4APA-/h3+AD4 +ADw-p+AD4-The main page isn???t very complicated but does contain a lot of repetitive code. Towards the top I???ve included two links with the IDs L+ADw-strong+AD4-ist view+ADw-/strong+AD4??and G+ADw-strong+AD4-rid view+ADw-/strong+AD4.+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f566983058535+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ACY-lt+ADs-span class+AD0AIg-list-style-buttons+ACIAJg-gt+ADs +ACY-lt+ADs-a href+AD0AIgAjACI id+AD0AIg-gridview+ACI class+AD0AIg-switcher+ACIAJg-gt+ADsAJg-lt+ADs-img src+AD0AIg-images/grid-view.png+ACI alt+AD0AIg-Grid+ACIAJg-gt+ADsAJg-lt+ADs-/a+ACY-gt+ADs +ACY-lt+ADs-a href+AD0AIgAjACI id+AD0AIg-listview+ACI class+AD0AIg-switcher active+ACIAJg-gt+ADsAJg-lt+ADs-img src+AD0AIg-images/list-view-active.png+ACI alt+AD0AIg-List+ACIAJg-gt+ADsAJg-lt+ADs-/a+ACY-gt+ADs +ACY-lt+ADs-/span+ACY-gt+ADsAPA-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f566983058535-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f566983058535-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f566983058535-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f566983058535-4+ACIAPg-4+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f566983058535-1+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-span +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-list-style-buttons+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f566983058535-2+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-href+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAiACMAIgA8-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-id+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-gridview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-switcher+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-img +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-src+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/grid-view.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-alt+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-Grid+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f566983058535-3+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-href+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAiACMAIgA8-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-id+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-listview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-switcher active+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-img +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-src+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/list-view-active.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-alt+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-List+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f566983058535-4+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0010 seconds+AF0 --+AD4 +ADw-p+AD4-We???ll bind a click event handler onto these two links later on. Then we can determine which display block the user clicks and how we need to render the page. Afterwards I???ve setup an unordered list with each list item containing a different product to display. The list item element is used as a block which contains more detailed elements.+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f56d596675269+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ACY-lt+ADsAIQ--- row 1 --+ACY-gt+ADs +ACY-lt+ADs-li class+AD0AIg-clearfix+ACIAJg-gt+ADs +ACY-lt+ADs-section class+AD0AIg-left+ACIAJg-gt+ADs +ACY-lt+ADs-img src+AD0AIg-images/products/list-default-thumb.png+ACI alt+AD0AIg-default thumb+ACI class+AD0AIg-thumb+ACIAJg-gt+ADs +ACY-lt+ADs-h3+ACY-gt+ADs-Product Name+ACY-lt+ADs-/h3+ACY-gt+ADs +ACY-lt+ADs-span class+AD0AIg-meta+ACIAJg-gt+ADs-Product ID: 543J423+ACY-lt+ADs-/span+ACY-gt+ADs +ACY-lt+ADs-/section+ACY-gt+ADs +ACY-lt+ADs-section class+AD0AIg-right+ACIAJg-gt+ADs +ACY-lt+ADs-span class+AD0AIg-price+ACIAJg-gt+ADsAJA-45.00+ACY-lt+ADs-/span+ACY-gt+ADs +ACY-lt+ADs-span class+AD0AIg-darkview+ACIAJg-gt+ADs +ACY-lt+ADs-a href+AD0AIg-javascript:void(0)+ADsAIg class+AD0AIg-firstbtn+ACIAJg-gt+ADsAJg-lt+ADs-img src+AD0AIg-images/read-more-btn.png+ACI alt+AD0AIg-Read More...+ACIAJg-gt+ADsAJg-lt+ADs-/a+ACY-gt+ADs +ACY-lt+ADs-a href+AD0AIg-javascript:void(0)+ADsAIgAm-gt+ADsAJg-lt+ADs-img src+AD0AIg-images/add-to-cart-btn.png+ACI alt+AD0AIg-Add to Cart+ACIAJg-gt+ADsAJg-lt+ADs-/a+ACY-gt+ADs +ACY-lt+ADs-/span+ACY-gt+ADs +ACY-lt+ADs-/section+ACY-gt+ADs +ACY-lt+ADs-/li+ACY-gt+ADsAPA-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-4+ACIAPg-4+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-5+ACIAPg-5+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-6+ACIAPg-6+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-7+ACIAPg-7+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-8+ACIAPg-8+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-9+ACIAPg-9+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-10+ACIAPg-10+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-11+ACIAPg-11+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-12+ACIAPg-12+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-13+ACIAPg-13+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-14+ACIAPg-14+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-15+ACIAPg-15+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f56d596675269-16+ACIAPg-16+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-1+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAhADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg---+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-row+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-1+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg---+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-2+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-clearfix+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-3+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-section +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-left+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-4+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-img +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-src+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/products/list-default-thumb.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-alt+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-default thumb+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-thumb+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-5+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-h3+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-Product +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-Name+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-h3+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-6+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-span +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-meta+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-Product +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-ID+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-543J423+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-7+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-8+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-9+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-section +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-right+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-10+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-span +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-price+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-45.00+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-11+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-span +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-darkview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-12+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-href+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-javascript:void(0)+ADsAIgA8-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-class+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-firstbtn+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-img +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-src+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/read-more-btn.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-alt+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-Read More...+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-13+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPgAm-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAJg-nbsp+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-href+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-javascript:void(0)+ADsAIgA8-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-img +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-src+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/add-to-cart-btn.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-alt+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-Add to Cart+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-14+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-15+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f56d596675269-16+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPgAm-lt+ADsAPA-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-li+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAm-gt+ADsAPA-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0018 seconds+AF0 --+AD4 +ADw-p+AD4-This example only includes the first row but you can copy/paste to build more. In my demo I???ve used 9 different product rows containing the left and right columns.+ADw-/p+AD4 +ADw-p+AD4-Just to point out I???ve wrapped the product buttons in a span with the class??+ADw-strong+AD4.darkview+ADw-/strong+AD4. This is used in the grid layout to hide the big round buttons until you hover over a product display. But in the default list view it doesn???t affect anything. Notice, however, that it???s very important we setup the HTML properly from the start.+ADw-/p+AD4 +ADw-h3+AD4APA-span id+AD0AIg-Looking+AF8-at+AF8-CSS+AF8-Styles+ACIAPg-Looking at CSS Styles+ADw-/span+AD4APA-/h3+AD4 +ADw-p+AD4-My project outline is to adapt each list item based on the UL???s current class. Using jQuery we can change it between list and grid, then apply styles for each. The list is setup first by default and I???ve kept all the related selectors in the same block of code.+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f570331316439+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ /+ACoAKg list view +ACoAKg-/ ul.list +AHs list-style: none+ADs width: 100+ACUAOw +AH0 ul.list li +AHs display: block+ADs background: +ACM-c9d0d1+ADs padding: 10px 15px+ADs +AH0 ul.list li.alt +AHs background: +ACM-d7dfe0+ADs +AH0 ul.list li section.left +AHs display: block+ADs float: left+ADs width: 350px+ADs position: relative+ADs padding-left: 20px+ADs +AH0 ul.list li section.right +AHs display: block+ADs float: right+ADs margin-right: 10px+ADs width: 250px+ADs text-align: right+ADs +AH0 ul.list li section.left img.thumb +AHs float: left+ADs margin-right: 10px+ADs +AH0 ul.list li section.left img.featured-banner +AHs position: absolute+ADs left: -18px+ADs top: 35px+ADs +AH0 ul.list li section.left h3 +AHs font-family: +ACI-Trebuchet MS+ACI, Arial, sans-serif+ADs font-weight: bold+ADs text-transform: uppercase+ADs color: +ACM-707375+ADs font-size: 1.4em+ADs line-height: 1.6em+ADs +AH0 ul.list li section.left span.meta +AHs color: +ACM-93989b+ADs font-weight: normal+ADs font-size: 1.1em+ADs +AH0 ul.list li section.right span.price +AHs font-weight: bold+ADs display: block+ADs margin-bottom: 15px+ADs color: +ACM-ad3939+ADs font-size: 1.6em+ADs text-align: right+ADs +AH0 ul.list li section.right a.firstbtn +AHs margin-right: 7px+ADs +AH0APA-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-4+ACIAPg-4+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-5+ACIAPg-5+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-6+ACIAPg-6+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-7+ACIAPg-7+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-8+ACIAPg-8+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-9+ACIAPg-9+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-10+ACIAPg-10+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-11+ACIAPg-11+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-12+ACIAPg-12+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-13+ACIAPg-13+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-14+ACIAPg-14+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-15+ACIAPg-15+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-16+ACIAPg-16+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-17+ACIAPg-17+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f570331316439-18+ACIAPg-18+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-1+ACIAPgA8-span class+AD0AIg-crayon-c+ACIAPg-/+ACoAKg list view +ACoAKg-/+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-2+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-list+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-list+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-style+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-none+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-width+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-100+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgAlADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-3+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-background+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-c9d0d1+ADs padding: 10px 15px+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-4+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-5+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-li+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-alt+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-background+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-d7dfe0+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-6+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-7+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-float+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-width+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-350px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-position+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-relative+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-padding+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-20px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-8+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-float+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-10px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-width+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-250px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-text+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-align+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-9+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-10+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-left +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-img+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-thumb+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-float+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-10px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-11+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-left +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-img+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-featured+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-banner+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-position+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-absolute+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-18px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-top+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-35px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-12+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-13+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-left +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-h3+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-font+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-family+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-Trebuchet MS+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-Arial+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-sans+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-serif+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-font+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-weight+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-bold+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-text+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-transform+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-uppercase+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-color+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-707375+ADs font-size: 1.4em+ADs line-height: 1.6em+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-14+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-left +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-meta+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-color+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-93989b+ADs font-weight: normal+ADs font-size: 1.1em+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-15+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-16+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-right +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-price+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-font+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-weight+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-bold+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-bottom+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-15px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-color+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-ad3939+ADs font-size: 1.6em+ADs text-align: right+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-17+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f570331316439-18+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-list +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-firstbtn+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-7px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0034 seconds+AF0 --+AD4 +ADw-p+AD4-Now the grid view is very similar with the exception of our dark hover menu. The title, product ID, and price elements are styled very similar to the original list design. I???m also switching out thumbnail images to display larger grid blocks.+ADw-/p+AD4 +ADw-p+AD4-A particularly interesting bit of code is the darkview class for our grid layout. This span is originally set to 0 opacity and transitions into full display. For some people this layout may be annoying or intimidating ??? but there???s always a workaround to adapt this functionality for your own website.+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f573810899460+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ /+ACoAKg grid view +ACoAKg-/ ul.grid +AHs list-style: none+ADs margin: 0 auto+ADs padding-left: 25px+ADs +AH0 ul.grid li +AHs position: relative+ADs display: block+ADs float: left+ADs width: 220px+ADs height: 200px+ADs border-right: 1px solid +ACM-b6bdbe+ADs padding: 5px 22px+ADs margin-bottom: 20px+ADs box-sizing: border-box+ADs -moz-box-sizing: border-box+ADs -webkit-box-sizing: border-box+ADs +AH0 ul.grid li.third +AHs border: 0+ADs +AH0 ul.grid li section.left +AHs position: relative+ADs +AH0 ul.grid li section.right +AHs /+ACo nothing +ACo-/ +AH0 ul.grid li section.left img.featured-banner +AHs position: absolute+ADs top: 0+ADs +AH0 ul.grid li section.left h3 +AHs font-family: +ACI-Trebuchet MS+ACI, Arial, sans-serif+ADs font-weight: bold+ADs text-transform: uppercase+ADs color: +ACM-707375+ADs font-size: 1.4em+ADs line-height: 1.5em+ADs +AH0 ul.grid li section.left span.meta +AHs display: block+ADs color: +ACM-93989b+ADs font-weight: normal+ADs font-size: 1.1em+ADs margin-bottom: 7px+ADs +AH0 ul.grid li section.right span.price +AHs font-weight: bold+ADs display: block+ADs margin-bottom: 5px+ADs color: +ACM-ad3939+ADs font-size: 1.75em+ADs +AH0 ul.grid li section.right span.darkview +AHs opacity: 0+ADs margin: 0+ADs position: absolute+ADs top: 0+ADs left: 0+ADs width: 190px+ADs height: 200px+ADs margin: 0 15px+ADs border-radius: 6px+ADs background: rgba(40, 45, 55, 0.75)+ADs overflow: hidden+ADs text-align: center+ADs padding-top: 35px+ADs box-sizing: border-box+ADs -moz-box-sizing: border-box+ADs -webkit-box-sizing: border-box+ADs transition: opacity 0.2s linear 0s+ADs -webkit-transition: opacity 0.2s linear 0s+ADs -moz-transition: opacity 0.25s linear 0s+ADs -o-transition: opacity 0.25s linear 0s+ADs +AH0 ul.grid li:hover section.right span.darkview +AHs opacity: 1+ADs +AH0 ul.grid li section.right span.darkview a.firstbtn +AHs display: block+ADs margin-bottom: 10px+ADs +AH0APA-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-4+ACIAPg-4+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-5+ACIAPg-5+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-6+ACIAPg-6+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-7+ACIAPg-7+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-8+ACIAPg-8+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-9+ACIAPg-9+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-10+ACIAPg-10+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-11+ACIAPg-11+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-12+ACIAPg-12+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-13+ACIAPg-13+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-14+ACIAPg-14+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-15+ACIAPg-15+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-16+ACIAPg-16+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-17+ACIAPg-17+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-18+ACIAPg-18+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-19+ACIAPg-19+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-20+ACIAPg-20+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-21+ACIAPg-21+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-22+ACIAPg-22+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-23+ACIAPg-23+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-24+ACIAPg-24+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-25+ACIAPg-25+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-26+ACIAPg-26+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-27+ACIAPg-27+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-28+ACIAPg-28+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-29+ACIAPg-29+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-30+ACIAPg-30+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-31+ACIAPg-31+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-32+ACIAPg-32+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-33+ACIAPg-33+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-34+ACIAPg-34+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-35+ACIAPg-35+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-36+ACIAPg-36+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-37+ACIAPg-37+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-38+ACIAPg-38+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-39+ACIAPg-39+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f573810899460-40+ACIAPg-40+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-1+ACIAPgA8-span class+AD0AIg-crayon-c+ACIAPg-/+ACoAKg grid view +ACoAKg-/+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-2+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-grid+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-list+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-style+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-none+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-auto+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-padding+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-25px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-3+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-position+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-relative+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-float+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-width+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-220px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-height+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-200px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-border+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-1px+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-solid+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-b6bdbe+ADs padding: 5px 22px+ADs margin-bottom: 20px+ADs box-sizing: border-box+ADs -moz-box-sizing: border-box+ADs -webkit-box-sizing: border-box+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-4+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-li+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-third+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-border+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-5+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-6+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-position+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-relative+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-7+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-right+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-/+ACo nothing +ACo-/+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-8+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-9+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-left +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-img+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-featured+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-banner+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-position+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-absolute+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-top+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-10+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-11+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-left +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-h3+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-font+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-family+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-Trebuchet MS+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-Arial+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-sans+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-serif+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-font+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-weight+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-bold+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-text+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-transform+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-uppercase+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-color+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-707375+ADs font-size: 1.4em+ADs line-height: 1.5em+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-12+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-left +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-meta+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-color+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-93989b+ADs font-weight: normal+ADs font-size: 1.1em+ADs margin-bottom: 7px+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-13+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-14+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-right +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-price+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-font+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-weight+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-bold+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-bottom+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-5px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-color+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-p+ACIAPgAj-ad3939+ADs font-size: 1.75em+ADs +AH0APA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-15+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-16+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-right +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-darkview+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-17+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-opacity+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-18+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-19+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-position+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-absolute+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-20+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-top+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-21+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-left+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-22+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-width+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-190px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-23+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-height+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-200px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-24+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-15px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-25+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-border+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-radius+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-6px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-26+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-background+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-rgba+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-40+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-45+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-55+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0.75+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-27+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-overflow+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-hidden+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-28+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-text+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-align+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-center+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-29+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-padding+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-top+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-35px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-30+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-box+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-sizing+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-border+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-box+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-31+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-moz+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-box+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-sizing+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-border+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-box+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-32+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-webkit+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-box+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-sizing+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-border+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-box+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-33+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-transition+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-opacity+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0.2s+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-linear+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0s+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-34+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-webkit+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-transition+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-opacity+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0.2s+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-linear+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0s+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-35+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-moz+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-transition+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-opacity+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0.25s+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-linear+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0s+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-36+ACIAPgA8-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-o+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-transition+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-opacity+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0.25s+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-linear+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-0s+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-37+ACIAPgA8-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-38+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-li+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-hover +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-right +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-darkview+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-opacity+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-1+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-39+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f573810899460-40+ACIAPgA8-span class+AD0AIg-crayon-v+ACIAPg-ul+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-grid +ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-li +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-section+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-right +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-span+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-darkview+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-a+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-i+ACIAPg-firstbtn+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-display+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-block+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-margin+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg--+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-bottom+ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPg:+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-cn+ACIAPg-10px+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0050 seconds+AF0 --+AD4 +ADw-p+AD4APA-/p+AD4 +ADw-h3+AD4APA-span id+AD0AIg-jQuery+AF8-Switch+AF8-Effects+ACIAPg-jQuery Switch Effects+ADw-/span+AD4APA-/h3+AD4 +ADw-p+AD4-I am including the latest jQuery release directly from??+ADw-a href+AD0AIg-http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js+ACIAPg-Google???s cloud hosting+ADw-/a+AD4??for developers. I then created a new script.js file and we can write all our main function code inside. Let???s look at the opening bind method:+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f576057847242+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ACQ(document).ready(function()+AHs +ACQ(+ACI-a.switcher+ACI).bind(+ACI-click+ACI, function(e)+AHs e.preventDefault()+ADsAPA-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f576057847242-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f576057847242-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f576057847242-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f576057847242-4+ACIAPg-4+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f576057847242-1+ACIAPgA8-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-document+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-ready+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-function+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f576057847242-2+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f576057847242-3+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-a.switcher+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-bind+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-click+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-function+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-e+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f576057847242-4+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-e+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-preventDefault+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0004 seconds+AF0 --+AD4 +ADw-p+AD4-Once the document is loaded jQuery will bind a click event handler to any anchor links with the class??+ADw-strong+AD4.switcher+ADw-/strong+AD4. We want to disable linking to anything and prevent the default browser action. Then afterwards I go on to setup a few variables which will save us time writing out selectors.+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f578439453765+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ var theid +AD0 +ACQ(this).attr(+ACI-id+ACI)+ADs var theproducts +AD0 +ACQ(+ACI-ul+ACM-products+ACI)+ADs var classNames +AD0 +ACQ(this).attr('class').split(' ')+ADs var gridthumb +AD0 +ACI-images/products/grid-default-thumb.png+ACIAOw var listthumb +AD0 +ACI-images/products/list-default-thumb.png+ACIAOwA8-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f578439453765-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f578439453765-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f578439453765-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f578439453765-4+ACIAPg-4+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f578439453765-5+ACIAPg-5+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f578439453765-6+ACIAPg-6+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f578439453765-1+ACIAPgA8-span class+AD0AIg-crayon-t+ACIAPg-var+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theid+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-r+ACIAPg-this+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-id+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f578439453765-2+ACIAPgA8-span class+AD0AIg-crayon-t+ACIAPg-var+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theproducts+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-ul+ACM-products+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f578439453765-3+ACIAPgA8-span class+AD0AIg-crayon-t+ACIAPg-var+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-classNames+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-r+ACIAPg-this+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPg'class'+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-split+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPg' '+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f578439453765-4+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f578439453765-5+ACIAPgA8-span class+AD0AIg-crayon-t+ACIAPg-var+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-gridthumb+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/products/grid-default-thumb.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f578439453765-6+ACIAPgA8-span class+AD0AIg-crayon-t+ACIAPg-var+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-listthumb+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/products/list-default-thumb.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0008 seconds+AF0 --+AD4 +ADw-p+AD4-We need the id in order to determine which view style we???re switching over to display. Also the two thumbnail image URLs help to update the grid/list view later on.+ADw-/p+AD4

Updating Products List Display

+ADw-p+AD4-The final portion of my code uses a couple basic if/else clauses. First we check if the button clicked has an active class. This would mean the user is already viewing the desired layout and we don???t need to perform anything. Otherwise we need to check the button ID and switchup the layout accordingly.+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f57a937785525+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ if(+ACQ(this).hasClass(+ACI-active+ACI)) +AHs // if currently clicked button has the active class // then we do nothing+ACE return false+ADs +AH0 else +AHs // otherwise we are clicking on the inactive button // and in the process of switching views+ACEAPA-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57a937785525-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57a937785525-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57a937785525-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57a937785525-4+ACIAPg-4+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57a937785525-5+ACIAPg-5+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57a937785525-6+ACIAPg-6+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57a937785525-7+ACIAPg-7+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57a937785525-1+ACIAPgA8-span class+AD0AIg-crayon-st+ACIAPg-if+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-r+ACIAPg-this+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-hasClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-active+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57a937785525-2+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// if currently clicked button has the active class+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57a937785525-3+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// then we do nothing+ACEAPA-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57a937785525-4+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-st+ACIAPg-return+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-false+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57a937785525-5+ACIAPgA8-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-st+ACIAPg-else+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57a937785525-6+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// otherwise we are clicking on the inactive button+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57a937785525-7+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// and in the process of switching views+ACEAPA-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0005 seconds+AF0 --+AD4 +ADw-p+AD4-Inside the else clause I???m performing two more logic checks. First we see if the user has clicked??+ADw-strong+AD4-grid view+ADw-/strong+AD4??and update the current list objects to display in a grid-style. Otherwise we switch back from the grids into a list format.+ADw-/p+AD4 +ADw-p+AD4-The lines of code go through a few different functions. First we update the currently active button and change the images to highlight our new display. Then we remove the previous grid/list class and apply our updated selection, along with changing all of the thumbnail images.+ADw-/p+AD4APAAh--- Crayon Syntax Highlighter v+AF8-2.7.2+AF8-beta --+AD4 +ADw-div id+AD0AIg-crayon-5a13f98b4f57c565029024+ACI class+AD0AIg-crayon-syntax crayon-theme-coy crayon-font-monaco crayon-os-pc print-yes notranslate+ACI data-settings+AD0AIg minimize scroll-mouseover+ACI style+AD0AIg margin-top: 12px+ADs margin-bottom: 12px+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ +ADw-div class+AD0AIg-crayon-toolbar+ACI data-settings+AD0AIg mouseover overlay hide delay+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-span class+AD0AIg-crayon-title+ACIAPgA8-/span+AD4 +ADw-div class+AD0AIg-crayon-tools+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs-height: 21px +ACE-important+ADs line-height: 21px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-button crayon-nums-button+ACI title+AD0AIg-Toggle Line Numbers+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-plain-button+ACI title+AD0AIg-Toggle Plain Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-wrap-button+ACI title+AD0AIg-Toggle Line Wrap+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-expand-button+ACI title+AD0AIg-Expand Code+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-copy-button+ACI title+AD0AIg-Copy+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-button crayon-popup-button+ACI title+AD0AIg-Open Code In New Window+ACIAPgA8-div class+AD0AIg-crayon-button-icon+ACIAPgA8-/div+AD4APA-/div+AD4APA-/div+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-info+ACI style+AD0AIg-min-height: 19.6px +ACE-important+ADs line-height: 19.6px +ACE-important+ADsAIgA+ADw-/div+AD4 +ADw-div class+AD0AIg-crayon-plain-wrap+ACIAPgA8-textarea wrap+AD0AIg-soft+ACI class+AD0AIg-crayon-plain print-no+ACI data-settings+AD0AIg-dblclick+ACI readonly style+AD0AIg--moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADs font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ if(theid +AD0APQ +ACI-gridview+ACI) +AHs +ACQ(this).addClass(+ACI-active+ACI)+ADs +ACQ(+ACIAIw-listview+ACI).removeClass(+ACI-active+ACI)+ADs +ACQ(+ACIAIw-listview+ACI).children(+ACI-img+ACI).attr(+ACI-src+ACI,+ACI-images/list-view.png+ACI)+ADs var theimg +AD0 +ACQ(this).children(+ACI-img+ACI)+ADs theimg.attr(+ACI-src+ACI,+ACI-images/grid-view-active.png+ACI)+ADs // remove the list class and change to grid theproducts.removeClass(+ACI-list+ACI)+ADs theproducts.addClass(+ACI-grid+ACI)+ADs // update all thumbnails to larger size +ACQ(+ACI-img.thumb+ACI).attr(+ACI-src+ACI,gridthumb)+ADs +AH0 else if(theid +AD0APQ +ACI-listview+ACI) +AHs +ACQ(this).addClass(+ACI-active+ACI)+ADs +ACQ(+ACIAIw-gridview+ACI).removeClass(+ACI-active+ACI)+ADs +ACQ(+ACIAIw-gridview+ACI).children(+ACI-img+ACI).attr(+ACI-src+ACI,+ACI-images/grid-view.png+ACI)+ADs var theimg +AD0 +ACQ(this).children(+ACI-img+ACI)+ADs theimg.attr(+ACI-src+ACI,+ACI-images/list-view-active.png+ACI)+ADs // remove the grid view and change to list theproducts.removeClass(+ACI-grid+ACI) theproducts.addClass(+ACI-list+ACI)+ADs // update all thumbnails to smaller size +ACQ(+ACI-img.thumb+ACI).attr(+ACI-src+ACI,listthumb)+ADs +AH0APA-/textarea+AD4APA-/div+AD4 +ADw-div class+AD0AIg-crayon-main+ACI style+AD0AIgAiAD4 +ADw-table class+AD0AIg-crayon-table+ACIAPg +ADw-tr class+AD0AIg-crayon-row+ACIAPg +ADw-td class+AD0AIg-crayon-nums +ACI data-settings+AD0AIg-show+ACIAPg +ADw-div class+AD0AIg-crayon-nums-content+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADsAIgA+ADw-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-1+ACIAPg-1+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-2+ACIAPg-2+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-3+ACIAPg-3+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-4+ACIAPg-4+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-5+ACIAPg-5+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-6+ACIAPg-6+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-7+ACIAPg-7+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-8+ACIAPg-8+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-9+ACIAPg-9+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-10+ACIAPg-10+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-11+ACIAPg-11+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-12+ACIAPg-12+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-13+ACIAPg-13+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-14+ACIAPg-14+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-15+ACIAPg-15+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-16+ACIAPg-16+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-17+ACIAPg-17+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-18+ACIAPg-18+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-19+ACIAPg-19+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-20+ACIAPg-20+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-21+ACIAPg-21+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-22+ACIAPg-22+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-23+ACIAPg-23+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-24+ACIAPg-24+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-25+ACIAPg-25+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-26+ACIAPg-26+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-27+ACIAPg-27+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-28+ACIAPg-28+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-29+ACIAPg-29+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-30+ACIAPg-30+ADw-/div+AD4APA-div class+AD0AIg-crayon-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-31+ACIAPg-31+ADw-/div+AD4APA-div class+AD0AIg-crayon-num crayon-striped-num+ACI data-line+AD0AIg-crayon-5a13f98b4f57c565029024-32+ACIAPg-32+ADw-/div+AD4APA-/div+AD4 +ADw-/td+AD4 +ADw-td class+AD0AIg-crayon-code+ACIAPgA8-div class+AD0AIg-crayon-pre+ACI style+AD0AIg-font-size: 14px +ACE-important+ADs line-height: 17px +ACE-important+ADs -moz-tab-size:4+ADs -o-tab-size:4+ADs -webkit-tab-size:4+ADs tab-size:4+ADsAIgA+ADw-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-1+ACIAPgA8-span class+AD0AIg-crayon-st+ACIAPg-if+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theid+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9AD0APA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-gridview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-2+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-r+ACIAPg-this+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-addClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-active+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-3+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAiACM-listview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-removeClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-active+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-4+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-5+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAiACM-listview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-children+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-img+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-src+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/list-view.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-6+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-7+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-var+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theimg+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-r+ACIAPg-this+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-children+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-img+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-8+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theimg+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-src+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/grid-view-active.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-9+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-10+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// remove the list class and change to grid+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-11+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theproducts+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-removeClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-list+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-12+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theproducts+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-addClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-grid+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-13+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-14+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// update all thumbnails to larger size+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-15+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-img.thumb+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-src+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-gridthumb+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-16+ACIAPgA8-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-17+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-18+ACIAPgA8-span class+AD0AIg-crayon-st+ACIAPg-else+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-st+ACIAPg-if+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theid+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9AD0APA-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-listview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgB7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-19+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-r+ACIAPg-this+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-addClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-active+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-20+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAiACM-gridview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-removeClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-active+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-21+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-22+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAiACM-gridview+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-children+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-img+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-src+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/grid-view.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-23+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-24+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-t+ACIAPg-var+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theimg+ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-o+ACIAPgA9ADw-/span+AD4APA-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-r+ACIAPg-this+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-children+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-img+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-25+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theimg+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-src+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-images/list-view-active.png+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-26+ACIAPgAm-nbsp+ADsAPA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-27+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// remove the grid view and change to list+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-28+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theproducts+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-removeClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-grid+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-29+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-theproducts+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-addClass+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-list+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-30+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-c+ACIAPg-// update all thumbnails to smaller size+ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-31+ACIAPgA8-span class+AD0AIg-crayon-h+ACIAPg +ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgAkADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-img.thumb+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg.+ADw-/span+AD4APA-span class+AD0AIg-crayon-e+ACIAPg-attr+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg(+ADw-/span+AD4APA-span class+AD0AIg-crayon-s+ACIAPgAi-src+ACIAPA-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg,+ADw-/span+AD4APA-span class+AD0AIg-crayon-v+ACIAPg-listthumb+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPg)+ADw-/span+AD4APA-span class+AD0AIg-crayon-sy+ACIAPgA7ADw-/span+AD4APA-/div+AD4APA-div class+AD0AIg-crayon-line crayon-striped-line+ACI id+AD0AIg-crayon-5a13f98b4f57c565029024-32+ACIAPgA8-span class+AD0AIg-crayon-sy+ACIAPgB9ADw-/span+AD4APA-/div+AD4APA-/div+AD4APA-/td+AD4 +ADw-/tr+AD4 +ADw-/table+AD4 +ADw-/div+AD4 +ADw-/div+AD4 +ADwAIQ--- +AFs-Format Time: 0.0025 seconds+AF0 --+AD4 +ADw-p+AD4-It does seem confusing without context but all the code is fairly straightforward. Much of the DOM manipulation has to do with replacing classes and image src attributes. But if you wanted to get fancy it???s a simple process to further animate fade in/out effects on the layout change. Yet for a basic switcher like this you don???t always need animations.+ADw-/p+AD4 +ADw-script type+AD0AIg-text/javascript+ACIAPg jQuery(document).ready(function(+ACQ) +AHs +ACQ.post('http://androidtoall.com/wp-admin/admin-ajax.php', +AHs-action: 'wpt+AF8-view+AF8-count', id: '2657'+AH0)+ADs +AH0)+ADs +ADw-/script+AD4-