Membuat iphone dengan css
copy css dibawah ini dan taruh di atas kode ]]></b:skin> gunakan ctrl+f untuk mempermudah mencarinya
taruh javascript di atas kode </head>

copy css dibawah ini dan taruh di atas kode ]]></b:skin> gunakan ctrl+f untuk mempermudah mencarinya
.iphone { margin: 0; display: block; position: relative; background: #e8e7e6; width: 368px; height: 734px; padding: 2px; border: 1px solid #868381; -webkit-border-radius: 58px; -moz-border-radius: 58px; border-radius: 58px; -webkit-box-shadow: #c1bfbf 0 0 0 1px; -moz-box-shadow: #c1bfbf 0 0 0 1px; box-shadow: #c1bfbf 0 0 0 1px; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; } .iphone:after { content: ''; width: 4px; height: 3px; position: absolute; top: -1px; left: 120px; background: rgba(0,0,0,0.7); -webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0; -moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0; box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0; } .iphone:before { content: ''; width: 373px; height: 3px; position: absolute; top: 646px; left:0px; z-index: 0; background: rgba(0,0,0,0.7); -webkit-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0; -moz-box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0; box-shadow: rgba(0,0,0,1) 0 0 1px, inset rgba(0,0,0,0.1) 1px 0 0, inset rgba(0,0,0,0.1) -1px 0 0; } .iphone * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* ---------------------------------------------------------------------------- */ .iphone_power_button { height: 4px; position: absolute; width: 60px; background: #000; top: -5px; left: 250px; cursor: pointer; background: #ccc; background: -webkit-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: -moz-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: -ms-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: -o-linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: linear-gradient(left, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; -webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0; -moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0; box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 1px 0 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 0 1px 1px, inset rgba(0,0,0,0.1) 0 -1px 0; } /* ---------------------------------------------------------------------------- */ .iphone_voice_toogle { background: -webkit-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: -moz-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: -ms-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: -o-linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); background: linear-gradient(top, #969391 0%, #faf9f8 8%, #faf9f8 11%, #acaaa8 15%, #dad9d7 30%, #dbdada 50%, #dad9d7 80%, #dfdddd 88%, #ffffff 92%, #e9e8e7 95%, #918f8d 100% ); position: absolute; width: 4px; height: 34px; top: 66px; left: -5px; -webkit-border-radius: 1px 0 0 1px; -moz-border-radius: 1px 0 0 1px; border-radius: 1px 0 0 1px; -webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; -moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; } /* ---------------------------------------------------------------------------- */ .iphone_voice_plus { background: -webkit-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: -moz-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: -ms-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: -o-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); position: absolute; width: 4px; height: 26px; top: 144px; left: -5px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; -webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; -moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.25) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; } /* ---------------------------------------------------------------------------- */ .iphone_voice_minus { background: -webkit-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: -moz-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: -ms-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: -o-linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); background: linear-gradient(top, #504d4b 0%, #e7e7e6 15%, #ffffff 28%, #ffffff 34%, #565351 60%, #e7e7e6 83%, #898684 98%, #504d4b 100%); position: absolute; width: 4px; height: 26px; top: 210px; left: -5px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; -webkit-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; -moz-box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; box-shadow: rgba(166,165,164,0.1) 0 -1px 0, rgba(166,165,164,0.1) 0 1px 0, rgba(166,165,164,0.1) -1px 0 0, inset rgba(0,0,0,0.2) 1px 0 1px, inset rgba(0,0,0,0.04) 0 -1px 0; } /* ---------------------------------------------------------------------------- */ .iphone_black_bg { width: 100%; height: 100%; background: #000; z-index: 1; position: relative; -webkit-border-radius: 56px; -moz-border-radius: 56px; border-radius: 56px; -webkit-box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px; -moz-box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px; box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.3) 0 0 1px 3px; box-shadow: inset #000 0 0 0 1px, inset rgba(255,255,255,0.07) 0 0 1px 2px, inset rgba(255,255,255,0.07) -1px 0 1px 2px, inset rgba(255,255,255,0.07) 1px 0 1px 2px, inset rgba(255,255,255,0.07) 0 1px 1px 2px, inset rgba(255,255,255,0.07) 0 -1px 1px 2px \0/IE8+9; } .iphone_black_bg:after { content: ''; position: absolute; width: 320px; height: 480px; left: 19px; top: 121px; border: 5px solid rgba(255,255,255,0.07); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; overflow: hidden; z-index: 2; display: block; } /* ---------------------------------------------------------------------------- */ .iphone_camera { position: absolute; width: 17px; height: 17px; left: 113px; top: 56px; overflow: hidden; z-index: 1000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: -webkit-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,0.1), rgba(44,43,45,0.1) 300%); background: -moz-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,0.1), rgba(44,43,45,0.1) 300%); background: -ms-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,0.1), rgba(44,43,45,0.1) 300%); background: -o-radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,0.1), rgba(44,43,45,0.1) 300%); background: radial-gradient(35% 35%, ellipse closest-side, rgba(26,26,27,0.1), rgba(44,43,45,0.1) 300%); -webkit-box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.2) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px; -moz-box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.2) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px; box-shadow: inset rgba(255,255,255,0.05) 0 0 3px 1px, inset rgba(0,0,0,0.2) 1px 1px 2px, inset rgba(255,255,255,0.07) -2px -2px 1px; } .iphone_camera:after { content: ''; position: absolute; display: block; width: 7px; height: 7px; top: 5px; left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: -webkit-radial-gradient(35% 35%, ellipse closest-side, rgba(5, 29, 49, 0.5), rgba(43, 93, 144, 0.5) 300%); background: -moz-radial-gradient(35% 35%, ellipse closest-side, rgba(5, 29, 49, 0.5), rgba(43, 93, 144, 0.5) 300%); background: -ms-radial-gradient(35% 35%, ellipse closest-side, rgba(5, 29, 49, 0.5), rgba(43, 93, 144, 0.5) 300%); background: -o-radial-gradient(35% 35%, ellipse closest-side, rgba(5, 29, 49, 0.5), rgba(43, 93, 144, 0.5) 300%); background: radial-gradient(35% 35%, ellipse closest-side, rgba(5, 29, 49, 0.5), rgba(43, 93, 144, 0.5) 300%); -webkit-box-shadow:rgba(0,0,0,0.01) 0 0 0 3px; -moz-box-shadow:rgba(0,0,0,0.01) 0 0 0 3px; box-shadow:rgba(0,0,0,0.01) 0 0 0 3px; } .iphone_camera:before { content: ''; position: absolute; display: block; width: 2px; height: 2px; top: 7px; left: 9px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index: 100; background: #2b5d90; -webkit-box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px; -moz-box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px; box-shadow: #3c2b90 -1px -1px 1px, #2b5d90 -1px 1px 1px, #2b5d90 1px -1px 1px, rgba(0,0,0,0.3) -2px 0 0 3px; } /* ---------------------------------------------------------------------------- */ .iphone_dynamic { position: absolute; width: 60px; height: 10px; padding: 6px 6px 0 6px; overflow: hidden; left: 148px; top: 57px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: -webkit-linear-gradient(top, rgba(20,20,21,0.3), rgba(65,65,65,0.1)); background: -moz-linear-gradient(top, rgba(20,20,21,0.3), rgba(65,65,65,0.1)); background: -ms-linear-gradient(top, rgba(20,20,21,0.3), rgba(65,65,65,0.1)); background: -o-linear-gradient(top, rgba(20,20,21,0.3), rgba(65,65,65,0.1)); background: linear-gradient(top, rgba(20,20,21,0.3), rgba(65,65,65,0.1)); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#141415', endColorstr='#414141', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#141415', endColorstr='#414141', GradientType=0); -webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0; -moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0; box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0; z-index: 10; } .iphone_dynamic:after { content: ''; position: absolute; z-index: 1; width: 60px; height: 7px; top: 5px; left: 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: -webkit-linear-gradient(top, rgba(65,65,65,0.5), rgba(255,255,255,0.3)); background: -moz-linear-gradient(top, rgba(65,65,65,0.5), rgba(255,255,255,0.3)); background: -ms-linear-gradient(top, rgba(65,65,65,0.5), rgba(255,255,255,0.3)); background: -o-linear-gradient(top, rgba(65,65,65,0.5), rgba(255,255,255,0.3)); background: linear-gradient(top, rgba(65,65,65,0.5), rgba(255,255,255,0.3)); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#414141', endColorstr='#ffffff', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#414141', endColorstr='#ffffff', GradientType=0); -webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px; -moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px; box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.1) 0 -1px 0, inset rgba(0,0,0,0.3) 0 -1px 1px; } .iphone_dynamic:before { content: ''; position: absolute; z-index: 100; width: 10px; height: 10px; top: 8px; left: 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: -webkit-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%); background: -moz-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%); background: -ms-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%); background: -o-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%); background: radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0.4), rgba(255,255,255,0) 100%); opacity:0.8; } .iphone_dynamic span { background: rgba(0,0,0,0.2); width: 1px; height: 1px; display: block; float: left; z-index: 3; position: relative; margin: 1px 1px 0 0 ; } .iphone_dynamic span:nth-child(3n+1) { -webkit-box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; box-shadow: rgba(255,255,255,0.2) 1px 0 0 ; } .iphone_dynamic span:nth-child(4n+1) { -webkit-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; } .iphone_dynamic span:nth-child(7n+1) { -webkit-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; -moz-box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; box-shadow: rgba(255,255,255,0.1) 1px 0 0 ; } /* ---------------------------------------------------------------------------- */ .iphone_light_gradient { position: absolute; width: 360px; height: 729px; top: 5px; right: 5px; -webkit-border-radius: 53px; -moz-border-radius: 53px; border-radius: 53px; border-radius: 55px \0/IE8+9; background: -webkit-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(-155deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); overflow: hidden; z-index: 2; } /* ---------------------------------------------------------------------------- */ .iphone_home { position: absolute; width: 70px; height: 70px; top: 637px; left: 151px; overflow: hidden; z-index: 105; cursor: pointer; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px; -moz-box-shadow: rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px; box-shadow: rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px; box-shadow: rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -50px 2px -32px\0/IE8+9; } .iphone_home:after { content: ''; position: absolute; width: 21px; height: 21px; border: 2px solid #a3a4a3; left: 23px; top: 23px; z-index: 3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .iphone_home:active { -webkit-box-shadow: inset rgba(0,0,0,0.3) 0 0 1px 1px, rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px; -moz-box-shadow: inset rgba(0,0,0,0.3) 0 0 1px 1px, rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px; box-shadow: inset rgba(0,0,0,0.3) 0 0 1px 1px, rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -60px 1px -42px; box-shadow: inset rgba(0,0,0,0.3) 0 0 1px 1px, rgba(255,255,255,0.15) 0 0 0 1px, inset rgba(0,0,0,0.25) 0 0 0 1px, inset rgba(0,0,0,0.15) 0 0 20px 1px, inset rgba(255,255,255,0.25) 0 -50px 2px -32px\0/IE8+9; } .iphone_home:active:after { top: 22px; } /* ---------------------------------------------------------------------------- */ .iphone_display { position: absolute; width: 320px; height: 480px; left: 26px; top: 128px; z-index: 1002; overflow: hidden; background: -webkit-linear-gradient(top, #666, #333); background: -moz-linear-gradient(top, #666, #333); background: -ms-linear-gradient(top, #666, #333); background: -o-linear-gradient(top, #666, #333); background: linear-gradient(top, #666, #333); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333', GradientType=0); } .iphone_display.off { background: #000; } .iphone_display::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%); background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 75%,rgba(0,0,0,0.4) 100%); z-index: 1; } /* ---------------------------------------------------------------------------- */ .iphone_headline { position: absolute; top: 0; top: -20px; left: 0; background: rgba(0,0,0,0.6); width: 100%; height: 19px; border-bottom: 1px rgba(0,0,0,0.3) solid; overflow: hidden; z-index: 3; } .iphone_net { position: absolute; top:4px; left: 4px; width: 19px; height: 10px; overflow: hidden; } .iphone_net::after { content: ''; position: absolute; right: 0; top:0; display: block; width: 3px; height: 10px; background: #c6c6c6; -webkit-box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0; -moz-box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0; box-shadow: #c6c6c6 -4px 2px 0, #c6c6c6 -8px 4px 0, #c6c6c6 -12px 6px 0, #c6c6c6 -16px 8px 0; } .iphone_net_title { font: bold 13px/19px "Helvetica Neue"; color: #c6c6c6; text-shadow: rgba(0,0,0,0.3) 0 1px 1px; text-transform: uppercase; position: absolute; left: 26px; top:0; } .iphone_wi-fi { top: -14px; left: 70px; width: 25px; height: 25px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); overflow: hidden; position: absolute; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .iphone_wi-fi:after { content: ''; top: 12px; left: 12px; width: 20px; height: 20px; overflow: hidden; position: absolute; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: 2px #c6c6c6 solid; } .iphone_wi-fi:before { content: ''; top: 17px; left: 17px; width: 10px; height: 10px; overflow: hidden; position: absolute; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: 2px #c6c6c6 solid; } .iphone_wi-fi .hack { position: absolute; left: 22px; top: 22px; width: 4px; height: 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #c6c6c6; z-index: 6; } .iphone_clock { font: bold 13px/19px "Helvetica Neue"; color: #c6c6c6; text-shadow: rgba(0,0,0,0.3) 0 1px 1px; text-transform: uppercase; position: absolute; left:0; top:0; display: none; width: 100%; text-align: center; } .iphone_lock { width: 10px; height: 7px; position: absolute; background: #c6c6c6; top: 8px; left: 156px; } .iphone_lock:after { content: ''; position: absolute; top: -5px; left: 2px; width: 4px; height: 5px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; border: 1px solid #c6c6c6; -webkit-box-shadow: rgba(198,198,198,0.6) 0 0 0 1px; -moz-box-shadow: rgba(198,198,198,0.6) 0 0 0 1px; box-shadow: rgba(198,198,198,0.6) 0 0 0 1px; } .iphone_battery { position: absolute; height: 8px; width: 18px; border: 1px solid #c6c6c6; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; right: 6px; top: 4px; } .iphone_battery:after { content: ''; position: absolute; height: 2px; width: 1px; border: 1px solid #c6c6c6; right: -3px; top: 2px; } .iphone_battery:before { content: ''; position: absolute; height: 6px; width: 16px; background: #c6c6c6; left: 1px; top: 1px; } /* ---------------------------------------------------------------------------- */ .iphone_header { position: absolute; width: 100%; background: -webkit-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: -moz-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: -ms-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: -o-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); left: 0; top: 20px; top: -113px; height: 93px; border-bottom: 1px rgba(255,255,255,0.2) solid; -webkit-box-shadow: rgba(0,0,0,0.4) 0 1px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 1px 0; box-shadow: rgba(0,0,0,0.4) 0 1px 0; text-align: center; color: #fff; text-shadow: rgba(0,0,0,0.3) 0 -1px 0; z-index: 2; } .iphone_header .iphone_time { font: 200 65px/69px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; width: 100%; } .iphone_header .iphone_time span { position: relative; top: -4px; } .iphone_header .iphone_date { font: 200 17px/17px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; width: 100%; position: relative; top: -3px; } /* ---------------------------------------------------------------------------- */ .iphone_footer { position: absolute; width: 100%; background: -webkit-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: -moz-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: -ms-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: -o-linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); background: linear-gradient(top, rgba(112,112,112,0.3) 0%, rgba(56,56,56,0.3) 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3) 100%); left: 0; bottom: 0; bottom: -97px; height: 95px; border-top: 1px rgba(255,255,255,0.4) solid; -webkit-box-shadow: rgba(0,0,0,0.4) 0 -1px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 -1px 0; box-shadow: rgba(0,0,0,0.4) 0 -1px 0; z-index: 2; } .iphone_unlock { width: 275px; height: 51px; position: absolute; left: 50%; margin-left: -139px; top: 20px; padding: 0 0 0 2px; background: -webkit-linear-gradient(top, #020509, #232527); background: -moz-linear-gradient(top, #020509, #232527); background: -ms-linear-gradient(top, #020509, #232527); background: -o-linear-gradient(top, #020509, #232527); background: linear-gradient(top, #020509, #232527); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020509', endColorstr='#232527', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020509', endColorstr='#232527', GradientType=0); border: 1px solid #333; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; } .iphone_slider { position: absolute; width: 69px; height: 45px; left: 0; top: 3px; background: -webkit-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%); background: -moz-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%); background: -ms-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%); background: -o-linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%); background: linear-gradient(top, #fdfdfd 0%, #dddddd 50%, #d1d1d1 50%, #a1a1a1 100%); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,0.9) 0 1px 1px; -moz-box-shadow: rgba(0,0,0,0.9) 0 1px 1px; box-shadow: rgba(0,0,0,0.9) 0 1px 1px; z-index: 10; margin: 0 3px; cursor: pointer; } .iphone_slider:after{ content: ''; background: #8c8c8c; width: 18px; height: 12px; left: 21px; top: 17px; position: absolute; -webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0; box-shadow: rgba(255,255,255,0.3) 0 1px 0; } .iphone_slider:before{ content: ''; position: absolute; width: 0; height: 0; left: 34px; top: 11px; border-top: 12px solid transparent; border-left: 24px solid #8c8c8c; border-bottom: 12px solid transparent; -webkit-transform: scaleX(0.6); -moz-transform: scaleX(0.6); -ms-transform: scaleX(0.6); -o-transform: scaleX(0.6); transform: scaleX(0.6); z-index: 1; } .iphone_slide2unlock { position: absolute; left: 93px; font: 200 26px/51px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transform: scaleX(0.99); -moz-transform: scaleX(0.99); -ms-transform: scaleX(0.99); -o-transform: scaleX(0.99); transform: scaleX(0.99); top: 0; color: #fff; z-index: 4; } /* ---------------------------------------------------------------------------- */ .iphone_dock { border-bottom: 42px solid rgba(255,255,255,0.15); border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; width: 300px; position: absolute; left: 0; bottom: 4px; bottom: -80px; z-index: 5; } .iphone_dock:after { content: ''; position: absolute; top: 42px; left: -10px; display: block; width: 320px; height: 4px; background: -webkit-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: -moz-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: linear-gradient(left, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.30) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); -webkit-box-shadow: inset rgba(255,255,255,0.09) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.09) 0 1px 0; box-shadow: inset rgba(255,255,255,0.09) 0 1px 0; } .iphone_dock:before { content: ''; position: absolute; top: 0px; left: -100px; display: block; width: 320px; -webkit-border-radius: 0 0 300px/40px 0; -moz-border-radius: 0 0 300px/40px 0; border-radius: 0 0 300px/40px 0; height: 30px; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.20) 80%,rgba(255,255,255,0.15) 100%); z-index: -1; } /* Alert */ #iphone_alert { width : 320px; height : 480px; position: absolute; top:0; left: 0; display: block; z-index:3000; color: #fff; -webkit-transform : scale(0); -moz-transform : scale(0); -ms-transform : scale(0); -o-transform : scale(0); transform : scale(0); } #iphone_alert .alert { font: normal 17px/23px "Helvetica Neue", Arial; background: #162344; background: rgba(22,35,68,0.9); color: #fff; text-shadow: hsla(0,0%,0%,0.8) 0 -1px 0; margin: 0 auto; padding: 0 0 8px 0; border: 2px #dfe1e6 solid; position: absolute; width: 90%; left: 4.5%; top:30%; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; -webkit-box-shadow: hsla(0,0%,0%,0.7) 0 1px 2px; -moz-box-shadow: hsla(0,0%,0%,0.7) 0 1px 2px; box-shadow: hsla(0,0%,0%,0.7) 0 1px 2px; } #iphone_alert .alert::after { content: ''; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)); background: linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#697287', EndColorStr='#343f5c', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#697287', endColorstr='#343f5c', GradientType=0); height: 15%; width: 100%; -webkit-border-radius: 7px 7px 50% 50% / 7px 7px 4px 4px; -moz-border-radius: 7px 7px 50% 50% / 7px 7px 4px 4px; border-radius: 7px 7px 50% 50% / 7px 7px 4px 4px; position: absolute; left: 0; top:0; } #iphone_alert .text { position: relative; z-index: 110; text-align: center; width: 90%; left: 5%; margin: 13px 0 15px 0; } #iphone_alert .text b { margin-bottom: 5px; display: block; } #iphone_alert .button { font-weight: bold; font-size: 15px; height: 30px; line-height: 30px; text-align: center; width: 35%; cursor: pointer; border: 1px #131e3b solid; display: block; text-decoration: none; color: #fff; cursor: pointer; background: -webkit-linear-gradient(top, rgba(116, 124, 143, 0.8) 0%, rgba(52, 63, 92, 0.8) 50%, rgba(22, 35, 68, 0.8) 50%, rgba(35, 47, 78, 0.8) 100%); background: -moz-linear-gradient(top, rgba(116, 124, 143, 0.8) 0%, rgba(52, 63, 92, 0.8) 50%, rgba(22, 35, 68, 0.8) 50%, rgba(35, 47, 78, 0.8) 100%); background: -ms-linear-gradient(top, rgba(116, 124, 143, 0.8) 0%, rgba(52, 63, 92, 0.8) 50%, rgba(22, 35, 68, 0.8) 50%, rgba(35, 47, 78, 0.8) 100%); background: -o-linear-gradient(top, rgba(116, 124, 143, 0.8) 0%, rgba(52, 63, 92, 0.8) 50%, rgba(22, 35, 68, 0.8) 50%, rgba(35, 47, 78, 0.8) 100%); background: linear-gradient(top, rgba(116, 124, 143, 0.8) 0%, rgba(52, 63, 92, 0.8) 50%, rgba(22, 35, 68, 0.8) 50%, rgba(35, 47, 78, 0.8) 100%); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#747c8f', EndColorStr='#232f4e', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#747c8f', endColorstr='#232f4e', GradientType=0); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow: #454f69 0 1px 0; -moz-box-shadow: #454f69 0 1px 0; box-shadow: #454f69 0 1px 0; } #iphone_alert .button.wide { width: 235px; margin-left: 10px; } #iphone_alert .button.f_left { float: left; margin: 0 0 0 10px; } #iphone_alert .button.f_right { float: right; margin: 0 10px 0 0; } #iphone_alert .button.light { background: -webkit-linear-gradient(top, rgba(174, 178, 190, 0.6) 0%, rgba(106, 116, 139, 0.6) 50%, rgba(80, 90, 117, 0.6) 50%, rgba(95, 105, 129, 0.6) 100%); background: -moz-linear-gradient(top, rgba(174, 178, 190, 0.6) 0%, rgba(106, 116, 139, 0.6) 50%, rgba(80, 90, 117, 0.6) 50%, rgba(95, 105, 129, 0.6) 100%); background: -ms-linear-gradient(top, rgba(174, 178, 190, 0.6) 0%, rgba(106, 116, 139, 0.6) 50%, rgba(80, 90, 117, 0.6) 50%, rgba(95, 105, 129, 0.6) 100%); background: -o-linear-gradient(top, rgba(174, 178, 190, 0.6) 0%, rgba(106, 116, 139, 0.6) 50%, rgba(80, 90, 117, 0.6) 50%, rgba(95, 105, 129, 0.6) 100%); background: linear-gradient(top, rgba(174, 178, 190, 0.6) 0%, rgba(106, 116, 139, 0.6) 50%, rgba(80, 90, 117, 0.6) 50%, rgba(95, 105, 129, 0.6) 100%); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#aeb2be', EndColorStr='#5f6981', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aeb2be', endColorstr='#5f6981', GradientType=0); -webkit-box-shadow: #454f69 0 1px 0, inset #dadde4 0 1px 0; -moz-box-shadow: #454f69 0 1px 0, inset #dadde4 0 1px 0; box-shadow: #454f69 0 1px 0, inset #dadde4 0 1px 0; } #iphone_alert .button:active { background: -webkit-linear-gradient(top, rgba(90, 95, 102, 0.7) 0%, rgba(41, 47, 57, 0.7) 50%, rgba(23, 31, 40, 0.7) 50%, rgba(36, 44, 53, 0.7) 100%); background: -moz-linear-gradient(top, rgba(90, 95, 102, 0.7) 0%, rgba(41, 47, 57, 0.7) 50%, rgba(23, 31, 40, 0.7) 50%, rgba(36, 44, 53, 0.7) 100%); background: -ms-linear-gradient(top, rgba(90, 95, 102, 0.7) 0%, rgba(41, 47, 57, 0.7) 50%, rgba(23, 31, 40, 0.7) 50%, rgba(36, 44, 53, 0.7) 100%); background: -o-linear-gradient(top, rgba(90, 95, 102, 0.7) 0%, rgba(41, 47, 57, 0.7) 50%, rgba(23, 31, 40, 0.7) 50%, rgba(36, 44, 53, 0.7) 100%); background: linear-gradient(top, rgba(90, 95, 102, 0.7) 0%, rgba(41, 47, 57, 0.7) 50%, rgba(23, 31, 40, 0.7) 50%, rgba(36, 44, 53, 0.7) 100%); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5a5f66', EndColorStr='#242c35', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5f66', endColorstr='#242c35', GradientType=0); -webkit-box-shadow: #454f69 0 1px 0; -moz-box-shadow: #454f69 0 1px 0; box-shadow: #454f69 0 1px 0; } .f_left {float: left} .f_right {float: right} /* ---------------------------------------------------------------------------- */ .iphone_icons_containter { top: 34px; width: 320px; position: relative; display: block; position: absolute; left: 0; } .icon { width: 56px; height: 56px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 1px 2px; -moz-box-shadow: rgba(0,0,0,0.5) 0 1px 2px; box-shadow: rgba(0,0,0,0.5) 0 1px 2px; float: left; margin-bottom: 30px; z-index: 10; position: absolute; } .icon span { display: block; text-align: center; font: bold 11px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color: #fff; text-shadow: rgba(0,0,0,0.3) 1px 2px 1px; text-transform: capitalize; position: absolute; top: 58px; left: -10px; width: 76px; } .icon:nth-child(4n + 1) { left:17px; } .icon:nth-child(4n + 2) { left:92px; } .icon:nth-child(4n + 3) { left:168px; } .icon:nth-child(4n + 4) { left:243px; } .icon:nth-child(-n + 16) { top: 258px; } .icon:nth-child(-n + 12) { top: 172px; } .icon:nth-child(-n + 8) { top: 86px; } .icon:nth-child(-n + 4) { top: 0; } .iphone_dock .icon { position: relative; margin-top: -30px; z-index: 10; top: 0; left: 0; } .iphone_dock .icon:nth-child(1) { margin-left:7px; margin-right: 19px; } .iphone_dock .icon:nth-child(2) { margin-right: 20px; } .iphone_dock .icon:nth-child(3) { margin-right: 19px; } /* ---------------------------------------------------------------------------- */ .i_message, .i_contacts, .i_calendar, .i_clock, .i_notes, .i_reminders, .i_mail, .i_app_store, .i_videos, .i_youtube, .i_maps, .i_calculator, .i_itunes, .i_stocks, .i_voice_memos, .i_weather, .i_phone, .i_safari, .i_camera, .i_music { width: 100%; height: 100%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; overflow: hidden; cursor: default; } /* ---------------------------------------------------------------------------- */ .i_message { background: -webkit-linear-gradient(top, #015801, #06f700); background: -moz-linear-gradient(top, #015801, #06f700); background: -ms-linear-gradient(top, #015801, #06f700); background: -o-linear-gradient(top, #015801, #06f700); background: linear-gradient(top, #015801, #06f700); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0); overflow: hidden; } .i_message .bg_angled { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 125%; height: 125%; position: absolute; left: -7px; top: -7px; -webkit-background-size: 4px 4px; -moz-background-size: 4px 4px; -ms-background-size: 4px 4px; -o-background-size: 4px 4px; background-size: 4px 4px; background-color: none; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .i_message:after{ content: ''; -webkit-box-shadow: inset #06f700 0 0 2px; -moz-box-shadow: inset #06f700 0 0 2px; box-shadow: inset #06f700 0 0 2px; width: 100%; height: 100%; position: absolute; display: block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index: 2; } .i_message:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.5); z-index: 5; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_message .bulb { position: absolute; width: 39px; height: 32px; top: 50%; left: 50%; margin-left: -19.5px; margin-top: -16px; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; border-radius: 50%/50%; background: -webkit-linear-gradient(bottom, #fff, #cbdae9 50%); background: -moz-linear-gradient(bottom, #fff, #cbdae9 50%); background: -ms-linear-gradient(bottom, #fff, #cbdae9 50%); background: -o-linear-gradient(bottom, #fff, #cbdae9 50%); background: linear-gradient(bottom, #fff, #cbdae9 50%); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0); -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; z-index: 2; } .i_message .bulb { position: absolute; width: 39px; height: 32px; top: 47%; left: 50%; margin-left: -19.5px; margin-top: -16px; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; border-radius: 50%/50%; background: -webkit-linear-gradient(bottom, #fff, #cbdae9 50%); background: -moz-linear-gradient(bottom, #fff, #cbdae9 50%); background: -ms-linear-gradient(bottom, #fff, #cbdae9 50%); background: -o-linear-gradient(bottom, #fff, #cbdae9 50%); background: linear-gradient(bottom, #fff, #cbdae9 50%); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbdae9', endColorstr='#ffffff', GradientType=0); -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; z-index: 2; } .i_message .tail { position: absolute; background: #fff; width: 11px; height: 7px; left: 11px; bottom: 12px; -webkit-border-radius: 0 0 100% 0/ 0 0 100% 0; -moz-border-radius: 0 0 100% 0/ 0 0 100% 0; border-radius: 0 0 100% 0/ 0 0 100% 0; z-index: 1; -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; box-shadow: rgba(0,0,0,0.4) 0 0 2px, inset #e7e8e9 0 -1px 0; } .i_message .tail:after { content: ''; position: absolute; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; left: -6px; top: -3px; background: -webkit-linear-gradient(bottom, #05d400, #04ba00); background: -moz-linear-gradient(bottom, #05d400, #04ba00); background: -ms-linear-gradient(bottom, #05d400, #04ba00); background: -o-linear-gradient(bottom, #05d400, #04ba00); background: linear-gradient(bottom, #05d400, #04ba00); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04ba00', endColorstr='#05d400', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04ba00', endColorstr='#05d400', GradientType=0); } .i_message .tail:before { content: ''; position: absolute; width: 10px; height: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; left: -6px; top: -3px; -webkit-background-size: 4px 4px; -moz-background-size: 4px 4px; -ms-background-size: 4px 4px; -o-background-size: 4px 4px; background-size: 4px 4px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%, transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%, transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%, transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%, transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%); background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 20%, transparent 20%, transparent 70%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .2) 100%); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 10; } .i_message .hack { background: -webkit-linear-gradient(top, #ebf1f7, #fff); background: -moz-linear-gradient(top, #ebf1f7, #fff); background: -ms-linear-gradient(top, #ebf1f7, #fff); background: -o-linear-gradient(top, #ebf1f7, #fff); background: linear-gradient(top, #ebf1f7, #fff); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr='#ffffff', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f7', endColorstr='#ffffff', GradientType=0); width: 5px; height: 5px; left: 15px; top: 36px; position: absolute; z-index: 10; -webkit-border-radius:0 0 3px 0; -moz-border-radius:0 0 3px 0; border-radius:0 0 3px 0; } /* ---------------------------------------------------------------------------- */ .i_contacts { background: -webkit-linear-gradient(top, #e0b77a, #d6983f); background: -moz-linear-gradient(top, #e0b77a, #d6983f); background: -ms-linear-gradient(top, #e0b77a, #d6983f); background: -o-linear-gradient(top, #e0b77a, #d6983f); background: linear-gradient(top, #e0b77a, #d6983f); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0b77a', endColorstr='#d6983f', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0b77a', endColorstr='#d6983f', GradientType=0); } .i_contacts:after { content: ''; position: absolute; right: 0; top: 0; width: 10px; height: 100%; background: -webkit-linear-gradient(left, #36251c, #8b5c40); background: -moz-linear-gradient(left, #36251c, #8b5c40); background: -ms-linear-gradient(left, #36251c, #8b5c40); background: -o-linear-gradient(left, #36251c, #8b5c40); background: linear-gradient(left, #36251c, #8b5c40); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36251c', endColorstr='#8b5c40', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36251c', endColorstr='#8b5c40', GradientType=1); -webkit-box-shadow: #a37530 -1px 0 1px, inset rgba(255,255,255,0.1) -1px 0 0; -moz-box-shadow: #a37530 -1px 0 1px, inset rgba(255,255,255,0.1) -1px 0 0; box-shadow: #a37530 -1px 0 1px, inset rgba(255,255,255,0.1) -1px 0 0; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } .i_contacts .right_side { position: absolute; width: 8px; padding: 0 0 0 2px; height: 100%; top: 0; right: 0; font: bold 4px/9px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important; text-transform: uppercase; color: #d59460; z-index: 3; text-shadow: rgba(0,0,0,1) 0 0 1px, rgba(0,0,0,1) 0 0 1px; -webkit-background-size: 100% 17%; -moz-background-size: 100% 17%; -ms-background-size: 100% 17%; -o-background-size: 100% 17%; background-size: 100% 17%; background-image: -webkit-linear-gradient(top, transparent 0%, transparent 90%, #32251d 100%); background-image: -moz-linear-gradient(top, transparent 0%, transparent 90%, #32251d 100%); background-image: -ms-linear-gradient(top, transparent 0%, transparent 90%, #32251d 100%); background-image: -o-linear-gradient(top, transparent 0%, transparent 90%, #32251d 100%); background-image: linear-gradient(top, transparent 0%, transparent 90%, #32251d 100%); -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; opacity: 0.6; } .i_contacts .left_side { position: absolute; width: 8px; height: 100%; top: 8px; left: 0; z-index: 3; -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; } .i_contacts .left_side hr { position: relative; display: block; margin: 0 0 3px 0; padding: 0; height: 1px; width: 9px; border: none; background: -webkit-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: -moz-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: -ms-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: -o-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); z-index: 7; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .i_contacts .left_side hr:before { content: ''; position: absolute; width: 2px; height: 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #000; z-index: 0; top: -50%; right: -10%; -webkit-box-shadow: rgba(255,255,255,0.2) 0 0 1px 1px; -moz-box-shadow: rgba(255,255,255,0.2) 0 0 1px 1px; box-shadow: rgba(255,255,255,0.2) 0 0 1px 1px; } .i_contacts .left_side hr:after { content: ''; position: absolute; display: block; height: 1px; width: 9px; border: none; background: -webkit-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: -moz-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: -ms-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: -o-linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); background: linear-gradient(left, #626265 0%, #fff 50%, #626265 100%); z-index: 7; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .i_contacts .profile { position: absolute; width: 17px; height: 5px; top: 31px; left: 18px; -webkit-border-radius: 50% 50% 0 0 / 3px 3px 0 0; -moz-border-radius: 50% 50% 0 0 / 3px 3px 0 0; border-radius: 50% 50% 0 0 / 3px 3px 0 0; background: #814b2b; -webkit-box-shadow: inset #270000 0 1px 1px; -moz-box-shadow: inset #270000 0 1px 1px; box-shadow: inset #270000 0 1px 1px; } .i_contacts .profile .head { position: absolute; width: 7px; height: 8px; top: -10px; left: 33%; -webkit-border-radius: 50% / 3px 3px 4px 4px; -moz-border-radius: 50% / 3px 3px 4px 4px; border-radius: 50% / 3px 3px 4px 4px; background: #814b2b; -webkit-box-shadow: inset #270000 0 1px 2px; -moz-box-shadow: inset #270000 0 1px 2px; box-shadow: inset #270000 0 1px 2px; -webkit-transform: scaleY(1.2); -moz-transform: scaleY(1.2); -ms-transform: scaleY(1.2); -o-transform: scaleY(1.2); transform: scaleY(1.2); } .i_contacts .profile .neck{ position: absolute; width: 1px; height: 0; top: -4px; left: 39%; border-bottom: 6px solid #814b2b; border-left: 2px solid transparent; border-right: 2px solid transparent; } /* ---------------------------------------------------------------------------- */ .i_calendar { background: -webkit-linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%); background: -moz-linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%); background: -ms-linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%); background: -o-linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%); background: linear-gradient(top, #e2a2a2 0%, #bc3535 14px, #982727 14.5px, #711616 15px, #4f2d2d 15.5px, #6e7476 16px, #979797 16.5px, #b4b4b4 17px, #fafafa 18px, #fafafa 19px, #fafafa 100%); -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_calendar .day { height: 14px; text-align: center; font:bold 9px/14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color: #fff; text-shadow: rgba(0,0,0,0.2) 0 1px 0; } .i_calendar .day_num { font: bold 40px/42px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color: #333333; text-align: center; -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 0 10px; -moz-box-shadow: inset rgba(0,0,0,0.5) 0 0 10px; box-shadow: inset rgba(0,0,0,0.5) 0 0 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } /* ---------------------------------------------------------------------------- */ .i_clock { background: #000 } .i_clock:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.2); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_clock:after{ content: ''; width: 48px; height: 47px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; left: 4px; top: 4px; position: absolute; display: block; background: #fff; z-index: 2; -webkit-box-shadow: #000 0 0 0 1px, inset #eeeeee 0 -4px 1px , inset #eeeeee -4px -4px 1px, inset #eeeeee 4px -4px 1px ; -moz-box-shadow: #000 0 0 0 1px, inset #eeeeee 0 -4px 1px , inset #eeeeee -4px -4px 1px, inset #eeeeee 4px -4px 1px ; box-shadow: #000 0 0 0 1px, inset #eeeeee 0 -4px 1px , inset #eeeeee -4px -4px 1px, inset #eeeeee 4px -4px 1px ; } .i_clock .gray_blick { position: absolute; width: 44px; height: 35px; background: #eee; -webkit-border-radius: 50% 50% 50% 50% / 10px 10px 50% 50%; -moz-border-radius: 50% 50% 50% 50% / 10px 10px 50% 50%; border-radius: 50% 50% 50% 50% / 10px 10px 50% 50%; top: 15px; left: 6px; z-index: 3; } .i_clock .center_dot { position: absolute; width: 5px; height: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; left: 25px; top: 25px; background: #eee; -webkit-box-shadow: #000 0 0 0 1px; -moz-box-shadow: #000 0 0 0 1px; box-shadow: #000 0 0 0 1px; z-index: 10; } .i_clock .center_dot:after { content: ''; width: 3px; height: 3px; background: #dd0000; position: absolute; top: 1px; left: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset #eee 0 0 1px; -moz-box-shadow: inset #eee 0 0 1px; box-shadow: inset #eee 0 0 1px; } .i_clock .second { position: absolute; left: 27px; top: 10px; width: 1px; height: 18px; z-index: 11; background: #dd0000; } .i_clock .minute { position: absolute; left: 35px; top: 13px; width: 0px; height: 0px; z-index: 3; border-bottom: 30px solid rgba(0,0,0,1); border-left: 3px solid transparent; border-right: 3px solid transparent; -webkit-transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg); -moz-transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg); -ms-transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg); -o-transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg); transform: scale(0.4) scaleY(2) scaleX(1.5) rotate(92deg); } .i_clock .hour { position: absolute; left: 19px; top: 10px; width: 0px; height: 0px; z-index: 3; border-bottom: 25px solid rgba(0,0,0,1); border-left: 4px solid transparent; border-right: 4px solid transparent; -webkit-transform: scale(0.4) scaleY(2) rotate(-60deg); -moz-transform: scale(0.4) scaleY(2) rotate(-60deg); -ms-transform: scale(0.4) scaleY(2) rotate(-60deg); -o-transform: scale(0.4) scaleY(2) rotate(-60deg); transform: scale(0.4) scaleY(2) rotate(-60deg); } .i_clock ul { margin: 0; padding: 0;} .i_clock li { list-style: none; position: absolute; z-index: 3; font: 6px/7px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; color: #000;} .i_clock li:nth-child(1) { left: 35px; top: 7px } .i_clock li:nth-child(2) { left: 42px; top: 13px } .i_clock li:nth-child(3) { left: 45px; top: 23px } .i_clock li:nth-child(4) { left: 42px; top: 33px } .i_clock li:nth-child(5) { left: 35px; top: 41px } .i_clock li:nth-child(6) { left: 26px; top: 43px } .i_clock li:nth-child(7) { left: 17px; top: 41px } .i_clock li:nth-child(8) { left: 9px; top: 33px } .i_clock li:nth-child(9) { left: 8px; top: 23px } .i_clock li:nth-child(10) { left: 10px; top: 13px } .i_clock li:nth-child(11) { left: 16px; top: 7px } .i_clock li:nth-child(12) { left: 23px; top: 5px } /* ---------------------------------------------------------------------------- */ .i_notes { background: -webkit-linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% ); background: -moz-linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% ); background: -ms-linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% ); background: -o-linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% ); background: linear-gradient(top, #785b4c 0%, #42332a 15px, #221c18 16px, #929270 17px, #faf8b1 17px, #faf8b1 100% ); } .i_notes:after { content: ''; position: absolute; width: 100%; height: 1px; background: #d3d699; top: 23px; left: 0; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; -webkit-box-shadow: #d3d699 0 5px 0, #d3d699 0 10px 0, #d3d699 0 15px 0, #d3d699 0 20px 0, #d3d699 0 25px 0; -moz-box-shadow: #d3d699 0 5px 0, #d3d699 0 10px 0, #d3d699 0 15px 0, #d3d699 0 20px 0, #d3d699 0 25px 0; box-shadow: #d3d699 0 5px 0, #d3d699 0 10px 0, #d3d699 0 15px 0, #d3d699 0 20px 0, #d3d699 0 25px 0; } .i_notes:before { content: ''; position: absolute; height: 40px; width: 1px; border-left: 1px solid #d9c884; border-right: 1px solid #d9c884; top: 17px; left: 10px; z-index: 3; } /* ---------------------------------------------------------------------------- */ .i_reminders { background: #1f1f1f; -webkit-box-shadow: inset #1f1f1f 0 0 0 1px, inset rgba(255,255,255,0.2) 0 0 5px, inset rgba(255,255,255,0.2) 0 3px 3px; -moz-box-shadow: inset #1f1f1f 0 0 0 1px, inset rgba(255,255,255,0.2) 0 0 5px, inset rgba(255,255,255,0.2) 0 3px 3px; box-shadow: inset #1f1f1f 0 0 0 1px, inset rgba(255,255,255,0.2) 0 0 5px, inset rgba(255,255,255,0.2) 0 3px 3px; } .i_reminders:after { content: ''; position: absolute; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #eeeeee; top: 5px; left: 5px; width: 46px; height: 46px; z-index: 1; -webkit-box-shadow: inset #cbcbcb 0 -1px 0, inset #f0efef 0 1px 0, inset rgba(255,255,255,1) 0 2px 0; -moz-box-shadow: inset #cbcbcb 0 -1px 0, inset #f0efef 0 1px 0, inset rgba(255,255,255,1) 0 2px 0; box-shadow: inset #cbcbcb 0 -1px 0, inset #f0efef 0 1px 0, inset rgba(255,255,255,1) 0 2px 0; } .i_reminders div { position: relative; width: 36px; text-align: left; padding: 0 5px; top: 5px; left: 5px; height: 16px !important; font: 9px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; z-index: 2; -webkit-box-shadow: inset #cbcbcb 0 -1px 0, rgba(255,255,255,1) 0 0.9px 0; -moz-box-shadow: inset #cbcbcb 0 -1px 0, rgba(255,255,255,1) 0 0.9px 0; box-shadow: inset #cbcbcb 0 -1px 0, rgba(255,255,255,1) 0 0.9px 0; color: #3b3b3b; text-shadow: rgba(255,255,255,1) 0 1px 0; } .i_reminders div:last-child { -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; line-height: 13px; } .i_reminders div:last-child:after { content: ''; width: 1px; height: 46px; left: 17px; -webkit-box-shadow: rgba(255,0,41,0.2) -1px 0 0, rgba(255,0,41,0.2) 1px 0 0; -moz-box-shadow: rgba(255,0,41,0.2) -1px 0 0, rgba(255,0,41,0.2) 1px 0 0; box-shadow: rgba(255,0,41,0.2) -1px 0 0, rgba(255,0,41,0.2) 1px 0 0; z-index: 2; position: absolute; top: -32px; } .i_reminders div:before { content: ''; position: absolute; background: #b1b1b1; height: 3px; width: 17px; left: 23px; top: 7px; -webkit-box-shadow: rgba(255,255,255,1) 0 1px 1px; -moz-box-shadow: rgba(255,255,255,1) 0 1px 1px; box-shadow: rgba(255,255,255,1) 0 1px 1px; } .i_reminders div:nth-child(2):before { width: 13px; top: 6px; } .i_reminders div:nth-child(3):before { top: 5px } /* ---------------------------------------------------------------------------- */ .i_mail { background: -webkit-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -moz-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -ms-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -o-linear-gradient(top, #0148b1 30%, #4ed4f8); background: linear-gradient(top, #0148b1 30%, #4ed4f8); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); } .i_mail:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.2); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_mail .mail { width: 38px; height: 23px; position: absolute; display: block; z-index: 1; left: 9px; top: 16px; background: -webkit-linear-gradient(top, #f8f8f9, #e6e8ec); background: -moz-linear-gradient(top, #f8f8f9, #e6e8ec); background: -ms-linear-gradient(top, #f8f8f9, #e6e8ec); background: -o-linear-gradient(top, #f8f8f9, #e6e8ec); background: linear-gradient(top, #f8f8f9, #e6e8ec); -webkit-box-shadow: rgba(0,0,0,0.2) 0 1px 1px; -moz-box-shadow: rgba(0,0,0,0.2) 0 1px 1px; box-shadow: rgba(0,0,0,0.2) 0 1px 1px; overflow: hidden; } .i_mail .mail .mail_top { position: absolute; width: 28px; height: 28px; left: 13%; top: -17px; background: #fcfcfc; -webkit-box-shadow: rgba(0,0,0,0.9) 0 0 1px; -moz-box-shadow: rgba(0,0,0,0.9) 0 0 1px; box-shadow: rgba(0,0,0,0.9) 0 0 1px; -webkit-transform: rotate(-36deg) skew(20deg); -moz-transform: rotate(-36deg) skew(20deg); -ms-transform: rotate(-36deg) skew(20deg); -o-transform: rotate(-36deg) skew(20deg); transform: rotate(-36deg) skew(20deg); z-index: 50000; } .i_mail .mail .mail_top:before { content: ''; position: absolute; width: 15px; height: 15px; left: 0; bottom: 0; -webkit-box-shadow: rgba(0,0,0,0.2) -1px 1px 1px; -moz-box-shadow: rgba(0,0,0,0.2) -1px 1px 1px; box-shadow: rgba(0,0,0,0.2) -1px 1px 1px; -webkit-transform: rotate(-4deg) skew(-8deg); -moz-transform: rotate(-4deg) skew(-8deg); -ms-transform: rotate(-4deg) skew(-8deg); -o-transform: rotate(-4deg) skew(-8deg); transform: rotate(-4deg) skew(-8deg); } .i_mail .mail .mail_bottom { position: absolute; width: 28px; height: 28px; left: 17%; top: 13px; -webkit-box-shadow: rgba(0,0,0,0.9) 0 0 1px; -moz-box-shadow: rgba(0,0,0,0.9) 0 0 1px; box-shadow: rgba(0,0,0,0.9) 0 0 1px; -webkit-transform: rotate(-34deg) skew(20deg); -moz-transform: rotate(-34deg) skew(20deg); -ms-transform: rotate(-34deg) skew(20deg); -o-transform: rotate(-34deg) skew(20deg); transform: rotate(-34deg) skew(20deg); z-index: 4; } .i_mail .clouds, .i_mail .clouds2 { position: absolute; width: 100%; height: 100%; left: 11px; top: 1px; -webkit-transform: scaleX(1.3) rotate(10deg); -moz-transform: scaleX(1.3) rotate(10deg); -ms-transform: scaleX(1.3) rotate(10deg); -o-transform: scaleX(1.3) rotate(10deg); transform: scaleX(1.3) rotate(10deg); } .i_mail .clouds2 { position: absolute; width: 100%; height: 100%; left: 5px; top: 30px; -webkit-transform: scaleX(1.3) rotate(190deg); -moz-transform: scaleX(1.3) rotate(190deg); -ms-transform: scaleX(1.3) rotate(190deg); -o-transform: scaleX(1.3) rotate(190deg); transform: scaleX(1.3) rotate(190deg); } .i_mail .clouds b, .i_mail .clouds2 b { position: absolute; left: 0; bottom: 0; width: 5px; display: block; height: 5px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-image: -webkit-gradient(radial, 50% 50%,200,50% 50%,20, from(rgba(255, 255, 255, 0.00)), to(rgba(255, 255, 255, 0.5))); background-image: -webkit-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00)); background-image: -moz-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00)); background-image: -ms-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00)); background-image: -o-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00)); background-image: radial-gradient(50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.00)); } .i_mail .clouds b:nth-child(1), .i_mail .clouds2 b:nth-child(1) { bottom: 10px; left: 20px} .i_mail .clouds b:nth-child(2), .i_mail .clouds2 b:nth-child(2) { bottom: 9px; left: 16px} .i_mail .clouds b:nth-child(3), .i_mail .clouds2 b:nth-child(3) { bottom: 8px; left: 11px} .i_mail .clouds b:nth-child(4), .i_mail .clouds2 b:nth-child(4) { bottom: 6px; left: 14px} .i_mail .clouds b:nth-child(5), .i_mail .clouds2 b:nth-child(5) { bottom: 5px; left: 8px} .i_mail .clouds b:nth-child(6), .i_mail .clouds2 b:nth-child(6) { bottom: 3px; left: 5px} .i_mail .clouds b:nth-child(7), .i_mail .clouds2 b:nth-child(7) { bottom: 7px; left: 4px} .i_mail .clouds b:nth-child(8), .i_mail .clouds2 b:nth-child(8) { bottom: 4px; left: 12px} .i_mail .clouds b:nth-child(9), .i_mail .clouds2 b:nth-child(9) { bottom: 4px; left: 16px} .i_mail .clouds b:nth-child(10), .i_mail .clouds2 b:nth-child(10) { bottom: 4px; left: 4px} .i_mail .clouds b:nth-child(11), .i_mail .clouds2 b:nth-child(11) { bottom: 2px; left: 2px} .i_mail .clouds b:nth-child(12), .i_mail .clouds2 b:nth-child(12) { bottom: 4px; left: 3px} .i_mail .clouds b:nth-child(13), .i_mail .clouds2 b:nth-child(13) { bottom: 0px; left: 4px} .i_mail .clouds b:nth-child(14), .i_mail .clouds2 b:nth-child(14) { bottom: 0px; left: 8px} .i_mail .clouds b:nth-child(15), .i_mail .clouds2 b:nth-child(15) { bottom: 0px; left: 12px} .i_mail .clouds b:nth-child(16), .i_mail .clouds2 b:nth-child(16) { bottom: 0px; left: 15px} .i_mail .clouds b:nth-child(17), .i_mail .clouds2 b:nth-child(17) { bottom: 0px; left: 18px} .i_mail .clouds b:nth-child(18), .i_mail .clouds2 b:nth-child(18) { bottom: 4px; left: 19px} .i_mail .clouds b:nth-child(19), .i_mail .clouds2 b:nth-child(19) { bottom: 4px; left: 16px} .i_mail .clouds b:nth-child(20), .i_mail .clouds2 b:nth-child(20) { bottom: 4px; left: 22px} .i_mail .clouds b:nth-child(21), .i_mail .clouds2 b:nth-child(21) { bottom: 0px; left: 24px} .i_mail .clouds b:nth-child(22), .i_mail .clouds2 b:nth-child(22) { bottom: 2px; left: 22px} .i_mail .clouds b:nth-child(23), .i_mail .clouds2 b:nth-child(23) { bottom: 5px; left: 15px} .i_mail .clouds b:nth-child(24), .i_mail .clouds2 b:nth-child(24) { bottom: 8px; left: 4px} .i_mail .clouds b:nth-child(25), .i_mail .clouds2 b:nth-child(25) { bottom: 0px; left: 8px} .i_mail .clouds b:nth-child(26), .i_mail .clouds2 b:nth-child(26) { bottom: 0px; left: 5px} .i_mail .clouds b:nth-child(27), .i_mail .clouds2 b:nth-child(27) { bottom: 0px; left: 6px} .i_mail .clouds b:nth-child(28), .i_mail .clouds2 b:nth-child(28) { bottom: 0px; left: 12px} .i_mail .clouds b:nth-child(29), .i_mail .clouds2 b:nth-child(29) { bottom: 0px; left: 16px} .i_mail .clouds b:nth-child(30), .i_mail .clouds2 b:nth-child(30) { bottom: 8px; left: 15px} /* ---------------------------------------------------------------------------- */ .i_app_store { background: -webkit-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -moz-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -ms-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -o-linear-gradient(top, #0148b1 30%, #4ed4f8); background: linear-gradient(top, #0148b1 30%, #4ed4f8); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); } .i_app_store:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.2); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_app_store:after{ content: ''; width: 38px; height: 38px; position: absolute; display: block; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index: 1; left: 9px; top: 9px; -webkit-box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; -moz-box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; } .i_app_store .kirpich { position: absolute; width: 22px; left: 17px; top: 27px; height: 3px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 0 1px; -moz-box-shadow: rgba(0,0,0,0.5) 0 0 1px; box-shadow: rgba(0,0,0,0.5) 0 0 1px; background: #fff; z-index: 5; } .i_app_store .kirpich .pen1 { position: absolute; width: 15px; left: -1px; top: 0px; height: 2px; background: #fff; z-index: 5; -webkit-transform: rotate(-65deg); -moz-transform: rotate(-65deg); -ms-transform: rotate(-65deg); -o-transform: rotate(-65deg); transform: rotate(-65deg); -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; -webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; -moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; } .i_app_store .kirpich .pen1:after { position: absolute; content: ''; left: -24%; top: 0; width: 0; height: 0; border-top: 1px solid transparent; border-right: 3px solid #fff; border-bottom: 1px solid transparent; z-index: 0; } .i_app_store .kirpich .pen1:before { position: absolute; content: ''; right: 14%; top: 0; width: 2px; height: 100%; -webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; -moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; } .i_app_store .kirpich .pen2 { position: absolute; width: 22px; right: -5px; top: 0px; height: 2px; -webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; -moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; background: #fff; z-index: 5; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .i_app_store .kirpich .pen2:after { position: absolute; content: ''; right: -9%; top: -1px; width: 0px; height: 2px; border-right: 6px solid #fff; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); z-index: 0; -webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; -moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; } .i_app_store .kirpich .pen2:before { position: absolute; content: ''; right: 14%; top: 0; width: 2px; height: 100%; -webkit-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; -moz-box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; box-shadow: #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px, #2353d9 0 0 1px; } .i_app_store .glow { position: absolute; top: 20px; width: 100%; left: 0; } .i_app_store .glow hr { background: -webkit-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: -moz-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: -ms-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: -o-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); border: none; position: absolute; height: 1px; width: 100%; left: 0; top: 0; display: block; } .i_app_store .glow hr:nth-child(1) { opacity: 0; -webkit-transform: rotate(0deg) scale(1.5); -moz-transform: rotate(0deg) scale(1.5); -ms-transform: rotate(0deg) scale(1.5); -o-transform: rotate(0deg) scale(1.5); transform: rotate(0deg) scale(1.5); } .i_app_store .glow hr:nth-child(2) { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .i_app_store .glow hr:nth-child(3) { -webkit-transform: rotate(10deg) scale(1.5); -moz-transform: rotate(10deg) scale(1.5); -ms-transform: rotate(10deg) scale(1.5); -o-transform: rotate(10deg) scale(1.5); transform: rotate(10deg) scale(1.5); } .i_app_store .glow hr:nth-child(4) { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } .i_app_store .glow hr:nth-child(5) { -webkit-transform: rotate(20deg) scale(1.5); -moz-transform: rotate(20deg) scale(1.5); -ms-transform: rotate(20deg) scale(1.5); -o-transform: rotate(20deg) scale(1.5); transform: rotate(20deg) scale(1.5); } .i_app_store .glow hr:nth-child(6) { -webkit-transform: rotate(25deg) scale(1.1); -moz-transform: rotate(25deg) scale(1.1); -ms-transform: rotate(25deg) scale(1.1); -o-transform: rotate(25deg) scale(1.1); transform: rotate(25deg) scale(1.1); } .i_app_store .glow hr:nth-child(7) { -webkit-transform: rotate(30deg) scale(1.5); -moz-transform: rotate(30deg) scale(1.5); -ms-transform: rotate(30deg) scale(1.5); -o-transform: rotate(30deg) scale(1.5); transform: rotate(30deg) scale(1.5); } .i_app_store .glow hr:nth-child(8) { -webkit-transform: rotate(35deg) scale(1.2); -moz-transform: rotate(35deg) scale(1.2); -ms-transform: rotate(35deg) scale(1.2); -o-transform: rotate(35deg) scale(1.2); transform: rotate(35deg) scale(1.2); } .i_app_store .glow hr:nth-child(9) { -webkit-transform: rotate(40deg) scale(1.5); -moz-transform: rotate(40deg) scale(1.5); -ms-transform: rotate(40deg) scale(1.5); -o-transform: rotate(40deg) scale(1.5); transform: rotate(40deg) scale(1.5); } .i_app_store .glow hr:nth-child(10) { -webkit-transform: rotate(45deg) scale(1.3); -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -o-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } .i_app_store .glow hr:nth-child(11) { -webkit-transform: rotate(50deg) scale(1.5); -moz-transform: rotate(50deg) scale(1.5); -ms-transform: rotate(50deg) scale(1.5); -o-transform: rotate(50deg) scale(1.5); transform: rotate(50deg) scale(1.5); } .i_app_store .glow hr:nth-child(12) { -webkit-transform: rotate(55deg) scale(1.4); -moz-transform: rotate(55deg) scale(1.4); -ms-transform: rotate(55deg) scale(1.4); -o-transform: rotate(55deg) scale(1.4); transform: rotate(55deg) scale(1.4); } .i_app_store .glow hr:nth-child(13) { -webkit-transform: rotate(60deg) scale(1.5); -moz-transform: rotate(60deg) scale(1.5); -ms-transform: rotate(60deg) scale(1.5); -o-transform: rotate(60deg) scale(1.5); transform: rotate(60deg) scale(1.5); } .i_app_store .glow hr:nth-child(14) { -webkit-transform: rotate(65deg) scale(1.3); -moz-transform: rotate(65deg) scale(1.3); -ms-transform: rotate(65deg) scale(1.3); -o-transform: rotate(65deg) scale(1.3); transform: rotate(65deg) scale(1.3); } .i_app_store .glow hr:nth-child(15) { -webkit-transform: rotate(70deg) scale(1.5); -moz-transform: rotate(70deg) scale(1.5); -ms-transform: rotate(70deg) scale(1.5); -o-transform: rotate(70deg) scale(1.5); transform: rotate(70deg) scale(1.5); } .i_app_store .glow hr:nth-child(16) { -webkit-transform: rotate(75deg) scale(1.1); -moz-transform: rotate(75deg) scale(1.1); -ms-transform: rotate(75deg) scale(1.1); -o-transform: rotate(75deg) scale(1.1); transform: rotate(75deg) scale(1.1); } .i_app_store .glow hr:nth-child(17) { -webkit-transform: rotate(80deg) scale(1.5); -moz-transform: rotate(80deg) scale(1.5); -ms-transform: rotate(80deg) scale(1.5); -o-transform: rotate(80deg) scale(1.5); transform: rotate(80deg) scale(1.5); } .i_app_store .glow hr:nth-child(18) { -webkit-transform: rotate(85deg) scale(1.1); -moz-transform: rotate(85deg) scale(1.1); -ms-transform: rotate(85deg) scale(1.1); -o-transform: rotate(85deg) scale(1.1); transform: rotate(85deg) scale(1.1); } .i_app_store .glow hr:nth-child(19) { -webkit-transform: rotate(90deg) scale(1.5); -moz-transform: rotate(90deg) scale(1.5); -ms-transform: rotate(90deg) scale(1.5); -o-transform: rotate(90deg) scale(1.5); transform: rotate(90deg) scale(1.5); } .i_app_store .glow hr:nth-child(20) { -webkit-transform: rotate(95deg); -moz-transform: rotate(95deg); -ms-transform: rotate(95deg); -o-transform: rotate(95deg); transform: rotate(95deg); } .i_app_store .glow hr:nth-child(21) { -webkit-transform: rotate(100deg) scale(1.5); -moz-transform: rotate(100deg) scale(1.5); -ms-transform: rotate(100deg) scale(1.5); -o-transform: rotate(100deg) scale(1.5); transform: rotate(100deg) scale(1.5); } .i_app_store .glow hr:nth-child(22) { -webkit-transform: rotate(105deg) scale(1.1); -moz-transform: rotate(105deg) scale(1.1); -ms-transform: rotate(105deg) scale(1.1); -o-transform: rotate(105deg) scale(1.1); transform: rotate(105deg) scale(1.1); } .i_app_store .glow hr:nth-child(23) { -webkit-transform: rotate(110deg) scale(1.5); -moz-transform: rotate(110deg) scale(1.5); -ms-transform: rotate(110deg) scale(1.5); -o-transform: rotate(110deg) scale(1.5); transform: rotate(110deg) scale(1.5); } .i_app_store .glow hr:nth-child(24) { -webkit-transform: rotate(115deg) scale(1.2); -moz-transform: rotate(115deg) scale(1.2); -ms-transform: rotate(115deg) scale(1.2); -o-transform: rotate(115deg) scale(1.2); transform: rotate(115deg) scale(1.2); } .i_app_store .glow hr:nth-child(25) { -webkit-transform: rotate(120deg) scale(1.5); -moz-transform: rotate(120deg) scale(1.5); -ms-transform: rotate(120deg) scale(1.5); -o-transform: rotate(120deg) scale(1.5); transform: rotate(120deg) scale(1.5); } .i_app_store .glow hr:nth-child(26) { -webkit-transform: rotate(125deg) scale(1.3); -moz-transform: rotate(125deg) scale(1.3); -ms-transform: rotate(125deg) scale(1.3); -o-transform: rotate(125deg) scale(1.3); transform: rotate(125deg) scale(1.3); } .i_app_store .glow hr:nth-child(27) { -webkit-transform: rotate(130deg) scale(1.5); -moz-transform: rotate(130deg) scale(1.5); -ms-transform: rotate(130deg) scale(1.5); -o-transform: rotate(130deg) scale(1.5); transform: rotate(130deg) scale(1.5); } .i_app_store .glow hr:nth-child(28) { -webkit-transform: rotate(135deg) scale(1.2); -moz-transform: rotate(135deg) scale(1.2); -ms-transform: rotate(135deg) scale(1.2); -o-transform: rotate(135deg) scale(1.2); transform: rotate(135deg) scale(1.2); } .i_app_store .glow hr:nth-child(29) { -webkit-transform: rotate(140deg) scale(1.5); -moz-transform: rotate(140deg) scale(1.5); -ms-transform: rotate(140deg) scale(1.5); -o-transform: rotate(140deg) scale(1.5); transform: rotate(140deg) scale(1.5); } .i_app_store .glow hr:nth-child(30) { -webkit-transform: rotate(145deg) scale(1.1); -moz-transform: rotate(145deg) scale(1.1); -ms-transform: rotate(145deg) scale(1.1); -o-transform: rotate(145deg) scale(1.1); transform: rotate(145deg) scale(1.1); } .i_app_store .glow hr:nth-child(31) { -webkit-transform: rotate(150deg) scale(1.5); -moz-transform: rotate(150deg) scale(1.5); -ms-transform: rotate(150deg) scale(1.5); -o-transform: rotate(150deg) scale(1.5); transform: rotate(150deg) scale(1.5); } .i_app_store .glow hr:nth-child(32) { -webkit-transform: rotate(155deg) scale(1.1); -moz-transform: rotate(155deg) scale(1.1); -ms-transform: rotate(155deg) scale(1.1); -o-transform: rotate(155deg) scale(1.1); transform: rotate(155deg) scale(1.1); } .i_app_store .glow hr:nth-child(33) { -webkit-transform: rotate(160deg) scale(1.5); -moz-transform: rotate(160deg) scale(1.5); -ms-transform: rotate(160deg) scale(1.5); -o-transform: rotate(160deg) scale(1.5); transform: rotate(160deg) scale(1.5); } .i_app_store .glow hr:nth-child(34) { -webkit-transform: rotate(165deg) scale(1.2); -moz-transform: rotate(165deg) scale(1.2); -o-transform: rotate(165deg) scale(1.2); transform: rotate(165deg) scale(1.2); } .i_app_store .glow hr:nth-child(35) { -webkit-transform: rotate(170deg) scale(1.5); -moz-transform: rotate(170deg) scale(1.5); -ms-transform: rotate(170deg) scale(1.5); -o-transform: rotate(170deg) scale(1.5); transform: rotate(170deg) scale(1.5); } .i_app_store .glow hr:nth-child(36) { -webkit-transform: rotate(175deg) scale(1.3); -moz-transform: rotate(175deg) scale(1.3); -ms-transform: rotate(175deg) scale(1.3); -o-transform: rotate(175deg) scale(1.3); transform: rotate(175deg) scale(1.3); } .i_app_store .glow hr:nth-child(37) { -webkit-transform: rotate(180deg) scale(1.5); -moz-transform: rotate(180deg) scale(1.5); -ms-transform: rotate(180deg) scale(1.5); -o-transform: rotate(180deg) scale(1.5); transform: rotate(180deg) scale(1.5); } .i_app_store .glow hr:nth-child(38) { -webkit-transform: rotate(185deg) scale(1.2); -moz-transform: rotate(185deg) scale(1.2); -ms-transform: rotate(185deg) scale(1.2); -o-transform: rotate(185deg) scale(1.2); transform: rotate(185deg) scale(1.2); } .i_app_store .glow hr:nth-child(2n+1) { background: -webkit-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: -moz-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: -ms-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: -o-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); } .i_app_store .glow hr:nth-child(2n+2) { background: -webkit-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: -moz-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: -ms-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: -o-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); } /* ---------------------------------------------------------------------------- */ .i_videos { background: -webkit-linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%); background: -moz-linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%); background: -ms-linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%); background: -o-linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%); background: linear-gradient(top, #2e2e2e 0%, #000 9px, #454545 10px, #262626 11px, #040507 20px, #2c4a5b 21px, #226c98 22px, #8fd7e0 100%); } .i_videos .top { position: absolute; height: 21px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; } .i_videos .top:after { content: ''; position: absolute; width: 10px; height: 100%; top: 0; left: 0; background: -webkit-linear-gradient(top, #514f4f, #3e3c3c); background: -moz-linear-gradient(top, #514f4f, #3e3c3c); background: -ms-linear-gradient(top, #514f4f, #3e3c3c); background: -o-linear-gradient(top, #514f4f, #3e3c3c); background: linear-gradient(top, #514f4f, #3e3c3c); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#514f4f', endColorstr='#3e3c3c', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#514f4f', endColorstr='#3e3c3c', GradientType=0); -webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; border-radius: 10px 0 0 0; -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 0, inset rgba(255,255,255,0.8) 0 0 1px; -moz-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 0, inset rgba(255,255,255,0.8) 0 0 1px; box-shadow: inset rgba(0,0,0,0.5) 0 -1px 0, inset rgba(255,255,255,0.8) 0 0 1px; } .i_videos .top:before { content: ''; position: absolute; width: 3px; height: 3px; top: 42%; left: 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 2; background: #fff; -webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -1px 1px, #000 0 0 1px; -moz-box-shadow: inset rgba(0,0,0,0.2) 0 -1px 1px, #000 0 0 1px; box-shadow: inset rgba(0,0,0,0.2) 0 -1px 1px, #000 0 0 1px; } .i_videos .top .hr1, .i_videos .top .hr2 { position: absolute; top: 0; left: 15px; background: -webkit-linear-gradient(top, #e3e2e2, #aeaeae); background: -moz-linear-gradient(top, #e3e2e2, #aeaeae); background: -ms-linear-gradient(top, #e3e2e2, #aeaeae); background: -o-linear-gradient(top, #e3e2e2, #aeaeae); background: linear-gradient(top, #e3e2e2, #aeaeae); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e2e2', endColorstr='#aeaeae', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e2e2', endColorstr='#aeaeae', GradientType=0); height: 10px; width: 11px; -webkit-transform: skew(45deg); -moz-transform: skew(45deg); -ms-transform: skew(45deg); -o-transform: skew(45deg); transform: skew(45deg); -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px; -moz-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px; box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px; border: none; margin: 0; padding: 0; z-index: 6; } .i_videos .top .hr2 { left: 36px } .i_videos .top .hr3, .i_videos .top .hr4, .i_videos .top .hr5 { position: absolute; top: 10px; left: 15px; background: -webkit-linear-gradient(top, #e3e2e2, #aeaeae); background: -moz-linear-gradient(top, #e3e2e2, #aeaeae); background: -ms-linear-gradient(top, #e3e2e2, #aeaeae); background: -o-linear-gradient(top, #e3e2e2, #aeaeae); background: linear-gradient(top, #e3e2e2, #aeaeae); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e2e2', endColorstr='#aeaeae', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e2e2', endColorstr='#aeaeae', GradientType=0); height: 10px; width: 11px; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -o-transform: skew(-45deg); transform: skew(-45deg); -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, inset rgba(0,0,0,0.5) 0 -1px 1px; -moz-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, inset rgba(0,0,0,0.5) 0 -1px 1px; box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, inset rgba(0,0,0,0.5) 0 -1px 1px; border: none; margin: 0; padding: 0; } .i_videos .top .hr4 { left: 36px } .i_videos .top .hr5 { left: 57px } .i_videos .top .hack { position: absolute; top: 3px; left: 6px; background: -webkit-linear-gradient(top, #232323, #000); background: -moz-linear-gradient(top, #232323, #000); background: -ms-linear-gradient(top, #232323, #000); background: -o-linear-gradient(top, #232323, #000); background: linear-gradient(top, #232323, #000); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#232323', endColorstr='#000000', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#232323', endColorstr='#000000', GradientType=0); height: 7px; width: 10px; -webkit-transform: skew(45deg); -moz-transform: skew(45deg); -ms-transform: skew(45deg); -o-transform: skew(45deg); transform: skew(45deg); -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px; -moz-box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px; box-shadow: inset rgba(0,0,0,0.5) 0 -1px 1px; border: none; margin: 0; padding: 0; z-index: 5; -webkit-box-shadow: inset rgba(255,255,255,0.5) 1px 0 0px ; -moz-box-shadow: inset rgba(255,255,255,0.5) 1px 0 0px ; box-shadow: inset rgba(255,255,255,0.5) 1px 0 0px ; } .i_videos .top .hack::after { content: ''; position: absolute; top: -3px; left: 2px; background: -webkit-linear-gradient(top, #2e2e2e, #232323); background: -moz-linear-gradient(top, #2e2e2e, #232323); background: -ms-linear-gradient(top, #2e2e2e, #232323); background: -o-linear-gradient(top, #2e2e2e, #232323); background: linear-gradient(top, #2e2e2e, #232323); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e2e2e', endColorstr='#232323', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e2e2e', endColorstr='#232323', GradientType=0); height: 3px; width: 8px; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -o-transform: skew(-45deg); transform: skew(-45deg); border: none; margin: 0; padding: 0; z-index: 5; -webkit-border-radius: 7px 0 0 0/ 3px 0 0 0; -moz-border-radius: 7px 0 0 0/ 3px 0 0 0; border-radius: 7px 0 0 0/ 3px 0 0 0; } .i_videos .bottom { position: absolute; top: 20px; left: 0; width: 100%; height: 35px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; overflow: hidden; background: -webkit-linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(-57deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.075) 50%, rgba(0, 0, 0, 0.015) 51%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%); } .i_videos .bottom b { position:absolute; -webkit-box-shadow: inset rgba(255,255,255,0.1) 0 0 7px 2px, rgba(0,0,0,0.03) 0 0 3px; -moz-box-shadow: inset rgba(255,255,255,0.1) 0 0 7px 2px, rgba(0,0,0,0.03) 0 0 3px; box-shadow: inset rgba(255,255,255,0.1) 0 0 7px 2px, rgba(0,0,0,0.03) 0 0 3px; } .i_videos .bottom .c1{ left: 45px; top: -10px; width: 20px; height: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .i_videos .bottom .c2{ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; width: 35px; height: 35px; left: 23px; top: -15px; opacity: 0.5; } .i_videos .bottom .c3{ -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; width: 35px; height: 35px; left: -17px; top: 10px; } .i_videos .bottom .c4 { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 45px; height: 45px; left: -20px; top: -2px; } /* ---------------------------------------------------------------------------- */ .i_youtube { background: -webkit-linear-gradient(top, #74502d, #936e4e); background: -moz-linear-gradient(top, #74502d, #936e4e); background: -ms-linear-gradient(top, #74502d, #936e4e); background: -o-linear-gradient(top, #74502d, #936e4e); background: linear-gradient(top, #74502d, #936e4e); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74502d', endColorstr='#936e4e', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74502d', endColorstr='#936e4e', GradientType=0); -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_youtube:after { content: ''; width: 50px; height: 50px; position: absolute; left: 3px; top: 3px; background: -webkit-linear-gradient(top, #cab274, #faf0d2); background: -moz-linear-gradient(top, #cab274, #faf0d2); background: -ms-linear-gradient(top, #cab274, #faf0d2); background: -o-linear-gradient(top, #cab274, #faf0d2); background: linear-gradient(top, #cab274, #faf0d2); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cab274', endColorstr='#faf0d2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cab274', endColorstr='#faf0d2', GradientType=0); -webkit-box-shadow: inset #453e28 0 1px 2px; -moz-box-shadow: inset #453e28 0 1px 2px; box-shadow: inset #453e28 0 1px 2px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .i_youtube .screen { position: absolute; left: 6px; top: 6px; width: 42px; height: 35px; background: -webkit-linear-gradient(top, #6d7460 30%, #97a482); background: -moz-linear-gradient(top, #6d7460 30%, #97a482); background: -ms-linear-gradient(top, #6d7460 30%, #97a482); background: -o-linear-gradient(top, #6d7460 30%, #97a482); background: linear-gradient(top, #6d7460 30%, #97a482); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d7460', endColorstr='#97a482', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d7460', endColorstr='#97a482', GradientType=0); z-index: 3; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px #464c43 solid; -webkit-box-shadow: inset #89986f 0 -2px 2px; -moz-box-shadow: inset #89986f 0 -2px 2px; box-shadow: inset #89986f 0 -2px 2px; } .i_youtube .screen:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: -webkit-linear-gradient(top, #d5d9d2, #a0a796); background: -moz-linear-gradient(top, #d5d9d2, #a0a796); background: -ms-linear-gradient(top, #d5d9d2, #a0a796); background: -o-linear-gradient(top, #d5d9d2, #a0a796); background: linear-gradient(top, #d5d9d2, #a0a796); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d9d2', endColorstr='#a0a796', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d9d2', endColorstr='#a0a796', GradientType=0); -webkit-border-radius: 19px 19px 50% 50% / 19px 19px 5px 5px; -moz-border-radius: 19px 19px 50% 50% / 19px 19px 5px 5px; border-radius: 19px 19px 50% 50% / 19px 19px 5px 5px; -webkit-box-shadow: inset #fff 0 1px 1px; -moz-box-shadow: inset #fff 0 1px 1px; box-shadow: inset #fff 0 1px 1px; } .i_youtube sub, .i_youtube sup { position: absolute; left: 7px; top: 43px; width: 9px; height: 9px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #383433; z-index: 4; -webkit-box-shadow: inset #000 0 -1px 0; -moz-box-shadow: inset #000 0 -1px 0; box-shadow: inset #000 0 -1px 0; } .i_youtube sub:before, .i_youtube sup:before { content: ''; position: absolute; width: 5px; height: 5px; left: 2px; top: 2px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background: #947153; } .i_youtube sub:after, .i_youtube sup:after { content: ''; position: absolute; width: 3px; height: 3px; left: 3px; top: 3px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background: #6a6969; -webkit-box-shadow: inset rgba(0,0,0,0.9) 0 -1px 0, inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(0,0,0,0.9) 0 -1px 0, inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(0,0,0,0.9) 0 -1px 0, inset rgba(255,255,255,0.5) 0 1px 0; } .i_youtube sup { right: 7px; left: auto; } .i_youtube hr { position: absolute; display: block; width: 1px; height: 3px; left: 49%; top: 40px; background: #000; border: 0; -webkit-box-shadow: #000 0 -3px 0, #000 -2px -2px, #000 -2px -1px, #000 2px -2px, #000 2px -1px; -moz-box-shadow: #000 0 -3px 0, #000 -2px -2px, #000 -2px -1px, #000 2px -2px, #000 2px -1px; box-shadow: #000 0 -3px 0, #000 -2px -2px, #000 -2px -1px, #000 2px -2px, #000 2px -1px; z-index: 5; } .i_youtube hr:after { content: ''; position: absolute; display: block; width: 7px; height: 80%; left: -4px; top: -1px; border-left: 1px #000 solid; border-right: 1px #000 solid; } .i_youtube hr:before { content: ''; position: absolute; display: block; width: 11px; height: 1px; left: -6px; top: -20%; border-left: 1px #000 solid; border-right: 1px #000 solid; } /* ---------------------------------------------------------------------------- */ .i_calculator { background: -webkit-linear-gradient(top, #c6bcb5, #39302a); background: -moz-linear-gradient(top, #c6bcb5, #39302a); background: -ms-linear-gradient(top, #c6bcb5, #39302a); background: -o-linear-gradient(top, #c6bcb5, #39302a); background: linear-gradient(top, #c6bcb5, #39302a); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6bcb5', endColorstr='#39302a', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6bcb5', endColorstr='#39302a', GradientType=0); } .i_calculator .plus { position: absolute; width: 28px; height: 28px; left: 0; top: 0; -webkit-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) -1px -1px 0 1px; -moz-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) -1px -1px 0 1px; box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) -1px -1px 0 1px; } .i_calculator .plus b { display: block; width: 12px; height: 2px; background: #fff; position: absolute; left: 8px; top: 14px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; -moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; } .i_calculator .plus b:before { content: ''; position: absolute; height: 12px; width: 2px; background: #fff; left: 5px; top: -5px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0; -moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0; box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0; z-index: 1; } .i_calculator .plus b:after { content: ''; position: absolute; width: 12px; height: 2px; left: 0; top: 0; background: #fff; z-index: 3; } .i_calculator .minus { position: absolute; width: 29px; height: 28px; right: 0; top: 0; -webkit-box-shadow: inset rgba(0,0,0,0.3) 1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) 1px -1px 0 1px; -moz-box-shadow: inset rgba(0,0,0,0.3) 1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) 1px -1px 0 1px; box-shadow: inset rgba(0,0,0,0.3) 1px 0 0, inset rgba(0,0,0,0.3) 0 -1px 0, inset rgba(255,255,255,0.1) 1px -1px 0 1px; } .i_calculator .minus b { display: block; width: 13px; height: 2px; background: #fff; position: absolute; left: 8px; top: 14px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; -moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; } .i_calculator .multiply { position: absolute; width: 28px; height: 29px; left: 0; top: 27px; -webkit-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 1px 0, inset rgba(255,255,255,0.1) -1px 1px 0 1px; -moz-box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 1px 0, inset rgba(255,255,255,0.1) -1px 1px 0 1px; box-shadow: inset rgba(0,0,0,0.3) -1px 0 0, inset rgba(0,0,0,0.3) 0 1px 0, inset rgba(255,255,255,0.1) -1px 1px 0 1px; } .i_calculator .multiply b { display: block; width: 12px; height: 2px; background: #fff; position: absolute; left: 8px; top: 14px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; -moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .i_calculator .multiply b:before { content: ''; position: absolute; height: 12px; width: 2px; background: #fff; left: 5px; top: -5px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0; -moz-box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0; box-shadow: rgba(0,0,0,0.5) 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0 , rgba(255,255,255,0.8) 0 1px 0; z-index: 1; } .i_calculator .multiply b:after { content: ''; position: absolute; width: 12px; height: 2px; left: 0; top: 0; background: #fff; z-index: 3; } .i_calculator .result { position: absolute; width: 28px; height: 28px; right: 0; top: 28px; -webkit-box-shadow: inset rgba(255,255,255,0.1) 1px 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.1) 1px 1px 0; box-shadow: inset rgba(255,255,255,0.1) 1px 1px 0; background: -webkit-linear-gradient(top, #ed8628, #9b420e); background: -moz-linear-gradient(top, #ed8628, #9b420e); background: -ms-linear-gradient(top, #ed8628, #9b420e); background: -o-linear-gradient(top, #ed8628, #9b420e); background: linear-gradient(top, #ed8628, #9b420e); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed8628', endColorstr='#9b420e', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed8628', endColorstr='#9b420e', GradientType=0); -webkit-border-radius: 0 0 10px 0; -moz-border-radius: 0 0 10px 0; border-radius: 0 0 10px 0; } .i_calculator .result b, .i_calculator .result b:before { display: block; width: 13px; height: 2px; background: #fff; position: absolute; left: 8px; top: 10px; -webkit-box-shadow: #b03508 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; -moz-box-shadow: #b03508 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; box-shadow: #b03508 0 -1px 0, rgba(0,0,0,0.2) 0 0 0 1px, inset rgba(0,0,0,0.2) 0 1px 0, rgba(255,255,255,0.8) 0 1px 0; } .i_calculator .result b:before { content: ''; left: 0; top: 6px; } /* ---------------------------------------------------------------------------- */ .i_itunes { background: -webkit-linear-gradient(top, #6b1d81 30%, #d574d8); background: -moz-linear-gradient(top, #6b1d81 30%, #d574d8); background: -ms-linear-gradient(top, #6b1d81 30%, #d574d8); background: -o-linear-gradient(top, #6b1d81 30%, #d574d8); background: linear-gradient(top, #6b1d81 30%, #d574d8); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b1d81', endColorstr='#d574d8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b1d81', endColorstr='#d574d8', GradientType=0); } .i_itunes:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.2); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_itunes:after{ content: ''; width: 38px; height: 38px; position: absolute; display: block; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index: 1; left: 9px; top: 9px; -webkit-box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; -moz-box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; box-shadow: inset rgba(255,255,255,1) 0 0 0 2px, inset rgba(0,0,0,0.5) 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; } .i_itunes .nota { position: absolute; background: #fff; width: 7px; height: 4px; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; border-radius: 50%/50%; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 1px; -moz-box-shadow: rgba(0,0,0,0.4) 0 0 1px; box-shadow: rgba(0,0,0,0.4) 0 0 1px; left: 20px; top: 33px; } .i_itunes .nota:after { content: ''; position: absolute; top: -11px; left: 7px; width: 2px; height: 14px; background: #fff; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } .i_itunes .nota:before { content: ''; position: absolute; top: -10px; left: 9px; width: 10px; height: 3px; background: #fff; -webkit-transform:skew(-10deg) rotate(10deg); -moz-transform:skew(-10deg) rotate(10deg); -ms-transform:skew(-10deg) rotate(10deg); -o-transform:skew(-10deg) rotate(10deg); transform:skew(-10deg) rotate(10deg); } .i_itunes .nota2 { position: absolute; background: #fff; width: 7px; height: 4px; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; border-radius: 50%/50%; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 1px; -moz-box-shadow: rgba(0,0,0,0.4) 0 0 1px; box-shadow: rgba(0,0,0,0.4) 0 0 1px; left: 28px; top: 32px; } .i_itunes .nota2:after { content: ''; position: absolute; top: -10px; left: 7px; width: 2px; height: 12px; background: #fff; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } .i_itunes .glow { position: absolute; top: 20px; width: 100%; left: 0; } .i_itunes .glow hr { background: -webkit-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: -moz-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: -ms-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: -o-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); background: linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 80%, transparent 100% ); border: none; position: absolute; height: 1px; width: 100%; left: 0; top: 0; display: block; } .i_itunes .glow hr:nth-child(1) { opacity: 0; -webkit-transform: rotate(0deg) scale(1.5); -moz-transform: rotate(0deg) scale(1.5); -ms-transform: rotate(0deg) scale(1.5); -o-transform: rotate(0deg) scale(1.5); transform: rotate(0deg) scale(1.5); } .i_itunes .glow hr:nth-child(2) { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } .i_itunes .glow hr:nth-child(3) { -webkit-transform: rotate(10deg) scale(1.5); -moz-transform: rotate(10deg) scale(1.5); -ms-transform: rotate(10deg) scale(1.5); -o-transform: rotate(10deg) scale(1.5); transform: rotate(10deg) scale(1.5); } .i_itunes .glow hr:nth-child(4) { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } .i_itunes .glow hr:nth-child(5) { -webkit-transform: rotate(20deg) scale(1.5); -moz-transform: rotate(20deg) scale(1.5); -ms-transform: rotate(20deg) scale(1.5); -o-transform: rotate(20deg) scale(1.5); transform: rotate(20deg) scale(1.5); } .i_itunes .glow hr:nth-child(6) { -webkit-transform: rotate(25deg) scale(1.1); -moz-transform: rotate(25deg) scale(1.1); -ms-transform: rotate(25deg) scale(1.1); -o-transform: rotate(25deg) scale(1.1); transform: rotate(25deg) scale(1.1); } .i_itunes .glow hr:nth-child(7) { -webkit-transform: rotate(30deg) scale(1.5); -moz-transform: rotate(30deg) scale(1.5); -ms-transform: rotate(30deg) scale(1.5); -o-transform: rotate(30deg) scale(1.5); transform: rotate(30deg) scale(1.5); } .i_itunes .glow hr:nth-child(8) { -webkit-transform: rotate(35deg) scale(1.2); -moz-transform: rotate(35deg) scale(1.2); -ms-transform: rotate(35deg) scale(1.2); -o-transform: rotate(35deg) scale(1.2); transform: rotate(35deg) scale(1.2); } .i_itunes .glow hr:nth-child(9) { -webkit-transform: rotate(40deg) scale(1.5); -moz-transform: rotate(40deg) scale(1.5); -ms-transform: rotate(40deg) scale(1.5); -o-transform: rotate(40deg) scale(1.5); transform: rotate(40deg) scale(1.5); } .i_itunes .glow hr:nth-child(10) { -webkit-transform: rotate(45deg) scale(1.3); -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -o-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } .i_itunes .glow hr:nth-child(11) { -webkit-transform: rotate(50deg) scale(1.5); -moz-transform: rotate(50deg) scale(1.5); -ms-transform: rotate(50deg) scale(1.5); -o-transform: rotate(50deg) scale(1.5); transform: rotate(50deg) scale(1.5); } .i_itunes .glow hr:nth-child(12) { -webkit-transform: rotate(55deg) scale(1.4); -moz-transform: rotate(55deg) scale(1.4); -ms-transform: rotate(55deg) scale(1.4); -o-transform: rotate(55deg) scale(1.4); transform: rotate(55deg) scale(1.4); } .i_itunes .glow hr:nth-child(13) { -webkit-transform: rotate(60deg) scale(1.5); -moz-transform: rotate(60deg) scale(1.5); -ms-transform: rotate(60deg) scale(1.5); -o-transform: rotate(60deg) scale(1.5); transform: rotate(60deg) scale(1.5); } .i_itunes .glow hr:nth-child(14) { -webkit-transform: rotate(65deg) scale(1.3); -moz-transform: rotate(65deg) scale(1.3); -ms-transform: rotate(65deg) scale(1.3); -o-transform: rotate(65deg) scale(1.3); transform: rotate(65deg) scale(1.3); } .i_itunes .glow hr:nth-child(15) { -webkit-transform: rotate(70deg) scale(1.5); -moz-transform: rotate(70deg) scale(1.5); -ms-transform: rotate(70deg) scale(1.5); -o-transform: rotate(70deg) scale(1.5); transform: rotate(70deg) scale(1.5); } .i_itunes .glow hr:nth-child(16) { -webkit-transform: rotate(75deg) scale(1.1); -moz-transform: rotate(75deg) scale(1.1); -ms-transform: rotate(75deg) scale(1.1); -o-transform: rotate(75deg) scale(1.1); transform: rotate(75deg) scale(1.1); } .i_itunes .glow hr:nth-child(17) { -webkit-transform: rotate(80deg) scale(1.5); -moz-transform: rotate(80deg) scale(1.5); -ms-transform: rotate(80deg) scale(1.5); -o-transform: rotate(80deg) scale(1.5); transform: rotate(80deg) scale(1.5); } .i_itunes .glow hr:nth-child(18) { -wenkit-transform: rotate(85deg) scale(1.1); -moz-transform: rotate(85deg) scale(1.1); -ms-transform: rotate(85deg) scale(1.1); -o-transform: rotate(85deg) scale(1.1); transform: rotate(85deg) scale(1.1); } .i_itunes .glow hr:nth-child(19) { -webkit-transform: rotate(90deg) scale(1.5); -moz-transform: rotate(90deg) scale(1.5); -ms-transform: rotate(90deg) scale(1.5); -o-transform: rotate(90deg) scale(1.5); transform: rotate(90deg) scale(1.5); } .i_itunes .glow hr:nth-child(20) { -webkit-transform: rotate(95deg); -moz-transform: rotate(95deg); -ms-transform: rotate(95deg); -o-transform: rotate(95deg); transform: rotate(95deg); } .i_itunes .glow hr:nth-child(21) { -webkit-transform: rotate(100deg) scale(1.5); -moz-transform: rotate(100deg) scale(1.5); -ms-transform: rotate(100deg) scale(1.5); -o-transform: rotate(100deg) scale(1.5); transform: rotate(100deg) scale(1.5); } .i_itunes .glow hr:nth-child(22) { -webkit-transform: rotate(105deg) scale(1.1); -moz-transform: rotate(105deg) scale(1.1); -ms-transform: rotate(105deg) scale(1.1); -o-transform: rotate(105deg) scale(1.1); transform: rotate(105deg) scale(1.1); } .i_itunes .glow hr:nth-child(23) { -webkit-transform: rotate(110deg) scale(1.5); -moz-transform: rotate(110deg) scale(1.5); -ms-transform: rotate(110deg) scale(1.5); -o-transform: rotate(110deg) scale(1.5); transform: rotate(110deg) scale(1.5); } .i_itunes .glow hr:nth-child(24) { -webkit-transform: rotate(115deg) scale(1.2); -moz-transform: rotate(115deg) scale(1.2); -ms-transform: rotate(115deg) scale(1.2); -o-transform: rotate(115deg) scale(1.2); transform: rotate(115deg) scale(1.2); } .i_itunes .glow hr:nth-child(25) { -webkit-transform: rotate(120deg) scale(1.5); -moz-transform: rotate(120deg) scale(1.5); -ms-transform: rotate(120deg) scale(1.5); -o-transform: rotate(120deg) scale(1.5); transform: rotate(120deg) scale(1.5); } .i_itunes .glow hr:nth-child(26) { -webkit-transform: rotate(125deg) scale(1.3); -moz-transform: rotate(125deg) scale(1.3); -ms-transform: rotate(125deg) scale(1.3); -o-transform: rotate(125deg) scale(1.3); transform: rotate(125deg) scale(1.3); } .i_itunes .glow hr:nth-child(27) { -webkit-transform: rotate(130deg) scale(1.5); -moz-transform: rotate(130deg) scale(1.5); -ms-transform: rotate(130deg) scale(1.5); -o-transform: rotate(130deg) scale(1.5); transform: rotate(130deg) scale(1.5); } .i_itunes .glow hr:nth-child(28) { -webkit-transform: rotate(135deg) scale(1.2); -moz-transform: rotate(135deg) scale(1.2); -ms-transform: rotate(135deg) scale(1.2); -o-transform: rotate(135deg) scale(1.2); transform: rotate(135deg) scale(1.2); } .i_itunes .glow hr:nth-child(29) { -webkit-transform: rotate(140deg) scale(1.5); -moz-transform: rotate(140deg) scale(1.5); -ms-transform: rotate(140deg) scale(1.5); -o-transform: rotate(140deg) scale(1.5); transform: rotate(140deg) scale(1.5); } .i_itunes .glow hr:nth-child(30) { -webkit-transform: rotate(145deg) scale(1.1); -moz-transform: rotate(145deg) scale(1.1); -ms-transform: rotate(145deg) scale(1.1); -o-transform: rotate(145deg) scale(1.1); transform: rotate(145deg) scale(1.1); } .i_itunes .glow hr:nth-child(31) { -webkit-transform: rotate(150deg) scale(1.5); -moz-transform: rotate(150deg) scale(1.5); -ms-transform: rotate(150deg) scale(1.5); -o-transform: rotate(150deg) scale(1.5); transform: rotate(150deg) scale(1.5); } .i_itunes .glow hr:nth-child(32) { -webkit-transform: rotate(155deg) scale(1.1); -moz-transform: rotate(155deg) scale(1.1); -ms-transform: rotate(155deg) scale(1.1); -o-transform: rotate(155deg) scale(1.1); transform: rotate(155deg) scale(1.1); } .i_itunes .glow hr:nth-child(33) { -webkit-transform: rotate(160deg) scale(1.5); -moz-transform: rotate(160deg) scale(1.5); -ms-transform: rotate(160deg) scale(1.5); -o-transform: rotate(160deg) scale(1.5); transform: rotate(160deg) scale(1.5); } .i_itunes .glow hr:nth-child(34) { -webkit-transform: rotate(165deg) scale(1.2); -moz-transform: rotate(165deg) scale(1.2); -ms-transform: rotate(165deg) scale(1.2); -o-transform: rotate(165deg) scale(1.2); transform: rotate(165deg) scale(1.2); } .i_itunes .glow hr:nth-child(35) { -webkit-transform: rotate(170deg) scale(1.5); -moz-transform: rotate(170deg) scale(1.5); -ms-transform: rotate(170deg) scale(1.5); -o-transform: rotate(170deg) scale(1.5); transform: rotate(170deg) scale(1.5); } .i_itunes .glow hr:nth-child(36) { -webkit-transform: rotate(175deg) scale(1.3); -moz-transform: rotate(175deg) scale(1.3); -ms-transform: rotate(175deg) scale(1.3); -o-transform: rotate(175deg) scale(1.3); transform: rotate(175deg) scale(1.3); } .i_itunes .glow hr:nth-child(37) { -webkit-transform: rotate(180deg) scale(1.5); -moz-transform: rotate(180deg) scale(1.5); -ms-transform: rotate(180deg) scale(1.5); -o-transform: rotate(180deg) scale(1.5); transform: rotate(180deg) scale(1.5); } .i_itunes .glow hr:nth-child(38) { -webkit-transform: rotate(185deg) scale(1.2); -moz-transform: rotate(185deg) scale(1.2); -ms-transform: rotate(185deg) scale(1.2); -o-transform: rotate(185deg) scale(1.2); transform: rotate(185deg) scale(1.2); } .i_itunes .glow hr:nth-child(2n+1) { background: -webkit-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: -moz-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: -ms-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: -o-linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); background: linear-gradient(left, transparent 0%, rgba(0,0,0,0.07) 25%, transparent 50%, rgba(0,0,0,0.07) 75%, transparent 100% ); } .i_itunes .glow hr:nth-child(2n+2) { background: -webkit-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: -moz-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: -ms-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: -o-linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); background: linear-gradient(left, transparent 0%, rgba(255,255,255,0.1) 25%, transparent 50%, rgba(255,255,255,0.1) 75%, transparent 100% ); } /* ---------------------------------------------------------------------------- */ .i_stocks { background: -webkit-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -moz-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -ms-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -o-linear-gradient(top, #0148b1 30%, #4ed4f8); background: linear-gradient(top, #0148b1 30%, #4ed4f8); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); } .i_stocks:before { content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.2); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_stocks:after { content: ''; position: absolute; width: 30%; height: 100%; left: 35%; top: 0; border-left: 1px rgba(255,255,255,0.3) solid; border-right: 1px rgba(255,255,255,0.3) solid; -webkit-box-shadow: rgba(255,255,255,0.07) 0 0 0 1px, inset rgba(255,255,255,0.07) -1px 0 0, inset rgba(255,255,255,0.07) 1px 0 0; -moz-box-shadow: rgba(255,255,255,0.07) 0 0 0 1px, inset rgba(255,255,255,0.07) -1px 0 0, inset rgba(255,255,255,0.07) 1px 0 0; box-shadow: rgba(255,255,255,0.07) 0 0 0 1px, inset rgba(255,255,255,0.07) -1px 0 0, inset rgba(255,255,255,0.07) 1px 0 0; } .i_stocks ul { margin: 0; padding: 0; } .i_stocks li{ position: absolute; list-style: none; display: block; background: #fff; height: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; min-width: 3px; -webkit-box-shadow: rgba(0,0,0,0.6) 0 0 1px; -moz-box-shadow: rgba(0,0,0,0.6) 0 0 1px; box-shadow: rgba(0,0,0,0.6) 0 0 1px; } .i_stocks li:nth-child(1) { top: 35px; left: -1px; width: 7px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } .i_stocks li:nth-child(2) { top: 32px; left: 3px; width: 12px; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .i_stocks li:nth-child(3) { top: 29px; left: 10px; width: 8px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .i_stocks li:nth-child(4) { top: 26px; left: 13px; width: 14px; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .i_stocks li:nth-child(5) { top: 26px; left: 18px; width: 14px; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); } .i_stocks li:nth-child(6) { top: 34px; left: 25px; width: 6px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .i_stocks li:nth-child(7) { top: 31px; left: 26px; width: 12px; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); transform: rotate(-70deg); } .i_stocks li:nth-child(8) { top: 21px; left: 31px; width: 12px; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); transform: rotate(-70deg); } .i_stocks li:nth-child(9) { top: 19px; left: 36px; width: 10px; -webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); transform: rotate(70deg); } .i_stocks li:nth-child(10) { top: 21px; left: 41px; width: 6px; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .i_stocks li:nth-child(11) { top: 23px; left: 41px; width: 10px; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); } .i_stocks li:nth-child(12) { top: 29px; left: 46px; width: 6px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .i_stocks li:nth-child(13) { top: 25px; left: 47px; width: 14px; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .i_stocks div hr { position: absolute; display: block; height: 1px; width: 100%; left: 0; top: 10px; background: rgba(255,255,255,0.4); -webkit-box-shadow:rgba(255,255,255,0.1) 0 -1px 0; -moz-box-shadow:rgba(255,255,255,0.1) 0 -1px 0; box-shadow:rgba(255,255,255,0.1) 0 -1px 0; z-index: 3; border: none; } .i_stocks div hr:nth-child(1) { top: 46px; width: 46px; left: 5px; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; } .i_stocks div hr:nth-child(2) { top: 43px; width: 52px; left: 2px; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; } .i_stocks div hr:nth-child(3) { top: 40px; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; } .i_stocks div hr:nth-child(4) { top: 37px } .i_stocks div hr:nth-child(5) { top: 34px } .i_stocks div hr:nth-child(6) { top: 31px } .i_stocks div hr:nth-child(7) { top: 28px } .i_stocks div hr:nth-child(8) { top: 25px; width: 17px; left: 9px; } .i_stocks div hr:nth-child(9) { top: 25px; width: 26px; left: 32px; } .i_stocks div hr:nth-child(10) { top: 22px; width: 14px; left: 11px; } .i_stocks div hr:nth-child(11) { top: 22px; width: 26px; left: 32px; } .i_stocks div hr:nth-child(12) { top: 19px; width: 6px; left: 19px; } .i_stocks div hr:nth-child(13) { top: 19px; width: 12px; left: 34px; } .i_stocks div hr:nth-child(14) { top: 19px; width: 3px; left: 53px; } .i_stocks div hr:nth-child(15) { top: 16px; width: 10px; left: 36px; } .i_stocks div hr:nth-child(16) { top: 13px; width: 4px; left: 38px; } /* ---------------------------------------------------------------------------- */ .i_voice_memos { background: -webkit-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -moz-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -ms-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -o-linear-gradient(top, #0148b1 30%, #4ed4f8); background: linear-gradient(top, #0148b1 30%, #4ed4f8); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); } .i_voice_memos:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.2); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_voice_memos .mic { position: absolute; width: 12px; height: 28px; top: 8px; left: 22px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #edf2f8; overflow: hidden; -webkit-box-shadow: rgba(0,0,0,1) 0 0 1px; -moz-box-shadow: rgba(0,0,0,1) 0 0 1px; box-shadow: rgba(0,0,0,1) 0 0 1px; } .i_voice_memos .mic:after, .i_voice_memos .mic:before { content: ''; position: absolute; width: 30px; height: 30px; left: -10px; top: -14px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: 1px solid #2765c1; -webkit-box-shadow: rgba(255,255,255,1) 0 1px 0; -moz-box-shadow: rgba(255,255,255,1) 0 1px 0; box-shadow: rgba(255,255,255,1) 0 1px 0; } .i_voice_memos .mic:before { top: -11px; } .i_voice_memos sub { position: absolute; width: 14px; height: 12px; left: 20px; top: 25px; -webkit-border-radius: 0 0 100px 100px; -moz-border-radius: 0 0 100px 100px; border-radius: 0 0 100px 100px; display: block; border: 1px solid #edf2f8; border-top: none; -webkit-box-shadow: rgba(0,0,0,1) 0 0 1px; -moz-box-shadow: rgba(0,0,0,1) 0 0 1px; box-shadow: rgba(0,0,0,1) 0 0 1px; } .i_voice_memos sub:after { content: ''; position: absolute; height: 1px; width: 16px; left: -2px; top: 0; border-left: 1px #edf2f8 solid; border-right: 1px #edf2f8 solid; } .i_voice_memos sub:before { content: ''; position: absolute; height: 3px; width: 18px; left: -3px; top: -1px; border-left: 1px #edf2f8 solid; border-right: 1px #edf2f8 solid; } .i_voice_memos sup { position: absolute; display: block; width: 20px; height: 6px; left: 32.5%; top: 43px; background: #fff; -webkit-border-radius: 10px 10px 10px 10px / 3px 3px 3px 3px; -moz-border-radius: 10px 10px 10px 10px / 3px 3px 3px 3px; border-radius: 10px 10px 10px 10px / 3px 3px 3px 3px; -webkit-box-shadow: rgba(0,0,0,0.5) 0 0 2px, inset rgba(0,0,0,0.2) 0 -1px 0; -moz-box-shadow: rgba(0,0,0,0.5) 0 0 2px, inset rgba(0,0,0,0.2) 0 -1px 0; box-shadow: rgba(0,0,0,0.5) 0 0 2px, inset rgba(0,0,0,0.2) 0 -1px 0; } .i_voice_memos sup:after { content: ''; position: absolute; height: 4px; width: 1px; left: 48%; top: -4px; background: #fff; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; -webkit-box-shadow: #2a98e4 0 0 0 1px; -moz-box-shadow: #2a98e4 0 0 0 1px; box-shadow: #2a98e4 0 0 0 1px; } /* ---------------------------------------------------------------------------- */ .i_weather { background: -webkit-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -moz-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -ms-linear-gradient(top, #0148b1 30%, #4ed4f8); background: -o-linear-gradient(top, #0148b1 30%, #4ed4f8); background: linear-gradient(top, #0148b1 30%, #4ed4f8); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0148b1', endColorstr='#4ed4f8', GradientType=0); } .i_weather:before { content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.2); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_weather .sun { position: absolute; width: 26px; height: 26px; left: 15px; top: 9px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: -webkit-linear-gradient(bottom, #ffff00, #ff9700); background: -moz-linear-gradient(bottom, #ffff00, #ff9700); background: -ms-linear-gradient(bottom, #ffff00, #ff9700); background: -o-linear-gradient(bottom, #ffff00, #ff9700); background: linear-gradient(bottom, #ffff00, #ff9700); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9700', endColorstr='#ffff00', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9700', endColorstr='#ffff00', GradientType=0); -webkit-box-shadow: inset #ffcc3c 0 0 1px 1px, inset rgba(255,255,255,0.8) 0 2px 2px 1px, #d7b66d 0 0 3px 1px, inset #ff9700 0 10px 10px; -moz-box-shadow: inset #ffcc3c 0 0 1px 1px, inset rgba(255,255,255,0.8) 0 2px 2px 1px, #d7b66d 0 0 3px 1px, inset #ff9700 0 10px 10px; box-shadow: inset #ffcc3c 0 0 1px 1px, inset rgba(255,255,255,0.8) 0 2px 2px 1px, #d7b66d 0 0 3px 1px, inset #ff9700 0 10px 10px; } .i_weather .num { position: absolute; color: #fff; font: 900 13px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; left: 20px; bottom: 1px; text-shadow: rgba(0,0,0,0.5) 0 1px 1px; } .i_weather .num sup { font-size: 9px; } .i_weather .light { position: absolute; } .i_weather .light hr { position: absolute; } .i_weather .light { position: absolute; top: 14px; width: 30px; left: 13px; } .i_weather .light hr { background: -webkit-linear-gradient(left, rgba(255,151,0,0) 0%, rgba(255,151,0,0.4) 20%, rgba(255,151,0,0) 40%, rgba(255,151,0,0) 60%, rgba(255,151,0,0.4) 80%, rgba(255,151,0,0) 100% ); background: -moz-linear-gradient(left, rgba(255,151,0,0) 0%, rgba(255,151,0,0.4) 20%, rgba(255,151,0,0) 40%, rgba(255,151,0,0) 60%, rgba(255,151,0,0.4) 80%, rgba(255,151,0,0) 100% ); background: -ms-linear-gradient(left, rgba(255,151,0,0) 0%, rgba(255,151,0,0.4) 20%, rgba(255,151,0,0) 40%, rgba(255,151,0,0) 60%, rgba(255,151,0,0.4) 80%, rgba(255,151,0,0) 100% ); background: -o-linear-gradient(left, rgba(255,151,0,0) 0%, rgba(255,151,0,0.4) 20%, rgba(255,151,0,0) 40%, rgba(255,151,0,0) 60%, rgba(255,151,0,0.4) 80%, rgba(255,151,0,0) 100% ); background: linear-gradient(left, rgba(255,151,0,0) 0%, rgba(255,151,0,0.4) 20%, rgba(255,151,0,0) 40%, rgba(255,151,0,0) 60%, rgba(255,151,0,0.4) 80%, rgba(255,151,0,0) 100% ); border: none; position: absolute; height: 1px; width: 100%; left: 0; top: 0; display: block; } .i_weather .light hr:nth-child(1) { opacity: 0; -webkit-transform: rotate(0deg) scale(1.5); -moz-transform: rotate(0deg) scale(1.5); -ms-transform: rotate(0deg) scale(1.5); -o-transform: rotate(0deg) scale(1.5); transform: rotate(0deg) scale(1.5); } .i_weather .light hr:nth-child(2) { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } .i_weather .light hr:nth-child(3) { -webkit-transform: rotate(20deg) scale(1.5); -moz-transform: rotate(20deg) scale(1.5); -ms-transform: rotate(20deg) scale(1.5); -o-transform: rotate(20deg) scale(1.5); transform: rotate(20deg) scale(1.5); } .i_weather .light hr:nth-child(4) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } .i_weather .light hr:nth-child(5) { -webkit-transform: rotate(40deg) scale(1.5); -moz-transform: rotate(40deg) scale(1.5); -ms-transform: rotate(40deg) scale(1.5); -o-transform: rotate(40deg) scale(1.5); transform: rotate(40deg) scale(1.5); } .i_weather .light hr:nth-child(6) { -webkit-transform: rotate(50deg) scale(1.2); -moz-transform: rotate(50deg) scale(1.2); -ms-transform: rotate(50deg) scale(1.2); -o-transform: rotate(50deg) scale(1.2); transform: rotate(50deg) scale(1.2); } .i_weather .light hr:nth-child(7) { -webkit-transform: rotate(60deg) scale(1.5); -moz-transform: rotate(60deg) scale(1.5); -ms-transform: rotate(60deg) scale(1.5); -o-transform: rotate(60deg) scale(1.5); transform: rotate(60deg) scale(1.5); } .i_weather .light hr:nth-child(8) { -webkit-transform: rotate(70deg) scale(1.3); -moz-transform: rotate(70deg) scale(1.3); -ms-transform: rotate(70deg) scale(1.3); -o-transform: rotate(70deg) scale(1.3); transform: rotate(70deg) scale(1.3); } .i_weather .light hr:nth-child(9) { -webkit-transform: rotate(80deg) scale(1.5); -moz-transform: rotate(80deg) scale(1.5); -ms-transform: rotate(80deg) scale(1.5); -o-transform: rotate(80deg) scale(1.5); transform: rotate(80deg) scale(1.5); } .i_weather .light hr:nth-child(10) { -webkit-transform: rotate(90deg) scale(1.4); -moz-transform: rotate(90deg) scale(1.4); -ms-transform: rotate(90deg) scale(1.4); -o-transform: rotate(90deg) scale(1.4); transform: rotate(90deg) scale(1.4); } .i_weather .light hr:nth-child(11) { -webkit-transform: rotate(100deg) scale(1.5); -moz-transform: rotate(100deg) scale(1.5); -ms-transform: rotate(100deg) scale(1.5); -o-transform: rotate(100deg) scale(1.5); transform: rotate(100deg) scale(1.5); } .i_weather .light hr:nth-child(12) { -webkit-transform: rotate(110deg) scale(1.4); -moz-transform: rotate(110deg) scale(1.4); -ms-transform: rotate(110deg) scale(1.4); -o-transform: rotate(110deg) scale(1.4); transform: rotate(110deg) scale(1.4); } .i_weather .light hr:nth-child(13) { -webkit-transform: rotate(120deg) scale(1.5); -moz-transform: rotate(120deg) scale(1.5); -ms-transform: rotate(120deg) scale(1.5); -o-transform: rotate(120deg) scale(1.5); transform: rotate(120deg) scale(1.5); } .i_weather .light hr:nth-child(14) { -webkit-transform: rotate(130deg) scale(1.3); -moz-transform: rotate(130deg) scale(1.3); -ms-transform: rotate(130deg) scale(1.3); -o-transform: rotate(130deg) scale(1.3); transform: rotate(130deg) scale(1.3); } .i_weather .light hr:nth-child(15) { -webkit-transform: rotate(140deg) scale(1.5); -moz-transform: rotate(140deg) scale(1.5); -ms-transform: rotate(140deg) scale(1.5); -o-transform: rotate(140deg) scale(1.5); transform: rotate(140deg) scale(1.5); } .i_weather .light hr:nth-child(16) { -webkit-transform: rotate(150deg) scale(1.3); -moz-transform: rotate(150deg) scale(1.3); -ms-transform: rotate(150deg) scale(1.3); -o-transform: rotate(150deg) scale(1.3); transform: rotate(150deg) scale(1.3); } .i_weather .light hr:nth-child(17) { -webkit-transform: rotate(160deg) scale(1.5); -moz-transform: rotate(160deg) scale(1.5); -ms-transform: rotate(160deg) scale(1.5); -o-transform: rotate(160deg) scale(1.5); transform: rotate(160deg) scale(1.5); } .i_weather .light hr:nth-child(18) { -webkit-transform: rotate(170deg) scale(1.3); -moz-transform: rotate(170deg) scale(1.3); -ms-transform: rotate(170deg) scale(1.3); -o-transform: rotate(170deg) scale(1.3); transform: rotate(170deg) scale(1.3); } /* ---------------------------------------------------------------------------- */ .i_phone { background: -webkit-linear-gradient(top, #015801, #06f700); background: -moz-linear-gradient(top, #015801, #06f700); background: -ms-linear-gradient(top, #015801, #06f700); background: -o-linear-gradient(top, #015801, #06f700); background: linear-gradient(top, #015801, #06f700); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#015801', endColorstr='#06f700', GradientType=0); } .i_phone .bg_angled { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 125%; height: 125%; position: absolute; left: -7px; top: -7px; -webkit-background-size: 4px 4px; -moz-background-size: 4px 4px; -ms-background-size: 4px 4px; -o-background-size: 4px 4px; background-size: 4px 4px; background-color: none; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); background-image: linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 100%); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .i_phone:after{ content: ''; -webkit-box-shadow: inset #06f700 0 0 2px; -moz-box-shadow: inset #06f700 0 0 2px; box-shadow: inset #06f700 0 0 2px; width: 100%; height: 100%; position: absolute; display: block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index: 2; } .i_phone:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.5); z-index: 5; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_phone .truba { position: absolute; top: 7px; left: 5px; z-index: 1; width: 40px; height:40px; font: bold 40px/40px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important; color: #f1f5f9; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); text-shadow: rgba(0,0,0,0.5) 0 0 2px; } .i_phone .truba:after { content: ''; position: absolute; width: 12px; height: 10px; top: 2px; left: 25px; background: #f1f5f9; -webkit-border-radius: 50% / 2px 2px 6px 2px; -moz-border-radius: 50% / 2px 2px 6px 2px; border-radius: 50% / 2px 2px 6px 2px; -webkit-transform: rotate(-57deg); -moz-transform: rotate(-57deg); -ms-transform: rotate(-57deg); -o-transform: rotate(-57deg); transform: rotate(-57deg); } .i_phone .truba:before { content: ''; position: absolute; width: 12px; height: 10px; top: 24px; left: 4px; background: #f1f5f9; -webkit-border-radius: 50% / 2px 2px 2px 6px; -moz-border-radius: 50% / 2px 2px 2px 6px; border-radius: 50% / 2px 2px 2px 6px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); } .i_phone .truba b { position: absolute; width: 35px; height: 4px; top: 17px; left: 7px; background: #f1f5f9; border-radius: 0 0 5px 5px; -webkit-transform: rotate(-47deg); -moz-transform: rotate(-47deg); -ms-transform: rotate(-47deg); -o-transform: rotate(-47deg); transform: rotate(-47deg); } /* ---------------------------------------------------------------------------- */ .i_camera { background: -webkit-linear-gradient(top, #f3f3f4, #909397); background: -moz-linear-gradient(top, #f3f3f4, #909397); background: -ms-linear-gradient(top, #f3f3f4, #909397); background: -o-linear-gradient(top, #f3f3f4, #909397); background: linear-gradient(top, #f3f3f4, #909397); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f4', endColorstr='#909397', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f4', endColorstr='#909397', GradientType=0); } .i_camera:before { content: ''; position: absolute; width: 34px; height: 34px; left: 11px; top: 11px; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; background: -webkit-linear-gradient(top, #050505, #3a3a3a); background: -moz-linear-gradient(top, #050505, #3a3a3a); background: -ms-linear-gradient(top, #050505, #3a3a3a); background: -o-linear-gradient(top, #050505, #3a3a3a); background: linear-gradient(top, #050505, #3a3a3a); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#050505', endColorstr='#3a3a3a', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#050505', endColorstr='#3a3a3a', GradientType=0); } .i_camera:after{ content: ''; position: absolute; width: 28px; height: 28px; left: 14px; top: 14px; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; background: -webkit-linear-gradient(top, #232323, #0e0e0e); background: -moz-linear-gradient(top, #232323, #0e0e0e); background: -ms-linear-gradient(top, #232323, #0e0e0e); background: -o-linear-gradient(top, #232323, #0e0e0e); background: linear-gradient(top, #232323, #0e0e0e); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#232323', endColorstr='#0e0e0e', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#232323', endColorstr='#0e0e0e', GradientType=0); -webkit-box-shadow: inset rgba(0,0,0,1) 0 0 1px, rgba(255,255,255,0.05) 0 1px 1px; -moz-box-shadow: inset rgba(0,0,0,1) 0 0 1px, rgba(255,255,255,0.05) 0 1px 1px; box-shadow: inset rgba(0,0,0,1) 0 0 1px, rgba(255,255,255,0.05) 0 1px 1px; } .i_camera .eye { position: absolute; width: 22px; height: 22px; left: 17px; top: 17px; background: #1c2938; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; z-index: 4; -webkit-box-shadow: inset rgba(0,0,0,0.7) 0 0 1px, rgba(255,255,255,0.2) 0 1px 2px, inset rgba(255,255,255,0.9) 0 0 1px, rgba(255,255,255,0.2) 0 -1px 2px ; -moz-box-shadow: inset rgba(0,0,0,0.7) 0 0 1px, rgba(255,255,255,0.2) 0 1px 2px, inset rgba(255,255,255,0.9) 0 0 1px, rgba(255,255,255,0.2) 0 -1px 2px ; box-shadow: inset rgba(0,0,0,0.7) 0 0 1px, rgba(255,255,255,0.2) 0 1px 2px, inset rgba(255,255,255,0.9) 0 0 1px, rgba(255,255,255,0.2) 0 -1px 2px ; } .i_camera .eye:before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #1c2938; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; z-index: 4; -webkit-box-shadow: inset #253e55 0 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; -moz-box-shadow: inset #253e55 0 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; box-shadow: inset #253e55 0 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; } .i_camera .eye:after { content: ''; position: absolute; width: 12px; height: 12px; left: 5px; top: 5px; background: #1c2938; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; z-index: 4; -webkit-box-shadow: inset #253e55 0 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; -moz-box-shadow: inset #253e55 0 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; box-shadow: inset #253e55 0 0 0 1px, rgba(0,0,0,0.5) 0 0 1px; } .i_camera .eye .blick { position: absolute; /*background-color: #fcfffd;*/ background-image: -webkit-gradient(radial, 100% 100%,100,-50% -50%,100, from(rgba(255, 255, 255, 0.00)), to(rgba(252, 255, 253, 0.2))); background-image: -webkit-radial-gradient(0% 0%, rgba(252, 255, 253, 0.2), rgba(255, 255, 255, 0.00)); background-image: -moz-radial-gradient(0% 0%, rgba(252, 255, 253, 0.2), rgba(255, 255, 255, 0.00)); background-image: -ms-radial-gradient(0% 0%, rgba(252, 255, 253, 0.2), rgba(255, 255, 255, 0.00)); background-image: -o-radial-gradient(0% 0%, rgba(252, 255, 253, 0.2), rgba(255, 255, 255, 0.00)); background-image: radial-gradient(0% 0%, rgba(252, 255, 253, 0.2), rgba(255, 255, 255, 0.00)); width: 18px; height: 18px; z-index: 5; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; left: 2px; top: 2px; } .i_camera .eye .blick:after{ content: ''; position: absolute; width: 10px; height: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; top: -1px; left: -1px; opacity: 0.7; -webkit-box-shadow: inset rgba(255,255,255,0.4) 0 0 6px; -moz-box-shadow: inset rgba(255,255,255,0.4) 0 0 6px; box-shadow: inset rgba(255,255,255,0.4) 0 0 6px; } .i_camera .eye .blick:before{ content: ''; position: absolute; width: 6px; height: 6px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; top: 11px; left: 12px; opacity: 0.7; background-image: -webkit-gradient(radial, 50% 50%,200,50% 50%,20, from(rgba(255, 255, 255, 0.00)), to(rgba(252, 255, 253, 1.00))); background-image: -webkit-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: -moz-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: -ms-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: -o-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); -webkit-box-shadow: #fff 0 0 2px; -moz-box-shadow: #fff 0 0 2px; box-shadow: #fff 0 0 2px; } .i_camera .eye .blick b { position: absolute; width: 4px; height: 4px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; top: 8px; left: 8px; opacity: 0.5; background-image: -webkit-gradient(radial, 50% 50%,200,50% 50%,20, from(rgba(255, 255, 255, 0.00)), to(rgba(252, 255, 253, 1.00))); background-image: -webkit-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: -moz-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: -ms-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: -o-radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); background-image: radial-gradient(50% 50%, rgba(252, 255, 253, 1.00), rgba(255, 255, 255, 0.00)); -webkit-box-shadow: #fff 0 0 2px; -moz-box-shadow: #fff 0 0 2px; box-shadow: #fff 0 0 2px; } /* ---------------------------------------------------------------------------- */ .i_music { background: -webkit-linear-gradient(top, #cb7100 30%, #ebbb15 100%); background: -moz-linear-gradient(top, #cb7100 30%, #ebbb15 100%); background: -ms-linear-gradient(top, #cb7100 30%, #ebbb15 100%); background: -o-linear-gradient(top, #cb7100 30%, #ebbb15 100%); background: linear-gradient(top, #cb7100 30%, #ebbb15 100%); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cb7100', endColorstr='#ebbb15', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cb7100', endColorstr='#ebbb15', GradientType=0); } .i_music:before{ content: ''; width: 100%; height: 50%; position: absolute; display: block; -webkit-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; -moz-border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; border-radius: 10px 10px 50% 50% / 10px 10px 5px 5px; background: rgba(255,255,255,0.5); z-index: 1; -webkit-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; box-shadow: inset rgba(255,255,255,0.5) 0 1px 0; } .i_music .nota { position: absolute; background: #790f00; width: 10px; height: 6px; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; border-radius: 50%/50%; left: 15px; top: 39px; z-index: 3; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-box-shadow: inset rgba(0,0,0,0.7) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; -moz-box-shadow: inset rgba(0,0,0,0.7) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; box-shadow: inset rgba(0,0,0,0.7) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; } .i_music .nota:after { content: ''; position: absolute; top: -15px; right: -30%; width: 2px; height: 20px; -webkit-border-radius: 0 0 3px 0; -moz-border-radius: 0 0 3px 0; border-radius: 0 0 3px 0; background: #790f00; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } .i_music .nota:before { content: ''; position: absolute; top: -19px; left: 150%; width: 18px; height: 8px; background: #790f00; -webkit-transform:skew(-20deg) rotate(-1deg); -moz-transform:skew(-20deg) rotate(-1deg); -ms-transform:skew(-20deg) rotate(-1deg); -o-transform:skew(-20deg) rotate(-1deg); transform:skew(-20deg) rotate(-1deg); -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; -moz-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; } .i_music .nota2 { position: absolute; background: #790f00; width: 10px; height: 6px; -webkit-border-radius: 50%/50%; -moz-border-radius: 50%/50%; border-radius: 50%/50%; left: 30px; top: 34px; z-index: 3; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; -moz-box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; box-shadow: inset rgba(0,0,0,0.5) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 1px; } .i_music .nota2:after { content: ''; position: absolute; top: -15px; right: -30%; width: 2px; height: 20px; -webkit-border-radius: 0 0 3px 0; -moz-border-radius: 0 0 3px 0; border-radius: 0 0 3px 0; background: #790f00; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } .i_music .glow { position: absolute; width: 100%; height: 100%; /*background-color: #ec0600;*/ background-image: -webkit-gradient(radial, 100% 0%,100,-50% 150%,100, from(rgba(255, 255, 255, 0.00)), to(rgba(236, 6, 0, 1.00))); background-image: -webkit-radial-gradient(0% 100%, rgba(236, 6, 0, 1.00), rgba(255, 255, 255, 0.00)); background-image: -moz-radial-gradient(0% 100%, rgba(236, 6, 0, 1.00), rgba(255, 255, 255, 0.00)); background-image: -ms-radial-gradient(0% 100%, rgba(236, 6, 0, 1.00), rgba(255, 255, 255, 0.00)); background-image: -o-radial-gradient(0% 100%, rgba(236, 6, 0, 1.00), rgba(255, 255, 255, 0.00)); background-image: radial-gradient(0% 100%, rgba(236, 6, 0, 1.00), rgba(255, 255, 255, 0.00)); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
taruh javascript di atas kode </head>
<script src="http://tjrus.com/p/iphone/iphone.js?v=1.2.1"></script>
<script src="http://tjrus.com/p/iphone/page.js?v=1.2.1"></script>
lalu taruh html diantara kode <body> sampai </body>
<div class="project"><div class="site">
<div class="iphone_container"><div class="iphone">
<div class="iphone_light_gradient"></div>
<div class="iphone_power_button" id="iphone_power_button"></div>
<div class="iphone_voice_toogle"></div>
<div class="iphone_voice_plus"></div>
<div class="iphone_voice_minus"></div>
<div class="iphone_camera"></div>
<div class="iphone_dynamic"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="iphone_black_bg"></div>
<div class="iphone_display" >
<div class="iphone_headline" id="iphone_headline">
<div class="iphone_net"></div>
<div class="iphone_net_title">tjrus</div>
<div class="iphone_wi-fi"><div class="hack"></div></div>
<div class="iphone_clock" id="iphone_headline_clock">00:00</div>
<div class="iphone_lock"></div>
<div class="iphone_battery"></div>
</div>
<div class="iphone_header" id="iphone_lock_header">
<div class="iphone_time" id="iphone_lock_time">0<span>:</span>00</div>
<div class="iphone_date" id="iphone_lock_date"></div>
</div>
<div class="iphone_footer" id="iphone_lock_footer">
<div class="iphone_unlock" id="iphone_unlock">
<div class="iphone_slider" id="iphone_slider"></div>
<div class="iphone_slide2unlock" id="iphone_slide2unlock">slide to unlock</div>
</div>
</div>
<div class="iphone_icons_containter" id="iphone_icons_containter">
<div class="icon">
<div class="i_message">
<div class="bg_angled"></div>
<div class="bulb"></div>
<div class="tail"></div>
<div class="hack"></div>
</div>
<span>Message</span>
</div>
<div class="icon">
<div class="i_calendar">
<div class="day" id="iphone_icon_day"></div>
<div class="day_num" id="iphone_icon_day_num"></div>
</div>
<span>Calendar</span>
</div>
<div class="icon">
<div class="i_clock">
<div class="gray_blick"></div>
<div class="center_dot"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="hour"></div>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>
</div>
<span>Clock</span>
</div>
<div class="icon">
<div class="i_notes"></div>
<span>Notes</span>
</div>
<div class="icon">
<div class="i_reminders"><div>✔</div><div>✔</div><div>✔</div></div>
<span>Reminders</span>
</div>
<div class="icon">
<div class="i_mail">
<div class="mail"><div class="mail_top"></div><div class="mail_bottom"></div></div>
<div class="clouds"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></div>
<div class="clouds2"><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b></div>
</div>
<span>Mail</span>
</div>
<div class="icon">
<div class="i_app_store">
<div class="kirpich"><div class="pen1"></div><div class="pen2"></div></div>
<div class="glow"><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /></div>
</div>
<span>App Store</span>
</div>
<div class="icon">
<div class="i_videos">
<div class="top"><hr class="hr1" /><hr class="hr2" /><hr class="hr3" /><hr class="hr4" /><hr class="hr5" /><hr class="hack" /></div>
<div class="bottom"><b class="c1"></b><b class="c2"></b><b class="c3"></b><b class="c4"></b></div>
</div>
<span>Videos</span>
</div>
<div class="icon">
<div class="i_youtube">
<div class="screen"></div>
<sub></sub><sup></sup>
<hr />
</div>
<span>YouTube</span>
</div>
<!--
<div class="icon">
<div class="i_maps">
</div>
<span>Maps</span>
</div>
-->
<div class="icon">
<div class="i_calculator">
<div class="plus"><b></b></div>
<div class="minus"><b></b></div>
<div class="multiply"><b></b></div>
<div class="result"><b></b></div>
</div>
<span>Calculator</span>
</div>
<div class="icon">
<div class="i_itunes">
<div class="nota"></div>
<div class="nota2"></div>
<div class="glow"><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /></div>
</div>
<span>iTunes</span>
</div>
<div class="icon">
<div class="i_stocks">
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<div><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /></div>
</div>
<span>Stocks</span>
</div>
<div class="icon">
<div class="i_voice_memos">
<div class="mic"></div>
<sub></sub>
<sup></sup>
</div>
<span>Voice Memos</span>
</div>
<div class="icon">
<div class="i_weather">
<div class="light"><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /></div>
<div class="sun"></div>
<div class="num">23<sup>o</sup></div>
</div>
<span>Weather</span>
</div>
</div>
<div class="iphone_dock" id="iphone_dock">
<div class="icon">
<div class="i_phone">
<div class="bg_angled"></div>
<div class="truba"><b></b></div>
</div>
<span>Phone</span>
</div>
<div class="icon">
<div class="i_contacts">
<div class="left_side"><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /></div>
<div class="right_side">a<br />b<br />c<br />d<br />e<br />f</div>
<div class="profile"><div class="head"></div><div class="neck"></div></div>
</div>
<span>Contacts</span>
</div>
<div class="icon">
<div class="i_camera">
<div class="eye"><div class="blick"><b></b></div></div>
</div>
<span>Camera</span>
</div>
<div class="icon">
<div class="i_music">
<div class="nota"></div>
<div class="nota2"></div>
<div class="glow"></div>
</div>
<span>Music</span>
</div>
</div>
</div>
<div class="iphone_home" id="iphone_home_button"></div>
</div>
<div style="display:none;">
<audio id="soundLock" controls="true">
<source src="http://tjrus.com/p/iphone/sound/lock.ogg" type="audio/ogg" />
<source src="http://tjrus.com/p/iphone/sound/lock.mp3" type="audio/mpeg" />
</audio>
<audio id="soundUnlock" controls="true">
<source src="http://tjrus.com/p/iphone/sound/unlock.ogg" type="audio/ogg" />
<source src="http://tjrus.com/p/iphone/sound/unlock.mp3" type="audio/mpeg" />
</audio>
</div>
</div>
Komentar
Posting Komentar