/* #reset reset.css v1.0 | 20080212 http://meyerweb.com/eric/tools/css/reset/ */
/*html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:"";}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse;border-spacing:0;}*/
/* ------------------------ */
/*
body { font: 10px/1.2em arial; color: #000; }
a { color: #333; text-decoration: none; }
a:hover { text-decoration: underline; }*/

.section { width: 835px; padding: 10px; margin: 20px; }
/*.section { border: 1px solid #666; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }*/
.section h2 { margin: 0 0 10px 0; }
.scroller { display: none; padding: 10px; margin: 10px 0 0 0; position: relative; }
/*.scroller { border: 1px solid #ccc; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; }*/
.wrapper-records { width: 812px; height: 152px; overflow: hidden; position: relative; }
ol.records { background-color: #FFFFFF; height: 152px; }
ol.records li { background-image: url(/static/images/ajax-loader.gif); background-repeat: no-repeat; background-position: center; border-right: 5px solid white; cursor: pointer; float: left; height: 152px; width: 203px; overflow: hidden; }
ol.records li img { display: block; left: 0; margin-left:5px; top: 0;}
ol.records li span { position:absolute; top:131px; background:white; border:3px solid white; z-index:1; }
.wrapper-pinned { position: absolute; top: 0; left: 10px; width: 520px; height: 1px; z-index: 5; }
ol.items-pinned li { position: absolute; height: 152px; width: 203px; top: 30px; outline: 1px dotted #f00; background: #fff; display: none; }
ol.items-pinned .item-1 { left: 0; }
ol.items-pinned .item-2 { left: 153px; }
ol.items-pinned .item-3 { left: 306px; }

.subselection { height: 20px; position: relative; }
.subselection .constrain-left,
.subselection .constrain-right { position: absolute; top: 0; z-index: 10; width: 10px; height: 20px; }
.subselection .constrain-left { left: 0; }
.subselection .constrain-right { right: 0; }
.subselection .selection { height: 10px; position: relative; top: 5px; background-color: #eee; }

.scrollbar { height: 20px; background-color: #ccc; position: relative; margin: 0 10px 10px 10px; }
.scrollbar .bar { height: 20px; position: relative; cursor: pointer; }
.scrollbar .bar .indicator { position: absolute; left: 0; top: 0; }
.scrollbar .pin { display: none; position: absolute; top: -20px; z-index: 10; }
.scrollbar .scrollLeft,
.scrollbar .scrollRight { position: absolute; top: 0; }
.scrollbar .scrollLeft { left: 20px; top: -14px; }
.scrollbar .scrollRight { right: -40px; top:-14px; }

.note.loading { position: absolute; z-index:5; left: 40px; top: 40px; width: 44px; height:19px; display: block; color: #000000; background-color: yellow; border: 1px solid yellow; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 4px; }
.clearfix:after { content: "."; height: 0; display: block; visibility: hidden; clear: both; }
.clearfix { zoom: 1; }