/*
===============================================
Florio Fashion. February, 2011.
http://www.florio-fashion.com
===============================================
*/

#catalog { height: 432px; padding: 10px 0px 0px 10px; background-image: url(/graphics/thumb-panel.png); }

/*
===============================================
FIELD
===============================================
*/

div.thumb { float: left; width: 298px; height: 200px; margin: 0px 4px 4px 0px; padding: 3px 7px 7px 3px; background-image: url(/graphics/thumb.png); }
div.thumb a { position: relative; display: block; height: 200px; overflow: hidden; }
div.thumb a img { position: relative; top: -50px; width: 298px; }

span.size { position: absolute; top: 4px; left: 6px; font-weight: bold; color: #555555; }
span.bar { display: block; position: absolute;	bottom: 0px; left: 0px; width: 278px; height: 15px; padding: 4px 10px; font: bold 12px Tahoma; text-align: right; background-image: url(/graphics/thumb-bar.png); color: #555555; }
span.code { float: left; font-weight: bold; color: #ffffff; }
span.price { float: right; }

div.thumb a:hover span.bar { background-position: -298px 0px; color: #663333; }

/*
===============================================
COMMON
===============================================
*/

#collections { float: left; padding: 0px 13px; }
#collections li { float: left; display: block; padding: 4px 10px 5px 10px; font: 10px Verdana; text-transform: uppercase; color: #666666; cursor: pointer; }
#collections li:hover { background-color: #99bb66; color: #ffffff; }
#collections li.selected { background-color: #cc9900; color: #ffffff; cursor: default; }

#location { float: right; padding: 0px 5px; }
#location div { float: left; padding: 4px 10px 5px 10px; font: 10px Verdana; text-transform: uppercase; color: #666666; }
#location div span { font: bold 10px Tahoma; color: #996633; }

#info { position: absolute; left: 300px; bottom: 18px; font: 11px Verdana; text-align: left; color: #666666; }
#info * { font: bold 11px Tahoma; color: #336633; }

#sorting { position: absolute; right: 180px; width: 150px; bottom: 18px; }
#sorting div.caption { position: absolute; top: 0px; left: -85px; font: bold 10px Tahoma; text-align: right; text-transform: uppercase; color: #666666; }
#sorting * { text-align: left; text-transform: uppercase; color: #666666; }
#sorting li { display: block; font: 10px Verdana; cursor: pointer; }
#sorting li:hover { text-decoration: underline; }
#sorting li.selected { font: bold 10px Tahoma; color: #996633; cursor: default; }
#sorting li.selected:hover { text-decoration: none; }