{"id":262874,"date":"2015-08-04T14:26:03","date_gmt":"2015-08-04T10:26:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=262874"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=262874","title":{"rendered":"\u0420\u0435\u0436\u0438\u043c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f: \u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 email-\u043f\u0438\u0441\u044c\u043c\u0430\u0445"},"content":{"rendered":"

\u0412 \u0431\u043b\u043e\u0433\u0435 FreshInbox \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d \u043f\u043e\u0441\u0442 \u043e\u0431 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0432 \u043f\u0438\u0441\u044c\u043c\u0430\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0447\u0442\u043e\u0432\u044b\u0445 \u0440\u0430\u0441\u0441\u044b\u043b\u043e\u043a<\/a>. \u0415\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0438\u0441\u044c\u043c\u0430, \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430.<\/p>\n

\u0420\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0441\u0434\u0435\u043b\u0430\u043b\u043e \u0447\u0442\u0435\u043d\u0438\u0435 \u043f\u0438\u0441\u0435\u043c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043b\u0435\u0433\u0447\u0435. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u0441\u0442\u0430\u043b \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u00ab\u043c\u0430\u0441\u0441\u0438\u0432\u043d\u044b\u0445\u00bb \u043f\u0438\u0441\u0435\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u043f\u043e\u0441\u043b\u0430\u043d\u0438\u044f \u0434\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u044b\u0435 \u0441\u0442\u043e\u0439\u043a\u0438\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438. \u0415\u0441\u043b\u0438 \u0434\u0430\u0442\u044c \u043b\u044e\u0434\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0438\u0441\u044c\u043c\u0443, \u044d\u0442\u043e \u0431\u044b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043b\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e.<\/p>\n

<\/p>\n

\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u0447\u0442\u043e\u0432\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 Mail \u0434\u043b\u044f iPhone (\u0432\u0435\u0440\u0441\u0438\u044f \u0434\u043b\u044f Android \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435).<\/a><\/p>\n

\u0420\u0435\u0436\u0438\u043c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f<\/h4>\n

\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0438\u0441\u044c\u043c\u0430 \u2014 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0438\u0441\u044c\u043c\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0438\u043a\u0430.<\/p>\n

\u0410\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u044f<\/h5>\n

\u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u00ab\u0440\u0435\u0436\u0438\u043c\u0430 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f\u00bb \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u0430 \u0432 \u044f\u0440\u043b\u044b\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e id \u044f\u0447\u0435\u0439\u043a\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 :checked<\/code>, \u043c\u0435\u043d\u044e \u0432 \u0432\u0435\u0440\u0445\u0443 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 position:fixed<\/code>:<\/p>\n

<style> .toolbar-container{   position:fixed;   top:0px; left:0px;   display:none;   ... }   #navbox:checked ~ .toolbar-container{   display:block!important; }   #navbox:checked ~ .articles-container{   height:100%;   overflow:hidden;   position:fixed;   top:50px;   left:0px; } <\/style>   <input id="navbox" type="checkbox"> <label for="navbox" >Activate Reader Mode<\/label>   <div class="toolbar-container">...hidden toolbar content ... <div> <div class="articles-container">   article1, article2, article3... <\/div> <\/code><\/pre>\n
  <\/p>\n
\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0442\u0435\u0439<\/h5>\n
  \u0421\u0442\u0430\u0442\u044c\u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 \u0434\u0432\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041a\u043e\u0433\u0434\u0430 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 :checked<\/code>, \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u043f\u043e\u043b\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430. \u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 email-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0443\u0441 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0435 \u043c\u0435\u043d\u044e.<\/p>\n
  \u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 \u0447\u0438\u0441\u043b\u043e \u0441\u0442\u0430\u0442\u0435\u0439. \u0421\u0442\u0430\u0442\u044c\u0438 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0432 viewport \u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0432\u043b\u0435\u0432\u043e. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0442\u044c \u0438\u0445 \u0432 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044f \u043e\u0434\u043d\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u0437\u0430 \u0440\u0430\u0437.<\/p>\n
  \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0434\u0438\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u043e\u0433\u0434\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 :checked<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0434\u0438\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432\u043b\u0435\u0432\u043e \u0438\u043b\u0438 \u0432\u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0447\u0438\u0441\u043b\u043e \u00ab\u0448\u0438\u0440\u0438\u043d \u043a\u0440\u0430\u043d\u0430\u00bb (vw) \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u00ab\u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0441\u043a\u043e\u043b\u044c\u0436\u0435\u043d\u0438\u044f\u00bb \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439:<\/p>\n
#navbox:checked ~ #a1radio:checked ~ .articles-cont .articles{   left:0px; } #navbox:checked ~ #a2radio:checked ~ .articles-cont .articles{   left:-100vw; } #navbox:checked ~ #a3radio:checked ~ .articles-cont .articles{   left:-200vw; } <\/code><\/pre>\n
  \u0412\u0435\u043b\u0438\u0447\u0438\u043d\u0430 vw \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 Android, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0434\u043d\u0443 \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u043e\u0439 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e, \u043f\u0440\u044f\u0447\u0430 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0435\u0435 z-\u0438\u043d\u0434\u0435\u043a\u0441.<\/p>\n
\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0441\u0442\u0430\u0442\u044c\u044f\u043c<\/h5>\n
  \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e \u0441\u0442\u0430\u0442\u044c\u044f\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044f\u0440\u043b\u044b\u043a\u0438 \u0441\u0442\u0440\u0435\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0440\u0430\u0434\u0438\u043e-\u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u0442\u0438 \u044f\u0440\u043b\u044b\u043a\u0438 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043a\u0440\u044b\u0442\u044b \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u0442\u044c\u0435\u0439.<\/p>\n
<style> #navbox:checked ~ #a1radio:checked ~ .toolbar-cont .a1nav, #navbox:checked ~ #a2radio:checked ~ .toolbar-cont .a2nav, #navbox:checked ~ #a3radio:checked ~ .toolbar-cont .a3nav{   display:block; } <\/style>   <div class="nav-arrows a1nav">    <label> <\/label><label for="a2radio">»<\/label> <\/div> <div class="nav-arrows a2nav">    <label for="a1radio">«<\/label><label for="a3radio">»<\/label> <\/div> <div class="nav-arrows a3nav">    <label for="a2radio">«<\/label><label> <\/label> <\/div>  <\/code><\/pre>\n
  <\/p>\n
\u0418\u043d\u0434\u0435\u043a\u0441\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0441\u0442\u0430\u0442\u0435\u0439<\/h5>\n
  \u0418\u043d\u0434\u0435\u043a\u0441\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u044f\u0440\u043b\u044b\u043a\u043e\u0432, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 \u0432 \u0441\u043a\u0440\u044b\u0442\u043e\u043c \u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0441\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0434\u0438\u0432\u0435 (div) \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043d\u0430 \u043c\u0435\u043d\u044e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 :hover<\/code>.<\/p>\n
  \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0447\u0430\u0441\u0442\u043e, \u0435\u0441\u043b\u0438 \u043c\u0435\u043d\u044e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u0447\u0442\u043e\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440. \u0421\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043c\u043e\u0436\u043d\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443.<\/p>\n
\u041a\u043e\u0434<\/h4>\n
  \u041f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a> \u043c\u043e\u0436\u043d\u043e \u0432 \u0431\u0438\u043b\u0434\u0435\u0440\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u043e\u0447\u0442\u043e\u0432\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u0412 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043f\u043e\u0434 \u0441\u043f\u043e\u0439\u043b\u0435\u0440\u043e\u043c:<\/p>\n
\u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/b><\/p>\n
\n
<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"> <html xmlns="http:\/\/www.w3.org\/1999\/xhtml"> <head> <meta name="viewport" content="width=device-width" \/> <meta http-equiv="Content-Type" content="text\/html; charset=UTF-8" \/> <style> * {    margin:0;   padding:0;     font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;    font-size: 100%;   line-height: 1.5;   color:#333333; } img{   max-width:100%; } body {   -webkit-text-size-adjust:none;    width: 100%!important;    height: 100%; } h1,h2{   margin-bottom:15px;   line-height: 1.3;   font-weight:300;  } h1 {   font-size: 32px; } h2 {   font-size: 22px; } .toolbar-cont{   max-height:none!important;   overflow:visible!important;   z-index:10;   width:100%;   position:fixed;   top:0px;   left:0px;   display:none;   height:50px;    background-color:#eeeeee;   border-bottom:1px solid #222222;  } .toolbar{   height:50px;   line-height:50px;   display:block;   text-decoration:none; } .toolbar-menu{   z-index:10;   text-align:center;   position:absolute;   top:51px;   overflow:hidden;   transition: all 0.3s;   -webkit-transition: all 0.3s;   transform: rotateX(90deg);   -webkit-transform: rotateX(90deg);   transform-origin: top;   -webkit-transform-origin: top;   -webkit-transition-delay: 0.5s;   transition-delay: 0.5s; } .toolbar-menu label{   display:block;   padding:5px 20px 5px 20px; } .toolbar:hover + .toolbar-menu{   display:block;   transform: rotateX(0deg);   -webkit-transform: rotateX(0deg); }  .articles-cont{   background-color:#ffffff; }  #navbox:checked ~ .articles-cont{   width:100%;   height:100%;   overflow:hidden;   position:fixed;   top:50px;   left:0px; } #navbox:checked ~ .articles-cont .articles{   position:absolute;   left:0px;   width:303vw;   transition: all 0.3s;   -webkit-transition: all 0.3s;   height:100%; } #navbox:checked ~ .articles-cont .articles .art{   width:100vw;   float:left;   height:1000px;   overflow:hidden;   } #navbox:checked ~ .articles-cont .articles .art div{   width:90vw;   padding:20px 5vw 10px 5vw; } input{   max-height:0;   display:none; } .nav-arrows{   float:right;   display:none; } .nav-arrows label{   cursor:pointer;   display:inline-block;   vertical-align:middle;   text-align:center;   height:50px;   width:50px;   font-size:30px;   font-weight:bold; } #navbox:checked ~ #a1radio:checked ~ .articles-cont .articles{   left:0px; } #navbox:checked ~ #a2radio:checked ~ .articles-cont .articles{   left:-100vw; } #navbox:checked ~ #a3radio:checked ~ .articles-cont .articles{   left:-200vw; } #navbox:checked ~ #a1radio:checked ~ .articles-cont .a1, #navbox:checked ~ #a2radio:checked ~ .articles-cont .a2, #navbox:checked ~ #a3radio:checked ~ .articles-cont .a3{   height:100%;   overflow-y:scroll; } #navbox:checked ~ #a1radio:checked ~ .toolbar-cont .a1nav, #navbox:checked ~ #a2radio:checked ~ .toolbar-cont .a2nav, #navbox:checked ~ #a3radio:checked ~ .toolbar-cont .a3nav{   display:block; } .closer{   display:inline-block;   vertical-align:middle;   text-align:center;   height:50px;   width:50px;   font-size:30px;   font-weight:bold;   float:left; } #navbox:checked ~ .opener{   display:none; } #navbox:checked ~ .toolbar-cont{   display:block!important; }  @media screen and (max-width: 480px) {   #cbox-capable:checked ~ .opener div{     margin:10px auto;     background-color:#1abc9c;     color:#ffffff;     border-radius:5px;     display: block !important;     max-height:50px !important;     line-height:50px;     text-align:center;     vertical-align:middle;   } }     <\/style> <\/head> <body> <div id="main-cont" style="padding:20px;"> <h1>FreshInbox<\/h1> <div style="dislay:block;width:350px;margin:0px auto;max-width:100%"> <img src="http:\/\/placehold.it\/350x150"> <\/div> <!--[if !mso 9]><!--> <input id="cbox-capable" type="checkbox" style="display:none!important;max-height:0;visibility:hidden;" checked> <input id="navbox" type="checkbox" style="display:none!important;max-height:0;visibility:hidden;"> <label for="navbox" class="opener"> <div style="display:none;max-height:0px;overflow:hidden;cursor:pointer">Reader Mode<\/div><\/label> <input id="a1radio" name="qradio" type="radio" checked style="display:none!important;max-height:0;visibility:hidden;"> <input id="a2radio" name="qradio" type="radio" style="display:none!important;max-height:0;visibility:hidden;"> <input id="a3radio" name="qradio" type="radio" style="display:none!important;max-height:0;visibility:hidden;">  <div class="toolbar-cont" style="display:none;max-height:0px;overflow:hidden;">   <label for="navbox" class="closer">x<\/label>   <div class="nav-arrows a1nav">      <label> <\/label><label for="a2radio">»<\/label>   <\/div>   <div class="nav-arrows a2nav">      <label for="a1radio">«<\/label><label for="a3radio">»<\/label>   <\/div>   <div class="nav-arrows a3nav">      <label for="a2radio">«<\/label><label> <\/label>   <\/div>    <a href="#" class="toolbar">Article Index...<\/a>   <div class="toolbar-menu" style="text-align:left;background-color:#C8DEFA;border:1px solid #888888;font-size:15px;">       <label for="a1radio">Yahoo! Mail Fixes Media Query Bug. Yahoo!!!<\/label>        <label for="a2radio">Outlook.com and Background Images<\/label>        <label for="a3radio">Gmail iOS Increases Email Font Sizes \u2013 Again<\/label>    <\/div> <\/div> <!--<![endif]-->   <div class="articles-cont">   <div class="articles">     <div class="art a1"><div>     <h2>Yahoo! Mail Fixes Media Query Bug. Yahoo!!!<\/h2>     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        <HR>        <\/div><\/div>     <div class="art a2"><div>     <h2>Outlook.com and Background Images<\/h2>     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        <HR>        <\/div><\/div>     <div class="art a3"><div>     <h2>Gmail iOS Increases Email Font Sizes \u2013 Again<\/h2>     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        <HR>        <\/div><\/div>   <\/div> <\/div> <\/div> <\/body> <\/html> <b><\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0414\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u043f\u0438\u0441\u0435\u043c \u0432 \u0431\u043b\u043e\u0433\u0435 \u00ab\u041f\u0435\u0447\u043a\u0438\u043d\u0430\u00bb:<\/p>\n