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