/** initial setup **/ .nano { position : relative; width : 100%; height : 100%; overflow : hidden; } .nano > .nano-content { position : absolute; overflow : scroll; overflow-x : hidden; top : 0; right : 0; bottom : 0; left : 0; } .nano > .nano-content:focus { outline: thin dotted; } .nano > .nano-content::-webkit-scrollbar { display: none; } .has-scrollbar > .nano-content::-webkit-scrollbar { display: block; } .nano > .nano-pane { background : rgba(0,0,0,.25); position : absolute; width : 10px; right : 0; top : 0; bottom : 0; visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ opacity : .01; -webkit-transition : .2s; -moz-transition : .2s; -o-transition : .2s; transition : .2s; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; } .nano > .nano-pane > .nano-slider { background: #444; background: rgba(0,0,0,.5); position : relative; margin : 0 1px; -moz-border-radius : 3px; -webkit-border-radius : 3px; border-radius : 3px; } .nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility : visible\9; /* Target only IE7 and IE8 with this hack */ opacity : 0.99; } .im_page_wrap { background: #FFF; max-width: 1000px; min-width: 300px; margin: 0 auto; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); border-radius: 0 0 3px 3px; overflow: hidden; } .im_page_footer { font-size: 11px; text-align: center; color: #9cacb9; line-height: 40px; } .im_page_footer_brand { color: #9cacb9; font-weight: bold; } .im_page_footer_brand:hover, .im_page_footer_brand:active { color: #8499aa; text-decoration: none; } .im_dialogs_col { margin-right: -7px; } .im_dialogs_col_wrap { float: left; width: 31%; border-right: 2px solid #E9EBED; padding-bottom: 10px; } .im_dialogs_scrollable_wrap { padding: 0 19px 0 12px; } .im_history_col_wrap { float: left; width: 69%; } .im_history_col .nano > .nano-pane, .contacts_modal_col .nano > .nano-pane, .im_dialogs_modal_col .nano > .nano-pane { background : rgba(3,36,64,0.08); width : 9px; right: 0; top: 0; /*-webkit-transition : .2s; -moz-transition : .2s; -o-transition : .2s; transition : .2s;*/ -moz-border-radius : 2px; -webkit-border-radius : 2px; border-radius : 2px; -webkit-transition : none; -moz-transition : none; -o-transition : none; transition : none; } .contacts_modal_col .nano > .nano-pane { width: 6px; right: 7px; } .im_dialogs_modal_col .nano > .nano-pane { width: 6px; right: 2px; } .im_dialogs_modal_col .im_dialogs_scrollable_wrap { padding: 0 12px 0 12px; } .im_history_col .nano > .nano-pane { top: 10px; right: 8px; } .im_history_col .nano > .nano-pane > .nano-slider, .contacts_modal_col .nano > .nano-pane > .nano-slider, .im_dialogs_modal_col .nano > .nano-pane > .nano-slider { background : rgba(3,46,79,0.22); margin: 0; -moz-border-radius : 2px; -webkit-border-radius : 2px; border-radius : 2px; }