"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tessat/pen/dqcCo?depth=everything&order=popularity&page=53&q=device&show_forks=false" /> <style class="cp-pen-styles"> @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100; src: local("Roboto Thin"), local("Roboto-Thin"), url("http://themes.googleusercontent.com/static/fonts/roboto/v9/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff") format("woff"); } html, body { margin:0px; padding:0px; font-family: 'Roboto', sans-serif; color:#000; } hr { -webkit-margin-before:0px; -webkit-margin-after:0px; -webkit-margin-start: auto; -webkit-margin-end: auto; } h1,h2,h3,h4 { margin:0px; padding:0px; font-weight:100; text-align:center; } h1 { padding-top:60px; font-size:84px; line-height:70px; } h2 { font-size:42px; } .links { position:absolute; top:0px; left:0px; width:100%; } .links .github { position:absolute; right:0px; top:0px; } .links .github { border:0px; } .links .twitter-share-button { position:absolute; top:10px; left:15px; } .disclaimer { text-align:center; margin-bottom:60px; } .iphone-border { position:relative; width:283px; height:598px; margin:60px auto 70px; padding:7px; -moz-border-radius: 45px; -webkit-border-radius: 45px; border-radius: 45px; } .iphone-border .power { display:block; position:absolute; top:-3px; left:51px; height:2px; width:48px; background: #807f83; /* Old browsers */ background: -moz-linear-gradient(left, #807f83 0%, #c8cac9 1%, #a3a5a4 4%, #909291 5%, #9ea09f 93%, #abadac 94%, #c8cac9 99%, #807f83 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#807f83), color-stop(1%,#c8cac9), color-stop(4%,#a3a5a4), color-stop(5%,#909291), color-stop(93%,#9ea09f), color-stop(94%,#abadac), color-stop(99%,#c8cac9), color-stop(100%,#807f83)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #807f83 0%,#c8cac9 1%,#a3a5a4 4%,#909291 5%,#9ea09f 93%,#abadac 94%,#c8cac9 99%,#807f83 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #807f83 0%,#c8cac9 1%,#a3a5a4 4%,#909291 5%,#9ea09f 93%,#abadac 94%,#c8cac9 99%,#807f83 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #807f83 0%,#c8cac9 1%,#a3a5a4 4%,#909291 5%,#9ea09f 93%,#abadac 94%,#c8cac9 99%,#807f83 100%); /* IE10+ */ background: linear-gradient(to right, #807f83 0%,#c8cac9 1%,#a3a5a4 4%,#909291 5%,#9ea09f 93%,#abadac 94%,#c8cac9 99%,#807f83 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#807f83', endColorstr='#807f83',GradientType=1 ); /* IE6-9 */ border-top:1px solid #e0e2e1; -moz-border-radius: 1px 1px 0px 0px; -webkit-border-radius: 1px 1px 0px 0px; border-radius: 1px 1px 0px 0px; } .iphone-border .ringer, .iphone-border .volume { display:block; position:absolute; left:-3px; width:2px; background: #6e706f; /* Old browsers */ background: -moz-linear-gradient(top, #6e706f 0%, #c3c5c4 3%, #949695 5%, #a9abaa 96%, #b7b9b8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e706f), color-stop(3%,#c3c5c4), color-stop(5%,#949695), color-stop(96%,#a9abaa), color-stop(100%,#b7b9b8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #6e706f 0%,#c3c5c4 3%,#949695 5%,#a9abaa 96%,#b7b9b8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #6e706f 0%,#c3c5c4 3%,#949695 5%,#a9abaa 96%,#b7b9b8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #6e706f 0%,#c3c5c4 3%,#949695 5%,#a9abaa 96%,#b7b9b8 100%); /* IE10+ */ background: linear-gradient(to bottom, #6e706f 0%,#c3c5c4 3%,#949695 5%,#a9abaa 96%,#b7b9b8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e706f', endColorstr='#b7b9b8',GradientType=0 ); /* IE6-9 */ border-left:1px solid #d8dad9; -moz-border-radius: 1px 0px 0px 1px; -webkit-border-radius: 1px 0px 0px 1px; border-radius: 1px 0px 0px 1px; } .iphone-border .ringer { top:85px; height:27px; } .iphone-border .volume { height:21px; } .iphone-border .volume.up { top:143px; } .iphone-border .volume.down { top:194px; } .iphone-border > span { display:block; position:absolute; width:149px; height:306px; } .iphone-border > span:after { content:""; height:83%; width:100%; position:absolute; } .iphone-border span.top { top:0px; } .iphone-border span.bottom { bottom:0px; } .iphone-border span.left, .iphone-border span.left:after { left:0px; } .iphone-border span.right, .iphone-border span.right:after { right:0px; } .iphone-border > span.top.left { background: #d2d4d3; /* Old browsers */ background: -moz-linear-gradient(45deg, #d2d4d3 0%, #6f7170 52%, #dcdee1 52%, #dcdee1 54%, #6d6f6e 54%, #7c7e7d 59%, #dee0df 64%, #f4f6f5 68%, #959796 68%, #a1a3a2 76%, #e6e8e7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#d2d4d3), color-stop(52%,#6f7170), color-stop(52%,#dcdee1), color-stop(54%,#dcdee1), color-stop(54%,#6d6f6e), color-stop(59%,#7c7e7d), color-stop(64%,#dee0df), color-stop(68%,#f4f6f5), color-stop(68%,#959796), color-stop(76%,#a1a3a2), color-stop(100%,#e6e8e7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* IE10+ */ background: linear-gradient(45deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d3', endColorstr='#e6e8e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -moz-border-radius: 45px 0px 0px 0px; -webkit-border-radius: 45px 0px 0px 0px; border-radius: 45px 0px 0px 0px; } .iphone-border > span.top.right { background: #e6e8e7; /* Old browsers */ background: -moz-linear-gradient(-45deg, #e6e8e7 0%, #b8bab9 22%, #707271 26%, #b8bab9 30%, #eef0ef 35%, #808281 35%, #6d6f6e 46%, #dcdee1 46%, #dcdee1 48%, #6f7170 48%, #d2d4d3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e6e8e7), color-stop(22%,#b8bab9), color-stop(26%,#707271), color-stop(30%,#b8bab9), color-stop(35%,#eef0ef), color-stop(35%,#808281), color-stop(46%,#6d6f6e), color-stop(46%,#dcdee1), color-stop(48%,#dcdee1), color-stop(48%,#6f7170), color-stop(100%,#d2d4d3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* IE10+ */ background: linear-gradient(135deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e8e7', endColorstr='#d2d4d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -moz-border-radius: 0px 45px 0px 0px; -webkit-border-radius: 0px 45px 0px 0px; border-radius: 0px 45px 0px 0px; } .iphone-border > span.bottom.left { background: #d2d4d3; /* Old browsers */ background: -moz-linear-gradient(-45deg, #d2d4d3 0%, #6f7170 52%, #dcdee1 52%, #dcdee1 54%, #6d6f6e 54%, #7c7e7d 59%, #dee0df 64%, #f4f6f5 68%, #959796 68%, #a1a3a2 76%, #e6e8e7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d2d4d3), color-stop(52%,#6f7170), color-stop(52%,#dcdee1), color-stop(54%,#dcdee1), color-stop(54%,#6d6f6e), color-stop(59%,#7c7e7d), color-stop(64%,#dee0df), color-stop(68%,#f4f6f5), color-stop(68%,#959796), color-stop(76%,#a1a3a2), color-stop(100%,#e6e8e7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* IE10+ */ background: linear-gradient(135deg, #d2d4d3 0%,#6f7170 52%,#dcdee1 52%,#dcdee1 54%,#6d6f6e 54%,#7c7e7d 59%,#dee0df 64%,#f4f6f5 68%,#959796 68%,#a1a3a2 76%,#e6e8e7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d3', endColorstr='#e6e8e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -moz-border-radius: 0px 0px 0px 45px; -webkit-border-radius: 0px 0px 0px 45px; border-radius: 0px 0px 0px 45px; } .iphone-border > span.bottom.right { background: #e6e8e7; /* Old browsers */ background: -moz-linear-gradient(45deg, #e6e8e7 0%, #b8bab9 22%, #707271 26%, #b8bab9 30%, #eef0ef 35%, #808281 35%, #6d6f6e 46%, #dcdee1 46%, #dcdee1 48%, #6f7170 48%, #d2d4d3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#e6e8e7), color-stop(22%,#b8bab9), color-stop(26%,#707271), color-stop(30%,#b8bab9), color-stop(35%,#eef0ef), color-stop(35%,#808281), color-stop(46%,#6d6f6e), color-stop(46%,#dcdee1), color-stop(48%,#dcdee1), color-stop(48%,#6f7170), color-stop(100%,#d2d4d3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* IE10+ */ background: linear-gradient(45deg, #e6e8e7 0%,#b8bab9 22%,#707271 26%,#b8bab9 30%,#eef0ef 35%,#808281 35%,#6d6f6e 46%,#dcdee1 46%,#dcdee1 48%,#6f7170 48%,#d2d4d3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e8e7', endColorstr='#d2d4d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -moz-border-radius: 0px 0px 45px 0px; -webkit-border-radius: 0px 0px 45px 0px; border-radius: 0px 0px 45px 0px; } .iphone-border > span.top:after { bottom:0px; background: #e6e8e7; /* Old browsers */ background: -moz-linear-gradient(top, #e6e8e7 0%, #dcdee1 2%, #6f7170 2%, #d2d4d3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e8e7), color-stop(2%,#dcdee1), color-stop(2%,#6f7170), color-stop(100%,#d2d4d3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e6e8e7 0%,#dcdee1 2%,#6f7170 2%,#d2d4d3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e6e8e7 0%,#dcdee1 2%,#6f7170 2%,#d2d4d3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e6e8e7 0%,#dcdee1 2%,#6f7170 2%,#d2d4d3 100%); /* IE10+ */ background: linear-gradient(to bottom, #e6e8e7 0%,#dcdee1 2%,#6f7170 2%,#d2d4d3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e8e7', endColorstr='#d2d4d3',GradientType=0 ); /* IE6-9 */ } .iphone-border > span.bottom:after { top:0px; background: #d2d4d3; /* Old browsers */ background: -moz-linear-gradient(top, #d2d4d3 0%, #6f7170 98%, #dcdee1 98%, #e6e8e7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d4d3), color-stop(98%,#6f7170), color-stop(98%,#dcdee1), color-stop(100%,#e6e8e7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d2d4d3 0%,#6f7170 98%,#dcdee1 98%,#e6e8e7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d2d4d3 0%,#6f7170 98%,#dcdee1 98%,#e6e8e7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #d2d4d3 0%,#6f7170 98%,#dcdee1 98%,#e6e8e7 100%); /* IE10+ */ background: linear-gradient(to bottom, #d2d4d3 0%,#6f7170 98%,#dcdee1 98%,#e6e8e7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d3', endColorstr='#e6e8e7',GradientType=0 ); /* IE6-9 */ } .iphone { position:relative; left:-1px; top:-1px; background:#f5f6f8; margin:0px auto; width:283px; height:598px; border:1px solid #e7e7e7; font-family:Arial, Helvetica, sans-serif; color:#fff; box-shadow:0px 0px 1px 2px #f5f6f8, 0px 0px 0px 3px #c3c5c7; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } .iphone .speaker { display:block; background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAMElEQVQIHWMUFxf7r6Wlw8DNw8PAoqKixvDhwweGL18+MzAJiwgz/Pv/j+HPn78MANJuDjHoDx1AAAAAAElFTkSuQmCC"), #262526; height:5px; width:50px; margin:44px auto 0px; box-shadow:0px 2px 2px 3px #ffffff, 0px 0px 0px 3px #e8eaed; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .iphone .speaker:before { content:""; display:block; margin:0 auto; position:relative; top:-22px; background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAT0lEQVQIHQFEALv/ATJTif/fFUkA+Ni6AB0LzAAC3xM5APXftQAE8r8A+zA9AAIeQxoACfTPAAH5/QD7yOUAAx/x+YDqBCgADC5aADYZAQCakBkLtkcG/gAAAABJRU5ErkJggg=="); height:4px; width:4px; /* -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000;*/ box-shadow: 2px 3px 2px 0px #787878, 0px 0px 0px 4px #2f2f2f; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .iphone .speaker:after { content:""; display:block; background:#575757; height:7px; width:7px; position:relative; left:-19px; top:-5px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .iphone > .home { height:55px; width:55px; display:block; margin:10px auto; background:#edf0f4; box-shadow: inset 0px -187px 0px -160px #f3f5f9; /* background: -webkit-linear-gradient(top, #edf0f4 50%, #f3f5f9 50%); background: -moz-linear-gradient(top, #edf0f4 50%, #f3f5f9 50%);*/ border:1px solid #e8eaee; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } .iphone > .home:after { content:""; display:block; height:17px; width:17px; margin:19px auto; box-shadow:2px 2px 1px #d6d8dc, 0px 0px 0.1px 1px #ffffff, -1px 0px 0.1px #ffffff, 0px 0px 0px 2px #e6e8ed; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .iphone .screen { background:#2a2a2a; width:252px; height:437px; margin:29px auto 5px; padding:3px; box-shadow: 0px 0px 0px 1px #1d1d1d; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } /* General Screen Styles */ .iphone .screen .top-bar { text-align:center; font-size:10px; padding:1px 3px 2px; } .iphone .screen .top-bar .signal, .iphone .screen .top-bar .wifi { float:left; } .iphone .screen .top-bar .wifi { height:10px; width:10px; position:relative; left:5px; top:-1px; overflow:hidden; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .iphone .screen .top-bar .wifi hr { border:none; padding:0px; margin:0px; position:relative; top:7px; left:7px; height:6px; width:6px; background:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .iphone .screen .top-bar .wifi hr:before { content:""; display:block; height:8px; width:8px; position:absolute; left:-3px; top:-3px; border:2px solid #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .iphone .screen .top-bar .wifi hr:after { content:""; display:block; height:14px; width:14px; position:absolute; left:-6px; top:-6px; border:2px solid #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .iphone .screen .top-bar .time { position:relative; left:6px; font-weight:bold; font-size:9px; } .iphone .screen .top-bar .battery { float:right; font-size:9px; position:relative; top:2px; } .iphone .screen .top-bar .battery:after { content:""; display:block; height:6px; width:17px; background:#fff; float:right; margin:2px 3px 0px 6px; box-shadow:0px 0px 0px 1px rgba(255,255,255,0.7); } .iphone .screen .top-bar .battery:before { content:""; display:block; height:2px; width:1px; background:rgba(255,255,255,0.9); float:right; position:relative; top:4px; right:2px; box-shadow:0px 0px 0px 1px rgba(255,255,255,0.3); } .iphone .screen .icons { padding:0px 7px; } .iphone .screen .icon { background:#fff; display:inline-block; position:relative; height:46px; width:46px; margin:4px 5px 14px; padding:0px; cursor: pointer; cursor: hand; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .iphone .screen .icon:after { content:attr(alt); display:block; width:56px; position:absolute; bottom:-13px; left:-4px; font-size:9px; text-align:center; } .iphone .screen .nav-bar { position:absolute; bottom:77px; left:0px; width:100%; text-align:center; font-size:10px; } .iphone .screen .nav-bar span { display:inline-block; margin:0px 2px; } .iphone .screen .nav-bar span:nth-child(2) { opacity:0.5; } .iphone .screen .footer-bar { background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.3) 10%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(10%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.3) 10%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.3) 10%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.3) 10%,rgba(255,255,255,0.3) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.3) 10%,rgba(255,255,255,0.3) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#4dffffff',GradientType=0 ); /* IE6-9 */ position:absolute; left:0px; bottom:0px; padding-top:6px; overflow:hidden; } .iphone .screen .footer-bar:before { content:""; display:block; position:absolute; left:0px; bottom:-1px; width:100%; height:1px; box-shadow:0px -20px 30px 50px #ccc; opacity:0.3; } /* Home Screen */ .iphone .screen .home { height:100%; width:100%; position:relative; background: #161d3c; /* Old browsers */ background: -moz-linear-gradient(-45deg, #161d3c 0%, #16547b 40%, #05abe0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#161d3c), color-stop(40%,#16547b), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #161d3c 0%,#16547b 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #161d3c 0%,#16547b 40%,#05abe0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #161d3c 0%,#16547b 40%,#05abe0 100%); /* IE10+ */ background: linear-gradient(135deg, #161d3c 0%,#16547b 40%,#05abe0 100%); /* W3C */ } .iphone .screen .home .bg { position:absolute; left:0px; top:0px; height:100%; width:100%; overflow:hidden; } .iphone .screen .home .bg span { display:block; position:absolute; background:rgba(255,255,255,0.1); height:10px; width:10px; box-shadow:0px 0px 4px 25px rgba(255,255,255,0.1); -moz-border-radius: 80px; -webkit-border-radius: 80px; border-radius: 80px; display:none; } .iphone .screen .home .bg span:nth-child(3n) { box-shadow:0px 0px 5px 15px rgba(255,255,255,0.1); } .iphone .screen .home .bg span:nth-child(2n) { box-shadow:0px 0px 3px 3px rgba(255,255,255,0.2); background:rgba(255,255,255,0.2); } /* Home Screen: Icons */ /* Home Screen: Icons: Messages */ .iphone .screen .icon.messages { background: #9afd7d; /* Old browsers */ background: -moz-linear-gradient(top, #9afd7d 0%, #43e62f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9afd7d), color-stop(100%,#43e62f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* IE10+ */ background: linear-gradient(to bottom, #9afd7d 0%,#43e62f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9afd7d', endColorstr='#43e62f',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.messages hr { background:#fff; height:27px; width:33px; border:none; margin:8px; margin-left:7px; padding:0px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } .iphone .screen .icon.messages hr:after { content:""; display:block; position:absolute; border-color:transparent #fff; border-style:solid; border-width:2px 0px 6px 4px; bottom:6px; left:14px; width:0px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); } /* Home Screen: Icons: Calendar */ .iphone .screen .icon.calendar {} .iphone .screen .icon.calendar .weekday { font-size:7px; color:#e18888; display:block; width:100%; float:left; text-align:center; margin-top:6px; } .iphone .screen .icon.calendar .date { font-size:29px; display:block; width:100%; float:left; text-align:center; color:#333; position:relative; top:-6px; font-family: 'Roboto', sans-serif; font-weight:100; } /* Home Screen: Icons: Photos */ .iphone .screen .icon.photos {} .iphone .screen .icon.photos span { display:block; position:absolute; top:37%; left:53%; height:13px; width:18px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; -webkit-transform-origin: -1.5px center; -moz-transform-origin: -1.5px center; -ms-transform-origin: -1.5px center; -o-transform-origin: -1.5px center; } .iphone .screen .icon.photos span.red { background:rgba(249,22,0,0.4); -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); } .iphone .screen .icon.photos span.orange { background:rgba(247,128,0,0.6); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); } .iphone .screen .icon.photos span.yellow { background:rgba(250,225,0,0.6); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -ms-transform: rotate(315deg); -o-transform: rotate(315deg); } .iphone .screen .icon.photos span.green { background:rgba(184,217,0,0.7); } .iphone .screen .icon.photos span.seafoam { background:rgba(106,194,136,0.5); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .iphone .screen .icon.photos span.blue { background:rgba(0,144,227,0.5); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .iphone .screen .icon.photos span.purple { background:rgba(55,0,215,0.4); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } .iphone .screen .icon.photos span.pink { background:rgba(229,0,108,0.4); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } /* Home Screen: Icons: Camera */ .iphone .screen .icon.camera { background: rgb(220,220,222); background: -moz-linear-gradient(top, rgba(220,220,222,1) 0%, rgba(137,140,145,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,222,1)), color-stop(100%,rgba(137,140,145,1))); background: -webkit-linear-gradient(top, rgba(220,220,222,1) 0%,rgba(137,140,145,1) 100%); background: -o-linear-gradient(top, rgba(220,220,222,1) 0%,rgba(137,140,145,1) 100%); background: -ms-linear-gradient(top, rgba(220,220,222,1) 0%,rgba(137,140,145,1) 100%); background: linear-gradient(to bottom, rgba(220,220,222,1) 0%,rgba(137,140,145,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcde', endColorstr='#898c91',GradientType=0 ); } .iphone .screen .icon.camera .shutter { background:#474747; position:relative; display:block; width:34px; margin:13px auto 0px; height:2px; box-shadow:0px 0px 1px 0px #111 inset; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; } .iphone .screen .icon.camera .shutter:before { content:""; display:block; height:5px; width:14px; margin:0 auto; background:#464646; position:relative; bottom:4px; border-top-left-radius:4px 6px; border-top-right-radius:4px 6px; box-shadow:0 1px 1px -1px #111111 inset; } .iphone .screen .icon.camera .shutter:after { background: rgb(53,53,53); background: -moz-linear-gradient(top, rgba(53,53,53,1) 0%, rgba(53,53,53,1) 75%, rgba(229,230,231,1) 75%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(53,53,53,1)), color-stop(75%,rgba(53,53,53,1)), color-stop(75%,rgba(229,230,231,1))); background: -webkit-linear-gradient(top, rgba(53,53,53,1) 0%,rgba(53,53,53,1) 75%,rgba(229,230,231,1) 75%); background: -o-linear-gradient(top, rgba(53,53,53,1) 0%,rgba(53,53,53,1) 75%,rgba(229,230,231,1) 75%); background: -ms-linear-gradient(top, rgba(53,53,53,1) 0%,rgba(53,53,53,1) 75%,rgba(229,230,231,1) 75%); background: linear-gradient(to bottom, rgba(53,53,53,1) 0%,rgba(53,53,53,1) 75%,rgba(229,230,231,1) 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#e5e6e7',GradientType=0 ); content:""; display:block; position:absolute; left:3px; top:-2px; height:2px; width:3px; -moz-border-radius: 1px 1px 0px 0px; -webkit-border-radius: 1px 1px 0px 0px; border-radius: 1px 1px 0px 0px; } .iphone .screen .icon.camera .body { background: rgb(64,64,64); background: -moz-linear-gradient(top, rgba(64,64,64,1) 0%, rgba(43,43,43,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,1)), color-stop(100%,rgba(43,43,43,1))); background: -webkit-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(43,43,43,1) 100%); background: -o-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(43,43,43,1) 100%); background: -ms-linear-gradient(top, rgba(64,64,64,1) 0%,rgba(43,43,43,1) 100%); background: linear-gradient(to bottom, rgba(64,64,64,1) 0%,rgba(43,43,43,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#2b2b2b',GradientType=0 ); width:34px; height:13px; margin:1px auto 0px; padding:2px 0px; box-shadow:0px 0px 1px 0px #111 inset; } .iphone .screen .icon.camera .body:after { content:""; display:block; width:34px; height:2px; background:#2b2b2b; margin:3px auto; box-shadow:0px 0px 1px 0px #111 inset, 0px 0.5px 0px #cccdd0; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius: 0px 0px 6px 6px; border-radius: 0px 0px 6px 6px; } .iphone .screen .icon.camera .body .lens { display:block; position:relative; background:transparent; height:10px; width:10px; margin:0px auto; border:1.5px solid #b2b4b7; box-shadow:0px 0px 1px 0px #111; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } .iphone .screen .icon.camera .body .lens:before { content:""; display:block; height:2px; width:2px; background:#ffc104; position:absolute; right:-4px; top:-2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } @media only screen and (-webkit-min-device-pixel-ratio:2) { .iphone .screen .icon.camera .body:after { margin:4px auto; } } /* Home Screen: Icons: Weather */ .iphone .screen .icon.weather { background: #4688ff; /* Old browsers */ background: -moz-linear-gradient(top, #4688ff 0%, #4ce4ff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4688ff), color-stop(100%,#4ce4ff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4688ff 0%,#4ce4ff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4688ff 0%,#4ce4ff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4688ff 0%,#4ce4ff 100%); /* IE10+ */ background: linear-gradient(to bottom, #4688ff 0%,#4ce4ff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4688ff', endColorstr='#4ce4ff',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.weather span { display:block; position:absolute; } .iphone .screen .icon.weather .sun { background: rgb(255,193,0); background: -moz-linear-gradient(top, rgba(255,193,0,1) 0%, rgba(255,228,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,193,0,1)), color-stop(100%,rgba(255,228,0,1))); background: -webkit-linear-gradient(top, rgba(255,193,0,1) 0%,rgba(255,228,0,1) 100%); background: -o-linear-gradient(top, rgba(255,193,0,1) 0%,rgba(255,228,0,1) 100%); background: -ms-linear-gradient(top, rgba(255,193,0,1) 0%,rgba(255,228,0,1) 100%); background: linear-gradient(to bottom, rgba(255,193,0,1) 0%,rgba(255,228,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc100', endColorstr='#ffe400',GradientType=0 ); top:9px; left:6px; height:20px; width:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .iphone .screen .icon.weather .cloud { background:#fff; top:23px; left:10px; height:12px; width:29px; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; -khtml-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; } .iphone .screen .icon.weather .cloud:before, .iphone .screen .icon.weather .cloud:after { content:""; display:block; position:absolute; background:#fff; } .iphone .screen .icon.weather .cloud:before { top:-10px; left:4px; height:19px; width:19px; -moz-border-radius: 19px; -webkit-border-radius: 19px; border-radius: 19px; } .iphone .screen .icon.weather .cloud:after { right:-1px; bottom:0px; height:16px; width:16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; } /* Home Screen: Icons: Clock */ .iphone .screen .icon.clock { background:#000; } .iphone .screen .icon.clock .clock { background:#fff; height:40px; width:40px; position:absolute; left:3px; top:3px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; } .iphone .screen .icon.clock .clock:before { content:""; position:absolute; top:47%; left:48%; height:3px; width:3px; background:#000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .iphone .screen .icon.clock .clock hr { position:absolute; bottom:50%; left:50%; border:none; margin:0px; padding:0px; width:1px; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; -webkit-transition: all 60s linear; -moz-transition: all 60s linear; -o-transition: all 60s linear; transition: all 60s linear; } .iphone .screen .icon.clock .clock.set hr { -webkit-transition: all 0s linear !important; -moz-transition: all 0s linear !important; -o-transition: all 0s linear !important; transition: all 0s linear !important; } .iphone .screen .icon.clock .clock hr.hour { background:#000; height:9px; } .iphone .screen .icon.clock .clock hr.minute { background:#000; height:14px; } .iphone .screen .icon.clock .clock hr.second { background:#efa2a5; height:13px; } .iphone .screen .icon.clock .clock div { font-size:5px; color:#333; height:5px; width:95%; margin:0px auto; position:relative; } .iphone .screen .icon.clock .clock div:nth-child(2), .iphone .screen .icon.clock .clock div:nth-child(6) { width:51%; } .iphone .screen .icon.clock .clock div:nth-child(2) { top:-2px; } .iphone .screen .icon.clock .clock div:nth-child(6) { bottom:-2px; } .iphone .screen .icon.clock .clock div:nth-child(3), .iphone .screen .icon.clock .clock div:nth-child(5) { width:83%; } .iphone .screen .icon.clock .clock div:nth-child(3) { top:-1px; } .iphone .screen .icon.clock .clock div:nth-child(5) { bottom:-1px; } .iphone .screen .icon.clock .clock div:nth-child(4) { height:7px; padding-top:2px; } .iphone .screen .icon.clock .clock div:nth-child(1) span, .iphone .screen .icon.clock .clock div:nth-child(7) span { display:block; width:100%; text-align:center; } .iphone .screen .icon.clock .clock div span:nth-child(1) { position:absolute; left:0px; } .iphone .screen .icon.clock .clock div span:nth-child(2) { position:absolute; right:0px; } /* Home Screen: Icons: Maps */ .iphone .screen .icon.maps { display:none; } /* Home Screen: Icons: Videos */ .iphone .screen .icon.videos { background: #4fe6bf; /* Old browsers */ background: -moz-linear-gradient(top, #4fe6bf 25%, #5ac8fb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#4fe6bf), color-stop(100%,#5ac8fb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4fe6bf 25%,#5ac8fb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4fe6bf 25%,#5ac8fb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4fe6bf 25%,#5ac8fb 100%); /* IE10+ */ background: linear-gradient(to bottom, #4fe6bf 25%,#5ac8fb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fe6bf', endColorstr='#5ac8fb',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.videos .arm { width:100%; height:14px; overflow:hidden; padding:0px; margin:0px; float:left; position:relative; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); box-shadow:0 -1px 1px -1px #000000; } .iphone .screen .icon.videos .arm:after { content:""; display:block; width:100%; height:0.5px; background:#000; position:absolute; left:0px; top:50%; } .iphone .screen .icon.videos .arm div { width:125%; position:absolute; left:-12%; } .iphone .screen .icon.videos .arm span { display:inline-block; width:14%; height:1px; position:relative; margin:0px; padding:0px; float:left; } .iphone .screen .icon.videos .arm span:after { content:""; display:block; height:16px; width:16px; position:absolute; left:0px; top:-1px; background:#fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .iphone .screen .icon.videos .arm span:nth-child(2n+1):after { background:#000; } @media only screen and (-webkit-min-device-pixel-ratio:2) { .iphone .screen .icon.videos .arm:after { height:1px; background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.01) 51%, rgba(0,0,0,0.01) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.01))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#03000000',GradientType=0 ); /* IE6-9 */ } } /* Home Screen: Icons: Notes */ .iphone .screen .icon.notes {} .iphone .screen .icon.notes .binding { background:#fee028; height:14px; width:100%; border-bottom:1px solid #ddd; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } .iphone .screen .icon.notes .binding:after { content:""; display:block; width:100%; height:1px; position:absolute; top:16px; left:0px; border-bottom:1px dotted #aaa; } .iphone .screen .icon.notes hr { margin:8px 0px; padding:0px; border:none; display:block; width:100%; height:0.5px; background:#ccc; } .iphone .screen .icon.notes hr:nth-child(2) { margin-top:8px; } .iphone .screen .icon.notes hr:nth-child(4) { width:97%; left:1px; position:relative; } @media only screen and (-webkit-min-device-pixel-ratio:2) { .iphone .screen .icon.notes hr { height:1px; background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 50%, rgba(204,204,204,0.01) 51%, rgba(204,204,204,0.01) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(50%,rgba(204,204,204,1)), color-stop(51%,rgba(204,204,204,0.01)), color-stop(100%,rgba(204,204,204,0.01))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#03cccccc',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.notes hr:nth-child(4) { width:96%; } } /* Home Screen: Icons: Reminders */ .iphone .screen .icon.reminders {} .iphone .screen .icon.reminders hr { background:#ccc; border:none; padding:0px; margin:4.2px 2px; width:69%; height:0.5px; float:left; position:relative; left:12px; display:block; } .iphone .screen .icon.reminders hr:nth-child(1) { margin-top:5px; } .iphone .screen .icon.reminders hr:nth-child(1), .iphone .screen .icon.reminders hr:nth-child(5) { width:30px; } .iphone .screen .icon.reminders hr:before { content:""; display:block; height:4.2px; width:4.2px; position:relative; right:9px; top:2px; border:0.5px solid #fff; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .iphone .screen .icon.reminders hr:nth-child(1):before { background: #fcae00; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #fcae00 0%, #fcb111 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcae00), color-stop(100%,#fcb111)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #fcae00 0%,#fcb111 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #fcae00 0%,#fcb111 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #fcae00 0%,#fcb111 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #fcae00 0%,#fcb111 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcae00', endColorstr='#fcb111',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ box-shadow: 0px 0px 0px 0.5px #fcb111; -moz-box-shadow: 0px 0px 0px 0.5px #fcb111; -webkit-box-shadow: 0px 0px 0px 1px #fcb111; } .iphone .screen .icon.reminders hr:nth-child(2):before { background: #48c6ff; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #48c6ff 0%, #57c8fe 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#48c6ff), color-stop(100%,#57c8fe)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #48c6ff 0%,#57c8fe 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #48c6ff 0%,#57c8fe 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #48c6ff 0%,#57c8fe 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #48c6ff 0%,#57c8fe 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48c6ff', endColorstr='#57c8fe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ box-shadow: 0px 0px 0px 0.5px #57c8fe; -moz-box-shadow: 0px 0px 0px 0.5px #57c8fe; -webkit-box-shadow: 0px 0px 0px 1px #57c8fe; } .iphone .screen .icon.reminders hr:nth-child(3):before { background: #86ec4b; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #86ec4b 0%, #8ae458 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#86ec4b), color-stop(100%,#8ae458)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #86ec4b 0%,#8ae458 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #86ec4b 0%,#8ae458 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #86ec4b 0%,#8ae458 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #86ec4b 0%,#8ae458 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86ec4b', endColorstr='#8ae458',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ box-shadow: 0px 0px 0px 0.5px #8ae458; -moz-box-shadow: 0px 0px 0px 0.5px #8ae458; -webkit-box-shadow: 0px 0px 0px 1px #8ae458; } .iphone .screen .icon.reminders hr:nth-child(4):before { background: #df91f5; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #df91f5 0%, #db91f1 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#df91f5), color-stop(100%,#db91f1)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #df91f5 0%,#db91f1 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #df91f5 0%,#db91f1 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #df91f5 0%,#db91f1 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #df91f5 0%,#db91f1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df91f5', endColorstr='#db91f1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ box-shadow: 0px 0px 0px 0.5px #db91f1; -moz-box-shadow: 0px 0px 0px 0.5px #db91f1; -webkit-box-shadow: 0px 0px 0px 1px #db91f1; } .iphone .screen .icon.reminders hr:nth-child(5):before { display:none; } @media only screen and (-webkit-min-device-pixel-ratio:2) { .iphone .screen .icon.reminders hr { height:1px; background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 50%, rgba(204,204,204,0.01) 51%, rgba(204,204,204,0.01) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(50%,rgba(204,204,204,1)), color-stop(51%,rgba(204,204,204,0.01)), color-stop(100%,rgba(204,204,204,0.01))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 50%,rgba(204,204,204,0.01) 51%,rgba(204,204,204,0.01) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#03cccccc',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.reminders hr:nth-child(1):before { background: rgb(252,174,0); background: -moz-radial-gradient(center, ellipse cover, rgba(252,174,0,1) 0%, rgba(252,177,17,1) 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 80%, rgba(252,177,17,1) 80%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(252,174,0,1)), color-stop(60%,rgba(252,177,17,1)), color-stop(60%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(80%,rgba(252,177,17,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(252,174,0,1) 0%,rgba(252,177,17,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(252,177,17,1) 80%); background: -o-radial-gradient(center, ellipse cover, rgba(252,174,0,1) 0%,rgba(252,177,17,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(252,177,17,1) 80%); background: -ms-radial-gradient(center, ellipse cover, rgba(252,174,0,1) 0%,rgba(252,177,17,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(252,177,17,1) 80%); background: radial-gradient(ellipse at center, rgba(252,174,0,1) 0%,rgba(252,177,17,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(252,177,17,1) 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcae00', endColorstr='#fcb111',GradientType=1 ); } .iphone .screen .icon.reminders hr:nth-child(2):before { background: rgb(72,198,255); background: -moz-radial-gradient(center, ellipse cover, rgba(72,198,255,1) 0%, rgba(87,200,254,1) 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 80%, rgba(87,200,254,1) 80%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(72,198,255,1)), color-stop(60%,rgba(87,200,254,1)), color-stop(60%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(80%,rgba(87,200,254,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(72,198,255,1) 0%,rgba(87,200,254,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(87,200,254,1) 80%); background: -o-radial-gradient(center, ellipse cover, rgba(72,198,255,1) 0%,rgba(87,200,254,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(87,200,254,1) 80%); background: -ms-radial-gradient(center, ellipse cover, rgba(72,198,255,1) 0%,rgba(87,200,254,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(87,200,254,1) 80%); background: radial-gradient(ellipse at center, rgba(72,198,255,1) 0%,rgba(87,200,254,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(87,200,254,1) 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48c6ff', endColorstr='#57c8fe',GradientType=1 ); } .iphone .screen .icon.reminders hr:nth-child(3):before { background: rgb(134,236,75); background: -moz-radial-gradient(center, ellipse cover, rgba(134,236,75,1) 0%, rgba(138,228,88,1) 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 80%, rgba(138,228,88,1) 80%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(134,236,75,1)), color-stop(60%,rgba(138,228,88,1)), color-stop(60%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(80%,rgba(138,228,88,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(134,236,75,1) 0%,rgba(138,228,88,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(138,228,88,1) 80%); background: -o-radial-gradient(center, ellipse cover, rgba(134,236,75,1) 0%,rgba(138,228,88,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(138,228,88,1) 80%); background: -ms-radial-gradient(center, ellipse cover, rgba(134,236,75,1) 0%,rgba(138,228,88,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(138,228,88,1) 80%); background: radial-gradient(ellipse at center, rgba(134,236,75,1) 0%,rgba(138,228,88,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(138,228,88,1) 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86ec4b', endColorstr='#8ae458',GradientType=1 ); } .iphone .screen .icon.reminders hr:nth-child(4):before { background: rgb(223,145,245); background: -moz-radial-gradient(center, ellipse cover, rgba(223,145,245,1) 0%, rgba(219,145,241,1) 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 80%, rgba(219,145,241,1) 80%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(223,145,245,1)), color-stop(60%,rgba(219,145,241,1)), color-stop(60%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(80%,rgba(219,145,241,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(223,145,245,1) 0%,rgba(219,145,241,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(219,145,241,1) 80%); background: -o-radial-gradient(center, ellipse cover, rgba(223,145,245,1) 0%,rgba(219,145,241,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(219,145,241,1) 80%); background: -ms-radial-gradient(center, ellipse cover, rgba(223,145,245,1) 0%,rgba(219,145,241,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(219,145,241,1) 80%); background: radial-gradient(ellipse at center, rgba(223,145,245,1) 0%,rgba(219,145,241,1) 60%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 80%,rgba(219,145,241,1) 80%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df91f5', endColorstr='#db91f1',GradientType=1 ); } } /* Home Screen: Icons: Stocks */ .iphone .screen .icon.stocks { background: rgb(0,0,0); background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 11%, rgba(102,102,102,1) 11%, rgba(102,102,102,1) 12%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 30%, rgba(102,102,102,1) 30%, rgba(102,102,102,1) 31%, rgba(0,0,0,1) 31%, rgba(0,0,0,1) 50%, rgba(102,102,102,1) 50%, rgba(102,102,102,1) 51%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 69%, rgba(102,102,102,1) 69%, rgba(102,102,102,1) 70%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 88%, rgba(102,102,102,1) 88%, rgba(102,102,102,1) 89%, rgba(0,0,0,1) 89%, rgba(0,0,0,1) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(11%,rgba(0,0,0,1)), color-stop(11%,rgba(102,102,102,1)), color-stop(12%,rgba(102,102,102,1)), color-stop(12%,rgba(0,0,0,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(30%,rgba(102,102,102,1)), color-stop(31%,rgba(102,102,102,1)), color-stop(31%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(50%,rgba(102,102,102,1)), color-stop(51%,rgba(102,102,102,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(69%,rgba(0,0,0,1)), color-stop(69%,rgba(102,102,102,1)), color-stop(70%,rgba(102,102,102,1)), color-stop(70%,rgba(0,0,0,1)), color-stop(88%,rgba(0,0,0,1)), color-stop(88%,rgba(102,102,102,1)), color-stop(89%,rgba(102,102,102,1)), color-stop(89%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 11%,rgba(102,102,102,1) 11%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 12%,rgba(0,0,0,1) 30%,rgba(102,102,102,1) 30%,rgba(102,102,102,1) 31%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 50%,rgba(102,102,102,1) 50%,rgba(102,102,102,1) 51%,rgba(0,0,0,1) 51%,rgba(0,0,0,1) 69%,rgba(102,102,102,1) 69%,rgba(102,102,102,1) 70%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 88%,rgba(102,102,102,1) 88%,rgba(102,102,102,1) 89%,rgba(0,0,0,1) 89%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 11%,rgba(102,102,102,1) 11%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 12%,rgba(0,0,0,1) 30%,rgba(102,102,102,1) 30%,rgba(102,102,102,1) 31%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 50%,rgba(102,102,102,1) 50%,rgba(102,102,102,1) 51%,rgba(0,0,0,1) 51%,rgba(0,0,0,1) 69%,rgba(102,102,102,1) 69%,rgba(102,102,102,1) 70%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 88%,rgba(102,102,102,1) 88%,rgba(102,102,102,1) 89%,rgba(0,0,0,1) 89%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 11%,rgba(102,102,102,1) 11%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 12%,rgba(0,0,0,1) 30%,rgba(102,102,102,1) 30%,rgba(102,102,102,1) 31%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 50%,rgba(102,102,102,1) 50%,rgba(102,102,102,1) 51%,rgba(0,0,0,1) 51%,rgba(0,0,0,1) 69%,rgba(102,102,102,1) 69%,rgba(102,102,102,1) 70%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 88%,rgba(102,102,102,1) 88%,rgba(102,102,102,1) 89%,rgba(0,0,0,1) 89%,rgba(0,0,0,1) 100%); background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 11%,rgba(102,102,102,1) 11%,rgba(102,102,102,1) 12%,rgba(0,0,0,1) 12%,rgba(0,0,0,1) 30%,rgba(102,102,102,1) 30%,rgba(102,102,102,1) 31%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 50%,rgba(102,102,102,1) 50%,rgba(102,102,102,1) 51%,rgba(0,0,0,1) 51%,rgba(0,0,0,1) 69%,rgba(102,102,102,1) 69%,rgba(102,102,102,1) 70%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 88%,rgba(102,102,102,1) 88%,rgba(102,102,102,1) 89%,rgba(0,0,0,1) 89%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); } .iphone .screen .icon.stocks .graph { position:absolute; top:50%; left:0px; width:100%; height:1px; } .iphone .screen .icon.stocks .graph + .current { background: -moz-linear-gradient(left, rgba(55,173,255,1) 0%, rgba(55,173,255,1) 50%, rgba(55,173,255,0.01) 51%, rgba(55,173,255,0.01) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(55,173,255,1)), color-stop(50%,rgba(55,173,255,1)), color-stop(51%,rgba(55,173,255,0.01)), color-stop(100%,rgba(55,173,255,0.01))); background: -webkit-linear-gradient(left, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 50%,rgba(55,173,255,0.01) 51%,rgba(55,173,255,0.01) 100%); background: -o-linear-gradient(left, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 50%,rgba(55,173,255,0.01) 51%,rgba(55,173,255,0.01) 100%); background: -ms-linear-gradient(left, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 50%,rgba(55,173,255,0.01) 51%,rgba(55,173,255,0.01) 100%); background: linear-gradient(to right, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 50%,rgba(55,173,255,0.01) 51%,rgba(55,173,255,0.01) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37adff', endColorstr='#0337adff',GradientType=1 ); display:block; height:46px; width:1px; position:absolute; right:13px; top:0px; } .iphone .screen .icon.stocks .graph + .current:before { background: rgb(55,173,255); background: -moz-radial-gradient(center, ellipse cover, rgba(55,173,255,1) 0%, rgba(55,173,255,1) 60%, rgba(0,0,0,1) 60%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(55,173,255,1)), color-stop(60%,rgba(55,173,255,1)), color-stop(60%,rgba(0,0,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 60%,rgba(0,0,0,1) 60%); background: -o-radial-gradient(center, ellipse cover, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 60%,rgba(0,0,0,1) 60%); background: -ms-radial-gradient(center, ellipse cover, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 60%,rgba(0,0,0,1) 60%); background: radial-gradient(ellipse at center, rgba(55,173,255,1) 0%,rgba(55,173,255,1) 60%,rgba(0,0,0,1) 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37adff', endColorstr='#000000',GradientType=1 ); content:""; display:block; height:4px; width:4px; position:absolute; top:11px; left:-2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .iphone .screen .icon.stocks .graph hr { height:1px; background:#fff; margin:0px; padding:0px; border:none; display:inline-block; position:absolute; left:0px; top:0px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; -webkit-transform-origin: left 2px; -moz-transform-origin: left 2px; -ms-transform-origin: left 2px; -o-transform-origin: left 2px; box-shadow:0px 2px 5px 1px rgba(255,255,255,0.2), 0px -1px 2px 0px #000; } .iphone .screen .icon.stocks .graph hr:nth-child(1) { width:7px; left:-1px; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); } .iphone .screen .icon.stocks .graph hr:nth-child(2) { width:3px; top:3px; left:6px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); } .iphone .screen .icon.stocks .graph hr:nth-child(3) { width:5px; left:9px; top:2px; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); } .iphone .screen .icon.stocks .graph hr:nth-child(4) { width:5px; left:9px; top:-2px; -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); } .iphone .screen .icon.stocks .graph hr:nth-child(5) { width:8px; left:15px; top:0px; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); } .iphone .screen .icon.stocks .graph hr:nth-child(6) { width:10px; left:15px; top:-7px; -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); -ms-transform: rotate(75deg); -o-transform: rotate(75deg); } .iphone .screen .icon.stocks .graph hr:nth-child(7) { width:6px; left:18px; top:3px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); } .iphone .screen .icon.stocks .graph hr:nth-child(8) { width:6px; left:25px; top:4px; -webkit-transform: rotate(-65deg); -moz-transform: rotate(-65deg); -ms-transform: rotate(-65deg); -o-transform: rotate(-65deg); } .iphone .screen .icon.stocks .graph hr:nth-child(9) { width:4px; left:26px; top:0px; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); } .iphone .screen .icon.stocks .graph hr:nth-child(10) { width:10px; left:31px; top:-2px; -webkit-transform: rotate(-73deg); -moz-transform: rotate(-73deg); -ms-transform: rotate(-73deg); -o-transform: rotate(-73deg); } .iphone .screen .icon.stocks .graph hr:nth-child(11) { width:6px; left:31px; top:-11px; -webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); } .iphone .screen .icon.stocks .graph hr:nth-child(12) { width:4px; left:35px; top:-5px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); } .iphone .screen .icon.stocks .graph hr:nth-child(13) { width:6px; left:36px; top:-7px; -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); } .iphone .screen .icon.stocks .graph hr:nth-child(14) { width:8px; left:42px; top:-3px; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); } .iphone .screen .icon.stocks .graph hr:nth-child(15) { width:3px; left:44px; top:-9px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); } /* Home Screen: Icons: Calculator */ .iphone .screen .icon.calculator {} .iphone .screen .icon.calculator span { display:block; position:absolute; height:50%; padding:0px; width:50%; background:#ff9500; text-align:center; border:1px solid #000; font-family: 'Roboto', sans-serif; font-weight:100; font-size:20px; line-height:20px; } .iphone .screen .icon.calculator span.left { left:0px; border-left:none; } .iphone .screen .icon.calculator span.right { right:0px; border-right:none; } .iphone .screen .icon.calculator span.top { top:0px; border-top:none; } .iphone .screen .icon.calculator span.bottom { bottom:0px; border-bottom:none; } .iphone .screen .icon.calculator span.left.top { -moz-border-radius: 10px 0px 0px 0px; -webkit-border-radius: 10px 0px 0px 0px; border-radius: 10px 0px 0px 0px; } .iphone .screen .icon.calculator span.right.top { -moz-border-radius: 0px 10px 0px 0px; -webkit-border-radius: 0px 10px 0px 0px; border-radius: 0px 10px 0px 0px; font-size:30px; line-height:18px; } .iphone .screen .icon.calculator span.left.bottom { -moz-border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 0px 10px; border-radius: 0px 0px 0px 10px; } .iphone .screen .icon.calculator span.right.bottom { -moz-border-radius: 0px 0px 10px 0px; -webkit-border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px; background:#ddd; color:#000; } /* Home Screen: Icons: iTunes Store */ .iphone .screen .icon.voicememos {} .iphone .screen .icon.voicememos .soundwave { width:100%; height:100%; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); } .iphone .screen .icon.voicememos .soundwave:after { content:""; height:100%; width:0.5px; background:#000; position:absolute; top:0px; left:23px; } .iphone .screen .icon.voicememos .soundwave hr { background:#000; height:0.5px; margin:0.5px auto; padding:0px; border:none; width:1px; } .iphone .screen .icon.voicememos .soundwave hr.one { width:1px; } .iphone .screen .icon.voicememos .soundwave hr.two { width:2px; } .iphone .screen .icon.voicememos .soundwave hr.three { width:3px; } .iphone .screen .icon.voicememos .soundwave hr.four { width:4px; } .iphone .screen .icon.voicememos .soundwave hr.five { width:5px; } .iphone .screen .icon.voicememos .soundwave hr.six { width:6px; } .iphone .screen .icon.voicememos .soundwave hr.seven { width:7px; } .iphone .screen .icon.voicememos .soundwave hr.eight { width:8px; } .iphone .screen .icon.voicememos .soundwave hr.twelve { width:12px; } .iphone .screen .icon.voicememos .soundwave hr.fourteen { width:14px; } .iphone .screen .icon.voicememos .soundwave hr.sixteen { width:16px; } .iphone .screen .icon.voicememos .soundwave hr.eighteen { width:18px; } .iphone .screen .icon.voicememos .soundwave hr.thirty { width:30px; } .iphone .screen .icon.voicememos .soundwave hr.thirtyone { width:31px; } .iphone .screen .icon.voicememos .soundwave hr.fourty { width:40px; } @media only screen and (-webkit-min-device-pixel-ratio:2) { .iphone .screen .icon.voicememos .soundwave:after { width:1px; background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.01) 51%, rgba(0,0,0,0.01) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.01))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#03000000',GradientType=1 ); /* IE6-9 */ } .iphone .screen .icon.voicememos .soundwave hr { height:1px; margin:0px auto; background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.01) 51%, rgba(0,0,0,0.01) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.01))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.01) 51%,rgba(0,0,0,0.01) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#03000000',GradientType=0 ); /* IE6-9 */ } } /* Home Screen: Icons: iTunes Store */ .iphone .screen .icon.itunesstore { background: rgb(239,77,183); background: -moz-linear-gradient(top, rgba(239,77,183,1) 0%, rgba(199,68,252,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,77,183,1)), color-stop(100%,rgba(199,68,252,1))); background: -webkit-linear-gradient(top, rgba(239,77,183,1) 0%,rgba(199,68,252,1) 100%); background: -o-linear-gradient(top, rgba(239,77,183,1) 0%,rgba(199,68,252,1) 100%); background: -ms-linear-gradient(top, rgba(239,77,183,1) 0%,rgba(199,68,252,1) 100%); background: linear-gradient(to bottom, rgba(239,77,183,1) 0%,rgba(199,68,252,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef4db7', endColorstr='#c744fc',GradientType=0 ); } .iphone .screen .icon.itunesstore .note { position:relative; } .iphone .screen .icon.itunesstore .note:before { content:""; display:block; height:36px; width:36px; border:2px solid #fff; margin:3px auto; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } .iphone .screen .icon.itunesstore .note:after { content:""; display:block; background:#fff; height:5px; width:14px; position:absolute; left:17px; top:9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); } .iphone .screen .icon.itunesstore .note .arm { display:block; background:#fff; width:2px; height:18px; position:absolute; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .iphone .screen .icon.itunesstore .note .arm:nth-child(1) { top:11px; left:17px; } .iphone .screen .icon.itunesstore .note .arm:nth-child(2) { top:8px; right:15px; } .iphone .screen .icon.itunesstore .note .arm:after { content:""; display:block; position:absolute; bottom:-2px; right:0px; background:#fff; height:5px; width:7px; -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); } /* Home Screen: Icons: Passbook */ .iphone .screen .icon.passbook {} .iphone .screen .icon.passbook div { width:100%; height:15px; position:relative; } .iphone .screen .icon.passbook .flights { background:#55b6ed; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } .iphone .screen .icon.passbook .movies { background:#42ce00; height:16px; box-shadow:0px 0px 4px 0px rgba(40,40,40,0.3); } .iphone .screen .icon.passbook .movies:before { content:""; display:block; width:10px; height:10px; margin:0 auto; background:#55b6ed; position:relative; top:-5px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; box-shadow:0px -5px 5px -4px rgba(40,40,40,0.4) inset; } .iphone .screen .icon.passbook .restaurants { background:#ffa100; box-shadow:0px -1px 5px 0px rgba(100,100,100,0.5); -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; } .iphone .screen .icon.passbook .restaurants:before { content:""; display:block; position:absolute; width:96%; top:-1px; left:2px; border-top:2px dotted #ffa100; } .iphone .screen .icon.passbook div span { display:block; position:absolute; left:6px; top:5px; height:2px; width:2px; background:#fff; } .iphone .screen .icon.passbook .flights span { height:2px; width:7px; top:7px; left:6px; position:relative; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; } .iphone .screen .icon.passbook .flights span:before, .iphone .screen .icon.passbook .flights span:after { content:""; display:block; background:#fff; height:1px; width:5px; position:relative; left:-1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; } .iphone .screen .icon.passbook .flights span:before { -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); } .iphone .screen .icon.passbook .flights span:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); } .iphone .screen .icon.passbook .flights span hr { margin:0px; padding:0px; background:none; border:none; position:absolute; left:-1px; top:-1px; border-color:transparent #fff; border-style:solid; border-width:2px 0 2px 3px; } .iphone .screen .icon.passbook .movies span { height:4px; width:5px; top:-3px; left:6px; position:relative; } .iphone .screen .icon.passbook .movies span:after { content:""; display:block; float:right; position:relative; right:-3px; top:0px; border-color:transparent #fff; border-style:solid; border-width:2px 3px 2px 0px; } .iphone .screen .icon.passbook .movies span hr { background: rgb(66,206,0); background: -moz-radial-gradient(center, ellipse cover, rgba(66,206,0,1) 0%, rgba(66,206,0,1) 38%, rgba(255,255,255,1) 38%, rgba(255,255,255,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(66,206,0,1)), color-stop(38%,rgba(66,206,0,1)), color-stop(38%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(66,206,0,1) 0%,rgba(66,206,0,1) 38%,rgba(255,255,255,1) 38%,rgba(255,255,255,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(66,206,0,1) 0%,rgba(66,206,0,1) 38%,rgba(255,255,255,1) 38%,rgba(255,255,255,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(66,206,0,1) 0%,rgba(66,206,0,1) 38%,rgba(255,255,255,1) 38%,rgba(255,255,255,1) 100%); background: radial-gradient(ellipse at center, rgba(66,206,0,1) 0%,rgba(66,206,0,1) 38%,rgba(255,255,255,1) 38%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42ce00', endColorstr='#ffffff',GradientType=1 ); margin:0px; padding:0px; border:none; position:absolute; top:-4px; height:4px; width:4px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .iphone .screen .icon.passbook .movies span hr:nth-child(1) { left:-2px; } .iphone .screen .icon.passbook .movies span hr:nth-child(2) { left:3px; } .iphone .screen .icon.passbook .restaurants span { background: rgb(255,161,0); background: -moz-linear-gradient(top, rgba(255,161,0,1) 0%, rgba(255,161,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,161,0,1)), color-stop(50%,rgba(255,161,0,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa100', endColorstr='#ffffff',GradientType=0 ); height:8px; width:8px; top:0px; left:5px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .iphone .screen .icon.passbook .restaurants span:before { background: rgb(255,161,0); background: -moz-radial-gradient(center, ellipse cover, rgba(255,161,0,1) 0%, rgba(255,161,0,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,161,0,1)), color-stop(50%,rgba(255,161,0,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background: radial-gradient(ellipse at center, rgba(255,161,0,1) 0%,rgba(255,161,0,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa100', endColorstr='#ffffff',GradientType=1 ); content:""; display:block; position:relative; float:left; left:-1px; top:4px; height:2px; width:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .iphone .screen .icon.passbook .restaurants span:after { background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,161,0,1) 50%, rgba(255,161,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(50%,rgba(255,161,0,1)), color-stop(100%,rgba(255,161,0,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,161,0,1) 50%,rgba(255,161,0,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,161,0,1) 50%,rgba(255,161,0,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,161,0,1) 50%,rgba(255,161,0,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,161,0,1) 50%,rgba(255,161,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffa100',GradientType=0 ); content:""; display:block; position:relative; bottom:-9px; width:100%; height:1px; } /* Home Screen: Icons: Compass */ .iphone .screen .icon.compass { background:#000; position:relative; } .iphone .screen .icon.compass .degrees { background:#2b2b2b; position:absolute; left:14px; top:14px; height:18px; width:18px; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; } .iphone .screen .icon.compass .degrees:before { content:""; position:absolute; display:block; right:-9px; top:-9px; border-color:transparent #ff3b30; border-style:solid; border-width:2px 0px 2px 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .iphone .screen .icon.compass .degrees span { position:absolute; } .iphone .screen .icon.compass .degrees span.horizontal { background: -moz-linear-gradient(top, rgba(183,183,183,1) 0%, rgba(183,183,183,1) 49%, rgba(183,183,183,0.01) 50%, rgba(183,183,183,0.01) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,183,183,1)), color-stop(49%,rgba(183,183,183,1)), color-stop(50%,rgba(183,183,183,0.01)), color-stop(100%,rgba(183,183,183,0.01))); background: -webkit-linear-gradient(top, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); background: -o-linear-gradient(top, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); background: -ms-linear-gradient(top, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); background: linear-gradient(to bottom, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#03b7b7b7',GradientType=0 ); width:18px; height:1px; left:0px; top:9px; } .iphone .screen .icon.compass .degrees span.vertical { background: -moz-linear-gradient(left, rgba(183,183,183,1) 0%, rgba(183,183,183,1) 49%, rgba(183,183,183,0.01) 50%, rgba(183,183,183,0.01) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(183,183,183,1)), color-stop(49%,rgba(183,183,183,1)), color-stop(50%,rgba(183,183,183,0.01)), color-stop(100%,rgba(183,183,183,0.01))); background: -webkit-linear-gradient(left, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); background: -o-linear-gradient(left, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); background: -ms-linear-gradient(left, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); background: linear-gradient(to right, rgba(183,183,183,1) 0%,rgba(183,183,183,1) 49%,rgba(183,183,183,0.01) 50%,rgba(183,183,183,0.01) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#03b7b7b7',GradientType=1 ); width:1px; height:18px; left:9px; top:0px; } .iphone .screen .icon.compass .degrees span:before, .iphone .screen .icon.compass .degrees span:after { position:absolute; font-family:sans-serif; font-size:4px; } .iphone .screen .icon.compass .degrees span.vertical:before { content:"W"; left:-10px; top:-3px; } .iphone .screen .icon.compass .degrees span.vertical:after { content:"N"; left:7px; top:-3px; } .iphone .screen .icon.compass .degrees span.horizontal:before { content:"S"; top:8px; left:-1px; } .iphone .screen .icon.compass .degrees span.horizontal:after { content:"E"; top:8px; left:17px; } .iphone .screen .icon.compass .degrees hr { background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(255,255,255,1)), color-stop(41%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); margin:0px; padding:0px; height:1px; border:none; position:absolute; top:9px; left:-11px; width:3px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; -webkit-transform-origin: 20px center; -moz-transform-origin: 20px center; -ms-transform-origin: 20px center; -o-transform-origin: 20px center; } .iphone .screen .icon.compass .degrees hr:nth-child(4n) { background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(51%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); } /* Home Screen: Icons: FaceTime */ .iphone .screen .icon.facetime { background: #9afd7d; /* Old browsers */ background: -moz-linear-gradient(top, #9afd7d 0%, #43e62f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9afd7d), color-stop(100%,#43e62f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* IE10+ */ background: linear-gradient(to bottom, #9afd7d 0%,#43e62f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9afd7d', endColorstr='#43e62f',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.facetime .camera { background:#fff; height:20px; width:24px; float:left; position:relative; top:13px; left:7px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .iphone .screen .icon.facetime .camera:before { background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 69%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(69%,rgba(255,255,255,1)), color-stop(70%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 69%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 69%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 69%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 69%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); content:""; display:inline-block; height:3px; width:2px; float:left; position:relative; left:-2px; top:4px; -moz-border-radius: 1px 0px 0px 1px; -webkit-border-radius: 1px 0px 0px 1px; border-radius: 1px 0px 0px 1px; } .iphone .screen .icon.facetime .camera .lens { display:inline-block; float:right; position:relative; height:6px; width:6px; left:8px; top:3px; border-color:transparent #fff; border-style:solid; border-width:4px 7px 4px 0px; } .iphone .screen .icon.facetime .camera .lens:after { content:""; display:block; background:#fff; height:14px; width:1px; position:relative; left:14px; top:-4px; } /* Home Screen: Icons: Settings */ .iphone .screen .icon.settings { background: #e6e6e6; /* Old browsers */ background: -moz-linear-gradient(top, #e6e6e6 0%, #a5a8ac 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#a5a8ac)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e6e6e6 0%,#a5a8ac 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e6e6e6 0%,#a5a8ac 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e6e6e6 0%,#a5a8ac 100%); /* IE10+ */ background: linear-gradient(to bottom, #e6e6e6 0%,#a5a8ac 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#a5a8ac',GradientType=0 ); /* IE6-9 */ display:none; } /* Home Screen: Icons: Phone */ .iphone .screen .icon.phone { background: #9afd7d; /* Old browsers */ background: -moz-linear-gradient(top, #9afd7d 0%, #43e62f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9afd7d), color-stop(100%,#43e62f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9afd7d 0%,#43e62f 100%); /* IE10+ */ background: linear-gradient(to bottom, #9afd7d 0%,#43e62f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9afd7d', endColorstr='#43e62f',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.phone span { background:#fff; height:5px; width:36px; position:absolute; top:24px; left:2px; border-top-left-radius:20px 5px; border-top-right-radius:20px 5px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); } .iphone .screen .icon.phone span:before, .iphone .screen .icon.phone span:after { content:""; display:block; position:absolute; top:1px; height:9px; width:11px; background:#fff; } .iphone .screen .icon.phone span:before { left:-1px; -moz-border-radius: 4px 2px 2px 2px; -webkit-border-radius: 4px 2px 2px 2px; border-radius: 4px 2px 2px 2px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); } .iphone .screen .icon.phone span:after { right:-1px; -moz-border-radius: 2px 4px 2px 2px; -webkit-border-radius: 2px 4px 2px 2px; border-radius: 2px 4px 2px 2px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); } /* Home Screen: Icons: Mail */ .iphone .screen .icon.mail { background: #4383fe; /* Old browsers */ background: -moz-linear-gradient(top, #4383fe 0%, #60dbfb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4383fe), color-stop(100%,#60dbfb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4383fe 0%,#60dbfb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4383fe 0%,#60dbfb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4383fe 0%,#60dbfb 100%); /* IE10+ */ background: linear-gradient(to bottom, #4383fe 0%,#60dbfb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4383fe', endColorstr='#60dbfb',GradientType=0 ); /* IE6-9 */ } .iphone .screen .icon.mail:before { background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,1) 16%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(15%,rgba(255,255,255,0)), color-stop(16%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 16%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 16%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 16%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 16%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); content:""; display:block; position:absolute; height:2px; width:6px; top:27px; left:21px; } .iphone .screen .icon.mail .envelope { height:20px; width:30px; position:absolute; top:13px; left:8px; overflow:hidden; } .iphone .screen .icon.mail .envelope:before, .iphone .screen .icon.mail .envelope:after { content:""; display:block; position:absolute; top:3px; background:#fff; height:14px; width:14px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .iphone .screen .icon.mail .envelope:before { left:-7px; } .iphone .screen .icon.mail .envelope:after { right:-7px; } .iphone .screen .icon.mail .envelope .flap { display:block; position:absolute; left:5px; top:-10px; height:20px; width:20px; background:#fff; -moz-border-radius: 0px 0px 2px 0px; -webkit-border-radius: 0px 0px 2px 0px; border-radius: 0px 0px 2px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .iphone .screen .icon.mail .envelope .flap:before, .iphone .screen .icon.mail .envelope .flap:after { content:""; display:block; background:#fff; height:13px; width:13px; position:relative; } .iphone .screen .icon.mail .envelope .flap:before { top:14px; left:21px; } .iphone .screen .icon.mail .envelope .flap:after { top:8px; left:14px; } /* Home Screen: Icons: Safari */ .iphone .screen .icon.safari {} .iphone .screen .icon.safari .compass { background: rgb(26,213,253); background: -moz-linear-gradient(top, rgba(26,213,253,1) 0%, rgba(29,100,240,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(26,213,253,1)), color-stop(100%,rgba(29,100,240,1))); background: -webkit-linear-gradient(top, rgba(26,213,253,1) 0%,rgba(29,100,240,1) 100%); background: -o-linear-gradient(top, rgba(26,213,253,1) 0%,rgba(29,100,240,1) 100%); background: -ms-linear-gradient(top, rgba(26,213,253,1) 0%,rgba(29,100,240,1) 100%); background: linear-gradient(to bottom, rgba(26,213,253,1) 0%,rgba(29,100,240,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ad5fd', endColorstr='#1d64f0',GradientType=0 ); height:40px; width:40px; margin:3px auto; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; } .iphone .screen .icon.safari .compass:before, .iphone .screen .icon.safari .compass:after { content:""; display:block; position:absolute; top:45%; left:50%; border-style:solid; border-width:3px 0 3px 20px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; } .iphone .screen .icon.safari .compass:before { border-color:transparent #fff; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } .iphone .screen .icon.safari .compass:after { border-color:transparent #ff1414; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .iphone .screen .icon.safari .compass .degrees hr { background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(255,255,255,1)), color-stop(41%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); margin:0px; padding:0px; height:1px; border:none; position:absolute; top:23px; left:5px; width:2px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; -webkit-transform-origin: 18px center; -moz-transform-origin: 18px center; -ms-transform-origin: 18px center; -o-transform-origin: 18px center; } .iphone .screen .icon.safari .compass .degrees hr:nth-child(2n) { width:3px; } /* Home Screen: Icons: Music */ .iphone .screen .icon.music { background: rgb(255,41,105); background: -moz-linear-gradient(top, rgba(255,41,105,1) 0%, rgba(255,93,58,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,41,105,1)), color-stop(100%,rgba(255,93,58,1))); background: -webkit-linear-gradient(top, rgba(255,41,105,1) 0%,rgba(255,93,58,1) 100%); background: -o-linear-gradient(top, rgba(255,41,105,1) 0%,rgba(255,93,58,1) 100%); background: -ms-linear-gradient(top, rgba(255,41,105,1) 0%,rgba(255,93,58,1) 100%); background: linear-gradient(to bottom, rgba(255,41,105,1) 0%,rgba(255,93,58,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2969', endColorstr='#ff5d3a',GradientType=0 ); } .iphone .screen .icon.music .note { width:20px; margin:10px auto 0px; position:relative; left:3px; } .iphone .screen .icon.music .note:after { content:""; display:block; background:#fff; height:6px; width:18px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); } .iphone .screen .icon.music .note .arm { display:block; background:#fff; width:2px; height:24px; position:absolute; top:0px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .iphone .screen .icon.music .note .arm:nth-child(1) { top:2px; left:0px; } .iphone .screen .icon.music .note .arm:nth-child(2) { top:-1px; right:2px; } .iphone .screen .icon.music .note .arm:after { content:""; display:block; position:absolute; bottom:-2px; right:0px; background:#fff; height:7px; width:9px; -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); } </style></head><body> <div class="iphone-border"> <span class="top left"> <span class="ringer"></span> <span class="volume up"></span> <span class="volume down"></span> </span> <span class="top right"> <span class="power"></span> </span> <span class="bottom left"></span> <span class="bottom right"></span> <div class="iphone"> <span class="speaker"></span> <div class="screen"> <div class="home"> <div class="bg"></div> <div class="top-bar"> <span class="signal">●●●●●</span> <span class="wifi"><hr /></span> <span class="time">2:30 PM</span> <span class="battery">100%</span> </div> <div class="icons"> <a class="icon messages" alt="Messages"> <hr /> </a> <a class="icon calendar" alt="Calendar"> <span class="weekday"></span> <span class="date"></span> </a> <a class="icon photos" alt="Photos"> <span class="orange"></span> <span class="yellow"></span> <span class="green"></span> <span class="seafoam"></span> <span class="blue"></span> <span class="purple"></span> <span class="pink"></span> <span class="red"></span> </a> <a class="icon camera" alt="Camera"> <span class="shutter"></span> <div class="body"> <span class="lens"></span> </div> </a> <a class="icon weather" alt="Weather"> <span class="sun"></span> <span class="cloud"></span> </a> <a class="icon clock" alt="Clock"> <div class="clock"> <div><span>12</span></div> <div><span>11</span><span>1</span></div> <div><span>10</span><span>2</span></div> <div><span>9</span><span>3</span></div> <div><span>8</span><span>4</span></div> <div><span>7</span><span>5</span></div> <div><span>6</span></div> <hr class="minute"/><hr class="hour"/><hr class="second"/> </div> </a> <a class="icon maps" alt="Maps"></a> <a class="icon videos" alt="Videos"> <div class="arm"> <div><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div> </div> </a> <a class="icon notes" alt="Notes"> <div class="binding"></div> <hr /><hr /><hr /> </a> <a class="icon reminders" alt="Reminders"> <hr /><hr /><hr /><hr /><hr /> </a> <a class="icon stocks" alt="Stocks"> <div class="graph"> <hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /> </div> <span class="current"></span> </a> <a class="icon calculator" alt="Calculator"> <span class="left top">+</span><span class="right top">-</span> <span class="left bottom">×</span><span class="right bottom">=</span> </a> <a class="icon voicememos" alt="Voice Memos"> <div class="soundwave"> <hr class="two" /> <hr class="three" /> <hr class="two" /> <hr class="three" /> <hr class="two" /> <hr class="one" /> <hr class="two" /> <hr class="three" /> <hr class="fourteen" /> <hr class="twelve" /> <hr class="eighteen" /> <hr class="sixteen" /> <hr class="fourty" /> <hr class="thirty" /> <hr class="thirtyone" /> <hr class="sixteen" /> <hr class="twelve" /> <hr class="six" /> <hr class="twelve" /> <hr class="fourteen" /> <hr class="six" /> <hr class="seven" /> <hr class="eight" /> <hr class="five" /> <hr class="four" /> <hr class="five" /> <hr class="four" /> <hr class="three" /> <hr class="two" /> <hr class="three" /> <hr class="two" /> <hr class="three" /> <hr class="two" /> <hr class="three" /> </div> </a> <a class="icon itunesstore" alt="iTunes Store"> <div class="note"> <span class="arm"></span> <span class="arm"></span> </div> </a> <a class="icon passbook" alt="Passbook"> <div class="flights"><span><hr /></span></div> <div class="movies"><span><hr /><hr /></span></div> <div class="restaurants"><span></span></div> </a> <a class="icon compass" alt="Compass"> <div class="degrees"> <hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /> <hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /> <span class="horizontal"></span> <span class="vertical"></span> </div> </a> <a class="icon facetime" alt="FaceTime"> <div class="camera"> <span class="lens"></span> </div> </a> <a class="icon settings" alt="Settings"></a> </div> <div class="nav-bar"> <span>●</span> <span>●</span> </div> <div class="footer-bar icons"> <a class="icon phone" alt="Phone"> <span></span> </a> <a class="icon mail" alt="Mail"> <div class="envelope"> <span class="flap"></span> </div> </a> <a class="icon safari" alt="Safari"> <div class="compass"> <div class="degrees"> <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 /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /> </div> </div> </a> <a class="icon music" alt="Music"> <div class="note"> <span class="arm"></span> <span class="arm"></span> </div> </a> </div> </div> </div> <a href="#" class="home"></a> </div> </div> <a href="http://beautifully.unapologeticallycss.com/" target="_top" style="display:block;text-align:center;margin-bottom:40px;">Full Demo</a> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script > $(document).ready(function() { // Set the time on the header if it's displayed if ($(".top-bar .time").length > 0) { $(".time").html(displayTime()); } // Setup the background setupBG(); // Set the calendar icon $(".icon.calendar .weekday").html(displayWeekday()); $(".icon.calendar .date").html(displayDate()); // Set the clock icon rotateClock(); setInterval(function() { rotateClock(); },60000); // Rotate the degrees in Safari rotateDegrees($(".iphone .screen .icon.safari .compass .degrees hr")); // Rotate the degrees in the Compass rotateDegrees($(".iphone .screen .icon.compass .degrees hr")); }); // *************** // Functions // *************** function displayTime() { var str = ""; var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var extra = ""; if (minutes < 10) { minutes = "0" + minutes; } if(hours > 11){ extra = "PM" } else { extra = "AM" } hours = hours%12; if (hours < 1) { hours = 12; } str = hours + ":" + minutes + " " + extra; return str; } function setupBG() { var maxTop = $(".iphone .screen .home .bg").height(); var maxLeft = $(".iphone .screen .home .bg").width(); for(i=0;i<25;i++){ $(".iphone .screen .home .bg").prepend("<span></span>"); var top = Math.floor((Math.random()*maxTop)+1); var left = Math.floor((Math.random()*maxLeft)+1); $(".iphone .screen .home .bg span:first").css('top', top+'px'); $(".iphone .screen .home .bg span:first").css('left', left+'px'); } $(".iphone .screen .home .bg span").fadeIn(2000); moveBG(); } function moveBG() { setInterval(function() { $(".iphone .screen .home .bg span:odd").each(function() { moveBGSpan($(this)); }); },2000); setInterval(function() { $(".iphone .screen .home .bg span:even").each(function() { moveBGSpan($(this)); }); },1000); } function moveBGSpan(span, mul) { var height = $(".iphone .screen .home .bg").height(); var width = $(".iphone .screen .home .bg").width(); var top = $(span).position().top + (10-Math.floor(Math.random()*30)); var left = $(span).position().left + (10-Math.floor(Math.random()*30)); if (top > height) { top = (height-5); } else if (top < 0) { top = 5; } if (left > width) { left = (width-5); } else if (left < 0) { left = 5; } $(span).animate({ top: top, left: left }, 3000); } function displayWeekday() { var d = new Date(); var weekday = new Array(7); weekday[0] = "Sunday"; weekday[1] = "Monday"; weekday[2] = "Tuesday"; weekday[3] = "Wednesday"; weekday[4] = "Thursday"; weekday[5] = "Friday"; weekday[6] = "Saturday"; var n = weekday[d.getDay()]; return n; } function displayDate() { var d = new Date(); var date = d.getDate(); return date; } function rotateClock(set) { var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); hours = (hours%12) + (minutes/60); hDeg = (hours*360)/12; mDeg = (minutes*360)/60; sDeg = (seconds*360)/60; $(".icon.clock .clock").addClass("set"); doRotate(".icon.clock hr.hour", hDeg); doRotate(".icon.clock hr.minute", mDeg); doRotate(".icon.clock hr.second", sDeg); setTimeout(function() { $(".icon.clock .clock").removeClass("set"); doRotate(".icon.clock hr.second", (sDeg+360)); }, 1); } function rotateDegrees(target) { var deg = 0; var inc = 360/$(target).length; $(target).each(function() { doRotate($(this), deg); deg += inc; }); } function doRotate(target, deg) { $(target).css({ '-moz-transform':'rotate('+deg+'deg)', '-webkit-transform':'rotate('+deg+'deg)', '-o-transform':'rotate('+deg+'deg)', '-ms-transform':'rotate('+deg+'deg)', 'transform': 'rotate('+deg+'deg)' }); } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: