@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(https://fonts.gstatic.com/s/opensans/v13/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxrfB31yxOzP-czbf6AAKCVo.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxi8cqLH4MEiSE0ROcU-qHOA.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'), url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf) format('truetype'); } @font-face { font-family: 'Rock Salt'; font-style: normal; font-weight: 400; src: local('Rock Salt'), local('RockSalt'), url(https://fonts.gstatic.com/s/rocksalt/v6/Q94aHXFHGip10K5uxi1jOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } #timer_wrap { /*????? ??????????? ?????? ????? ? ????????, ??????????? ????? ????????? ???????????? ?????? ?????? ????? ??? ????????, ?????? ???? ?? ?????????????? ?????? ??????. ??????????? ???????? 960px */ max-width: 960px; margin:0 auto; } .clock { margin:0 auto; /*?????? ????? ? ???????? - ??????????? ????????? 585px */ width:585px; /*?????? ?????? ???? ? ??????? - ????????? ?????? ?????? ????? - ??????? ?????? ?????? 55px/1.5 */ font: 55px/1.5 'Open Sans Condensed',sans-serif; font-weight: normal; text-align:center; letter-spacing:-3px; display: block; } .razd { float:left; /*???? ?????-???????????? ????? ??????? - ??????????? ????????? #444 */ color:#444; /*???? ???? ? ?????-???????????? ????? ???? - ??????????? ????????? 1px 1px 1px rgba(4, 4, 4, 0.5) */ text-shadow:1px 1px 1px rgba(4, 4, 4, 0.5); /*?????? ?????? ?????????????? ????? ????? ???????- ??????????? ????????? 65px */ font-size: 65px; margin:-9px 5px 0px 0px; } .clock p { margin:0px; padding:0px; width:1em; float:left; position:absolute; box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.35); border-radius: 0.2em; letter-spacing: -1px; text-align: center; /*???? ????*/ color:#444; /*???? ???? ????, ?????? ??? ????? ???????? - ???????? ????? ????? ?? ????? http://www.colorzilla.com/gradient-editor/ */ background: #b8e1fc; /* Old browsers */ background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */ background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */ } /*??????????? ???????? ????? ???? ? ???? background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%); background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #3A3A3A),color-stop(0.5, #444444)); */ .position{ display: inline-block; height: 1.6em; overflow: hidden; position: relative; width: 1.05em; } .hour,.min,.sec,.day { float:left; padding:5px; position:relative; display:block; } .sec0,.min0,.hour0,.day0 { display: block; position: absolute; } .sec1,.min1,.hour1,.day1 { display: block; position: absolute; }