/* ui-li-aside has class .ui-li-desc as well so we have to override some things. */\n
.ui-shopbox .ui-listview .ui-li-aside {\n
padding: .125em .625em;\n
width: auto;\n
min-height: 0;\n
top: 0;\n
left: auto;\n
bottom: auto;\n
-webkit-border-top-right-radius: inherit;\n
border-top-right-radius: inherit;\n
-webkit-border-bottom-left-radius: inherit;\n
border-bottom-left-radius: inherit;\n
-webkit-border-bottom-right-radius: 0;\n
border-bottom-right-radius: 0;\n
}\n
/* If you want to add shadow, don\'t kill the focus style. */\n
.ui-shopbox .ui-listview li {\n
-moz-box-shadow: 0px 0px 9px #111;\n
-webkit-box-shadow: 0px 0px 9px #111;\n
box-shadow: 0px 0px 9px #111;\n
}\n
/* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */\n
.ui-shopbox .ui-listview li > .ui-btn:hover {\n
-moz-box-shadow: 0px 0px 12px #33ccff;\n
-webkit-box-shadow: 0px 0px 12px #33ccff;\n
box-shadow: 0px 0px 12px #33ccff;\n
}\n
/* Animate focus and hover style, and resizing. */\n
.ui-shopbox .ui-listview li,\n
.ui-shopbox .ui-listview .ui-btn {\n
-webkit-transition: all 500ms ease;\n
-moz-transition: all 500ms ease;\n
-o-transition: all 500ms ease;\n
-ms-transition: all 500ms ease;\n
transition: all 500ms ease;\n
}\n
}\n
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */\n
@media (min-width: 63.75em) {\n
.ui-shopbox .ui-shopbox-wrapper {\n
padding: .625em; /* 10px */\n
}\n
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.\n
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */\n
.ui-shopbox .ui-listview {\n
max-width: 62.5em; /* 1000px */\n
margin: 0 auto;\n
}\n
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),\n
but we stick to percentage values for demo purposes. */\n
.ui-shopbox .ui-listview li {\n
width: 23%;\n
height: 230px;\n
margin: .625em 1%;\n
}\n
}\n
\n
/* Third breakpoint is 77.5em (1240px). 5 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */\n
@media (min-width: 77.5em) {\n
.ui-shopbox .ui-shopbox-wrapper {\n
padding: .625em; /* 10px */\n
}\n
/* Set a max-width for the last breakpoint to prevent too much stretching on large screens.\n
By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */\n
.ui-shopbox .ui-listview {\n
max-width: 76.25em; /* 1220px */\n
margin: 0 auto;\n
}\n
/* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),\n
but we stick to percentage values for demo purposes. */\n
.ui-shopbox .ui-listview li {\n
width: 18%;\n
height: 230px;\n
margin: .625em 1%;\n
}\n
}\n
\n
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */
]]></string></value>
</item>
<item>
<key><string>title</string></key>
<value><string>Gadget E5G Ecommerce Field Shopbox Widget CSS</string></value>
