Fire JS Bin - iOS7

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script>
<title>Interactive Apple iPhone 5S & iOS 7 Concept</title>
        <link rel="stylesheet" href="http://cdn3.recombu.com/min/mobile/1.52/css/interactive/iphone5s.css" type="text/css" media="screen" />
        <link rel="shortcut icon" href="http://cdn.recombu.com/mobile/1.15/images/favicon.ico" type="image/x-icon" />
        <link href='http://fonts.googleapis.com/css?family=Mate|Open+Sans:400,600|Merriweather+Sans:700' rel='stylesheet' type='text/css'>
        <style type="text/css">
            body { background: none; text-align: center; }
            #colour { width: 400px; margin: 0 auto 25px; float: none; }
        </style>
        <link rel="canonical" href="http://recombu.com/mobile/interactive/iphone-5s-ios7-concept/" />
        <meta name="description" content="Play With Recombu's Interactive Apple iPhone 5S & iOS 7 Concept Built With Just HTML, CSS & Javscript Before June 10th Launch." />
<meta property="og:title" content="Interactive Apple iPhone 5S & iOS7 Concept Built With Only HTML, CSS & Javascript"/>
<meta property="og:url" content="http://recombu.com/mobile/interactive/iphone-5s-ios7-concept/"/>
<meta property="og:site_name" content="Recombu"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="Play With Recombu's Interactive Apple iPhone 5S & iOS 7 Concept Built With Just HTML, CSS & Javscript Before June 10th Launch."/>
<meta property="og:image" content="http://cdn.recombu.com/mobile/1.15/img/interactive/thumb.png"/>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@recombu">
<meta name="twitter:creator" content="@recombu">
<meta name="twitter:title" content="Interactive Apple iPhone 5S & iOS7 Concept Built With Only HTML, CSS & Javascript">
<meta name="twitter:description" content="Play With Recombu's Interactive Apple iPhone 5S & iOS 7 Concept Built With Just HTML, CSS & Javscript Before June 10th Launch.">
<meta name="twitter:domain" content="recombu.com">
<meta name="twitter:image" content="http://cdn.recombu.com/mobile/1.15/img/interactive/thumb.png">
    </head>

<body>

<div id="colour" class="black">
    <div id="iPhone" class="locked">
        <b class="lock"><span class="btn-outer"></span></b>
        <b class="rotation btn-outer"></b>
        <b class="volume up"><span class="btn-outer"></span></b>
        <b class="volume down"><span class="btn-outer"></span></b>
        <span class="strip top-left"></span>
        <span class="strip top-right"></span>
        <span class="strip bottom-left"></span>
        <span class="strip bottom-right"></span>
        <span class="camera-front"><span></span></span>
        <span class="speaker"><span class="inner"><span>.............................<br />.............................<br />.............................</span></span></span>
        <b class="home"><span></span></b>
        <div class="inner-1"><div class="inner-2">
                <div class="screen"><div class="screen-inner">
                        <div id="pull-down">
                            <b class="handle"></b>
                            <b class="handle-btn"></b>
                            <ul class="weather">
                                <li><span>Mon</span>29/11<b></b></li>
                                <li><span>Tues</span>26/9<b></b></li>
                                <li><span>Wed</span>28/11<b></b></li>
                                <li><span>Thurs</span>31/15<b></b></li>
                                <li><span>Fri</span>31/14<b></b></li>
                                <li><span>Sat</span>30/12<b></b></li>
                            </ul>
                            <ul class="widgets">
                                <li class="wifi off"><i class="wifi"><span class="overlay"></span><b></b><em></em></i><label>Wi-Fi</label></li>
                                <li class="bluetooth off"><i class="bluetooth"><em></em></i><label>Bluetooth</label></li>
                                <li class="location"><i class="location"></i><label>Location Services</label></li>
                                <li class="airplane off"><i class="airplane"><em></em></i><label>Airplane Mode</label></li>
                            </ul>
                            <ul class="notifications">
                                <li class="heading"><i class="icon phone"><span class="gradient"></span><b></b></i>Phone<b class="close">×</b></li>
                                <li id="phone-app"><span class="indicator"></span>Blocked<span class="small">Missed Call</span><em>14:08</em></li>
                                <li class="heading"><i class="icon messages"><span class="gradient"></span><b></b></i>Messages<b class="close">×</b></li>
                                <li id="messages-app"><span class="indicator"></span>Recombu<span class="small">Did you know that this iPhone 5S concept has been built using only HTML, CSS & JavaScript, without a single image?</span><em>2h ago</em></li>
                            </ul>
                        </div>

<div id="messages" class="app">
                            <div class="top-bar">
                                <b>Messages</b>
                                Recombu
                                <i>Edit</i>
                            </div>
                            <div class="ctr">
                                <ul class="msgs">
                                    <li><p>My mobile contract is ending soon, quite fancy the new iPhone too.</p><p class="date"><span>Read</span> 24 May 2013 14:21</p></li>
                                    <li><i class="icon recombu"><span class="green"></span><span class="orange"></span><span class="grey"></span><span class="bg">r</span></i><p>Good choice! It's a great phone.</p><p class="date"><span>Read</span> 24 May 2013 14:21</p></li>
                                    <li><p>Where can I compare the best iPhone deals?</p><p class="date"><span>Read</span> 24 May 2013 14:21</p></li>
                                    <li><i class="icon recombu"><span class="green"></span><span class="orange"></span><span class="grey"></span><span class="bg">r</span></i><p>Have you tried recombu? http://recombu.com/mobile/</p><p class="date"><span>Read</span> 24 May 2013 14:29</p></li>
                                    <li><p>Thanks! I'll check it out.</p><p class="date"><span>Read</span> 24 May 2013 14:37</p></li>
                                    <li><i class="icon recombu"><span class="green"></span><span class="orange"></span><span class="grey"></span><span class="bg">r</span></i><p>Did you know that this iPhone 5S concept has been built using only HTML, CSS & JavaScript, without a single image?</p><p class="date"><span>Read</span> 24 May 2013 14:39</p></li>
                                </ul>
                                <div class="bottom-bar">
                                    <b><em></em></b>
                                    <input placeholder="Show keyboard..." id="messages-input" />
                                    <i>Send</i>
                                </div>
                            </div>
                            <div class="keyboard">
                                <ul class="row1">
                                    <li data-value="q"><span>Q</span></li>
                                    <li data-value="w"><span>W</span></li>
                                    <li data-value="e"><span>E</span></li>
                                    <li data-value="r"><span>R</span></li>
                                    <li data-value="t"><span>T</span></li>
                                    <li data-value="y"><span>Y</span></li>
                                    <li data-value="u"><span>U</span></li>
                                    <li data-value="i"><span>I</span></li>
                                    <li data-value="o"><span>O</span></li>
                                    <li data-value="p"><span>P</span></li>
                                </ul>
                                <ul class="row2">
                                    <li data-value="a"><span>A</span></li>
                                    <li data-value="s"><span>S</span></li>
                                    <li data-value="d"><span>D</span></li>
                                    <li data-value="f"><span>F</span></li>
                                    <li data-value="g"><span>G</span></li>
                                    <li data-value="h"><span>H</span></li>
                                    <li data-value="j"><span>J</span></li>
                                    <li data-value="k"><span>K</span></li>
                                    <li data-value="l"><span>L</span></li>
                                </ul>
                                <ul class="row3">
                                    <li class="btn shift"><i class="shift"></i></li>
                                    <li data-value="z"><span>Z</span></li>
                                    <li data-value="x"><span>X</span></li>
                                    <li data-value="c"><span>C</span></li>
                                    <li data-value="v"><span>V</span></li>
                                    <li data-value="b"><span>B</span></li>
                                    <li data-value="n"><span>N</span></li>
                                    <li data-value="m"><span>M</span></li>
                                    <li class="btn delete"><i class="delete">×</i></li>
                                </ul>
                                <ul class="row4">
                                    <li class="btn numbers">.?123</li>
                                    <li class="btn space" data-value=" ">space</li>
                                    <li class="btn return">return</li>
                                </ul>
                            </div>
                        </div>

<div id="calendar" class="app">
                            <div class="top-bar">
                                <b>Calendars</b>
                                All Calendars
                                <i class="add">+</i>
                            </div>
                            <div class="header">
                                June 2013
                                <i class="next"></i>
                                <i class="previous"></i>
                            </div>
                            <table cellpadding="0" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Mon</th>
                                        <th>Tues</th>
                                        <th>Wed</th>
                                        <th>Thurs</th>
                                        <th>Fri</th>
                                        <th>Sat</th>
                                        <th>Sun</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="past">27</td>
                                        <td class="past">28</td>
                                        <td class="past">29</td>
                                        <td class="past">30</td>
                                        <td class="past">31</td>
                                        <td>1</td>
                                        <td>2</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>4</td>
                                        <td>5</td>
                                        <td>6</td>
                                        <td>7</td>
                                        <td>8</td>
                                        <td>9</td>
                                    </tr>
                                    <tr>
                                        <td class="current">10<i></i></td>
                                        <td>11</td>
                                        <td>12</td>
                                        <td>13</td>
                                        <td>14</td>
                                        <td>15</td>
                                        <td>16</td>
                                    </tr>
                                    <tr>
                                        <td>17</td>
                                        <td>18</td>
                                        <td>19</td>
                                        <td>20</td>
                                        <td>21</td>
                                        <td>22</td>
                                        <td>23</td>
                                    </tr>
                                    <tr>
                                        <td>24</td>
                                        <td>25</td>
                                        <td>26</td>
                                        <td>27</td>
                                        <td>28</td>
                                        <td>29</td>
                                        <td>30</td>
                                    </tr>
                                </tbody>
                            </table>
                            <ul class="events">
                                <li><i></i><span>all-day</span>Apple WWDC</li>
                                <li class="alt"><i class="work"></i><span>14:30</span>Catch-up with James<br /><em>Meeting room</em></li>
                                <li><i class="personal"></i><span>all-day</span>Mike's Birthday</li>
                            </ul>
                            <div class="bottom-bar">
                                <b>Today</b>
                                <ul>
                                    <li>List</li>
                                    <li>Day</li>
                                    <li class="active">Month</li>
                                </ul>
                                <i class="inbox"><b></b><em></em></i>
                            </div>
                        </div>

<div id="reminders" class="app">
                            <div class="top-bar">
                                <b>Lists</b>
                                Reminders
                                <i>Edit</i>
                            </div>
                            <h2>iCloud<i class="add">+</i></h2>
                            <ul>
                                <li><b></b><i></i>Apple WWDC<span>10/06/2013</span></li>
                                <li class="complete"><b><span></span></b><i></i>Buy more coffee<span>30/05/2013</span></li>
                            </ul>
                        </div>

<div id="mail" class="app">
                            <div class="top-bar">
                                <b>Mailboxes</b>
                                All Inboxes (1)
                                <i>Edit</i>
                            </div>
                            <ul>
                                <li><b></b><i></i><h3>Recombu</h3><h4>Compare Mobile Phones</h4><p class="date">Today</p><p>News, reviews, videos and impartial advice to help you get the best from your mobile...</p></li>
                                <li><i></i><h3>Apple</h3><h4>iPad. There's just so much to love about it.</h4><p class="date">Yesterday</p><p>When iPad was introduced, there was nothing quite like it. And there still isn't. Today...</p></li>
                            </ul>
                            <div class="bottom-bar">
                                <strong>Updated</strong> 29/05/2013 <strong>15:06</strong>
                                <b class="post"><em></em></b>
                            </div>
                        </div>

<div id="safari" class="app">
                            <div class="top-bar">
                                <span class="title">Compare Mobile Phones | Reviews, News & Deals | Recom...</span>
                                <input type="text" placeholder="Search or type URL" /><span class="reload"></span>
                            </div>
                            <iframe src="" width="312" height="534" scrolling="no" id="safari-iframe"></iframe>
                            <div class="bottom-bar">
                                <ul>
                                    <li><i class="previous"></i></li>
                                    <li><i class="next"></i></li>
                                    <li><i class="share"><b></b><em></em></i></li>
                                    <li><i class="bookmarks"><span><b></b><em></em></span></i></li>
                                    <li><i class="tabs"><b></b><em>1</em></i></li>
                                </ul>
                            </div>
                        </div>

<div id="music" class="app">
                            <div class="top-bar">
                                The Beatles<br />
                                <span class="title">Ob-La-Di, Ob-La-Da</span><br />
                                The White Album
                                <b>Back</b>
                                <i class="menu"><span class="bg"></span><span class="grid"></span></i>
                            </div>
                            <div class="progress">
                                <span class="track">4 of 30</span>
                                <div class="bar"><b>0:00</b><em>3:08</em></div>
                                <i class="repeat"><b></b></i>
                                <i class="genius"><b></b></i>
                                <i class="shuffle"><b></b><em></em></i>
                            </div>
                            <div class="album-cover"><b>The BEATLES</b></div>
                            <div class="controls">
                                <i class="play"></i>
                                <i class="fastforward"></i>
                                <i class="rewind"></i>
                                <div class="volume"></div>
                            </div>
                        </div>

<div id="phone" class="app">
                            <div class="number"></div>
                            <ul class="keypad">
                                <li data-value="1">1</li>
                                <li data-value="2">2<span>ABC</span></li>
                                <li data-value="3">3<span>DEF</span></li>
                                <li data-value="4">4<span>GHI</span></li>
                                <li data-value="5">5<span>JKL</span></li>
                                <li data-value="6">6<span>MNO</span></li>
                                <li data-value="7">7<span>PQRS</span></li>
                                <li data-value="8">8<span>TUV</span></li>
                                <li data-value="9">9<span>WXYZ</span></li>
                                <li data-value="*">*</li>
                                <li data-value="0">0<span>+</span></li>
                                <li data-value="#">#</li>
                            </ul>
                            <i class="contacts phone-app"><span>+</span><em></em><b></b></i>
                            <i class="delete">×</i>
                            <b class="call"><i class="icon phone"><b></b></i>Call</b>
                            <div class="bottom-bar">
                                <ul>
                                    <li class="star"><i class="star"></i>Favourites</li>
                                    <li><i class="recents"></i>Recents</li>
                                    <li><i class="contacts"><em></em><b></b></i>Contacts</li>
                                    <li class="active"><div class="keypad"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>Keypad</li>
                                    <li><i class="voicemail"><b></b></i>Voicemail</li>
                                </ul>
                            </div>
                        </div>

<div id="notes" class="app">
                            <div class="top-bar">
                                <b>Notes</b>
                                Notes
                                <i class="add">+</i>
                            </div>
                            <textarea>iPhone 5S and iOS7 concept with no images.

Created by Steve King (@sjkdesigns) at recombu.com

Previous
Share
Delete
Next

Options

Please enable your webcam to use the camera app.

(This feature will currently only work in Firefox or Chrome)

Recombu

100%

Wi-Fi
Bluetooth
Location Services
Airplane Mode

Messages

Did you know that this iPhone 5S concept has been built using only HTML, CSS & JavaScript, without a single image?

CloseView

Photos

Videos

Clock

Stocks

Settings

rRecombu Facebook Twitter g+Google+

Safari

Ringer

div>

Select colour:
Black
White
Red
Blue
Pink
Gold

body {
  background:#e5e5e5 url(/mobile/1.7/img/bg-main.png) top center fixed repeat-y;
  font-family:Arial, Sans-Serif;
  font-size:14px;
  font-weight:400;
  color:#111;
  padding-top:27px
}
a {
  color:#36c;
  outline:0;
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
.clearleft {
  clear:left
}
.clearright {
  clear:right
}
.clearboth {
  clear:both
}
.fright {
  float:right;
  margin:0 0 15px 15px
}
.fleft {
  float:left;
  margin:0 15px 15px 0
}
.wrapper {
  width:990px;
  margin:0 auto
}
.article-body ul, .article-body ol {
  margin:0 0 15px
}
.article-body ul li {
  list-style:disc outside;
  margin:0 0 0 25px;
  line-height:22px
}
.article-body ol li {
  list-style:decimal outside;
  margin:0 0 0 25px;
  line-height:22px
}
.article-body img.fullwidth {
  border:5px solid #fff;
  box-shadow:0 0 5px #aaa
}
.article-body p.intro {
  font-family:'Open Sans', Arial;
  font-size:18px;
  line-height:24px
}
.article-body .pull-quote {
  width:33%;
  font-size:18px;
  line-height:24px;
  font-family:'Open Sans', arial;
  display:block
}
.article-body .pull-quote.left {
  float:left;
  border-right:4px solid #ddd;
  padding:2px 12px 2px 0;
  margin:5px 15px 15px 0
}
.article-body .pull-quote.right {
  float:right;
  border-left:4px solid #ddd;
  padding:2px 0 2px 12px;
  margin:5px 0 15px 15px
}
.article-body table {
  width:100%;
  margin-bottom:20px
}
.article-body table th, .article-body table td {
  padding:7px 10px;
  border:1px solid #ccc
}
.article-body table th {
  background:#eee;
  font-weight:700
}
.article-body table tr:nth-child(even) {
  background:#f7f7f7
}
.article-body figure {
  display:block;
  margin:0 0 20px;
  padding:0
}
.article-body figure img {
  margin:0;
  padding:0
}
.article-body figcaption {
  display:block;
  font-size:12px;
  font-style:italic;
  color:#666;
  padding:5px;
  border-bottom:1px solid #ddd
}
.article-body .fleft {
  float:left;
  margin:0 15px 15px 0
}
.article-body .fright {
  float:right;
  margin:0 0 15px 15px
}
#competition-article-banner, #competition-sidebar-banner {
  margin-bottom:20px;
  text-align:center
}
.switch-channel {
  background:url(/mobile/1.7/img/bg-switch.png) repeat-x;
  height:27px;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  font-size:11px;
  color:#eee;
  text-transform:uppercase
}
body.takeover.sides .switch-channel {
  width:1030px;
  left:50%;
  margin:0 0 0 -515px
}
.switch-channel ul {
  width:1040px;
  margin:0 auto
}
.switch-channel li {
  display:inline;
  float:left;
  height:27px
}
.switch-channel li.more {
  padding-right:10px;
  line-height:27px;
  color:#ddd;
  margin-left:24px;
  font-weight:700
}
.switch-channel li.first a {
  border-left:1px solid #666
}
.switch-channel li a {
  display:block;
  float:left;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  height:27px;
  line-height:27px;
  padding:0 12px;
  border-right:1px solid #666;
  color:#fff
}
.switch-channel li a:hover {
  background:#111;
  color:#fff
}
.switch-channel li.active a {
  background:#fff;
  color:#000
}
.switch-channel span.right {
  float:right;
  margin-right:24px;
  display:block;
  line-height:25px
}
.switch-channel span.right a {
  color:#fff
}
.switch-channel span.coming-soon {
  background:#888;
  color:#fff;
  font-size:8px;
  font-weight:700;
  padding:1px 2px;
  position:relative;
  top:-1px;
  margin-left:2px;
  text-transform:uppercase
}
.switch-channel li a:hover span.coming-soon {
  background:#666;
  color:#fff
}
#footer {
  width:1038px;
  background-color:#f7f7f7;
  clear:both;
  border-top:4px solid #666;
  margin:0 auto;
  padding:20px 0 0
}
#footer .left {
  width:680px;
  float:left;
  font-size:12px;
  margin-bottom:10px;
  margin-left:25px
}
#footer .left h5 {
  width:130px;
  font-size:14px;
  font-weight:700;
  float:left;
  margin-bottom:10px!important
}
#footer .left ul {
  float:left;
  margin:0 0 5px!important
}
#footer .left>ul {
  width:165px;
  height:220px
}
#footer .left ul li {
  margin-right:10px!important;
  margin-bottom:5px!important
}
#footer .right {
  float:right;
  width:195px;
  font-size:11px;
  margin-right:35px
}
#footer .right a.footer-logo {
  margin-bottom:10px;
  background:url(/mobile/1.7/img/sprite-core.png) 0 -273px no-repeat;
  width:255px;
  height:67px;
  display:inline-block;
  opacity:.85
}
#footer .right a.footer-logo:hover {
  opacity:1
}
#footer .right ul {
  float:left;
  margin-right:25px
}
#footer .right ul li {
  line-height:12px!important;
  margin-bottom:5px!important
}
#footer .bottom {
  clear:both;
  margin-top:20px
}
#footer .bottom .copyright {
  color:#666;
  height:auto;
  border-top:1px solid #ccc;
  font-size:11px;
  margin:0 25px;
  padding:5px 0
}
#footer .bottom .copyright span {
  display:inline
}
#footer a {
  color:#666
}
#footer .left ul.follow-us li span {
  display:inline-block;
  height:25px;
  width:25px;
  background-image:url(/mobile/1.7/img/sprite-icons.png);
  background-repeat:no-repeat;
  vertical-align:-13px;
  margin-right:5px!important;
  margin-bottom:5px!important
}
#footer .left ul.follow-us li a.google-plus span {
  background-position:-59px -789px
}
#footer .left ul.follow-us li a.youtube span {
  background-position:-117px -789px
}
#footer .left ul.follow-us li a.youtube:hover span {
  background-position:-117px -819px
}
#footer .left ul.follow-us li a.facebook span, article#full .share li.facebook span, article#full .share-footer li.facebook span {
  background-position:-29px -789px
}
#footer .left ul.follow-us li a.facebook:hover span, article#full .share li.facebook:hover span, article#full .share-footer li.facebook:hover span {
  background-position:-29px -819px
}
#footer .left ul.follow-us li a.twitter span, article#full .share li.twitter span, article#full .share-footer li.twitter span {
  background-position:0 -789px
}
#footer .left ul.follow-us li a.twitter:hover span, article#full .share li.twitter:hover span, article#full .share-footer li.twitter:hover span {
  background-position:0 -819px
}
#footer .left ul.follow-us li a.google-plus:hover span, article#full .share li.google-plus:hover .custom-google-plus span, article#full .share-footer li.google-plus:hover .custom-google-plus span {
  background-position:-59px -819px
}
p.backtotop {
  font-size:12px;
  text-align:left;
  padding:0 0 12px;
  clear:both
}
#header {
  height:118px
}
#header .leaderboard {
  width:728px;
  height:90px;
  float:right;
  margin:15px 0 0
}
#header .logo {
  float:left;
  width:252px;
  height:89px;
  margin:17px 0 0 0;
  background:url(/mobile/1.7/img/sprite-core.png) no-repeat;
  background-position:0 -345px;
  position:absolute;
  z-index:1001
}
#header .logo span {
  display:none
}
#header li.more {
  display:block;
  position:absolute;
  width:24px;
  height:24px;
  margin-top:81px;
  margin-left:227px;
  z-index:1002
}
#header li.more span {
  display:none
}
#header li.more a.more {
  display:block;
  position:absolute;
  width:19px;
  height:19px
}
#header li.more ul.dropdown {
  background:url(/mobile/1.7/img/sprite-core.png) no-repeat;
  background-position:0 -435px;
  font-size:12px;
  width:110px;
  position:absolute;
  z-index:1003;
  padding-top:25px;
  visibility:hidden;
  opacity:0;
  transition:opacity .1s ease-in, visibility .1s ease-in;
  -webkit-transition:opacity .1s ease-in, visibility .1s ease-in;
  -moz-transition:opacity .1s ease-in, visibility .1s ease-in
}
#header li.more ul.dropdown li a {
  display:block;
  margin:0 10px;
  border-bottom:1px solid #999;
  padding:5px 0;
  color:#fff;
  white-space:nowrap;
  text-decoration:none
}
#header li.more ul.dropdown li a:hover {
  text-decoration:underline
}
#header li.more ul.dropdown li:last-child a {
  border:0
}
#header li.more:hover ul.dropdown {
  opacity:1;
  visibility:visible;
  transition:opacity .1s ease-out, visibility .1s ease-out;
  -webkit-transition:opacity .1s ease-out, visibility .1s ease-out;
  -moz-transition:opacity .1s ease-out, visibility .1s ease-out
}
@media only screen and(max-device-width:1280px) {
  #header li.more ul.dropdown {
    display:none
  }
  #header li.more:hover ul.dropdown {
    display:block
  }
}
body.takeover {
  background:none #fff;
  padding-top:38px;
  overflow-x:hidden
}
body.takeover.sides {
  padding-top:27px
}
.takeover-top {
  width:1286px;
  height:110px;
  position:absolute;
  margin:-10px 0 0 -148px;
  z-index:100
}
.takeover-left {
  width:130px;
  height:690px;
  position:absolute;
  margin:100px 0 0 -148px;
  z-index:100
}
.takeover-right {
  width:130px;
  height:690px;
  position:absolute;
  margin:100px 0 0 1008px;
  z-index:100
}
.takeover-left.side, .takeover-right.side {
  position:fixed;
  margin-top:0;
  top:0;
  height:1080px
}
body.takeover #header .logo {
  margin-top:13px
}
body.takeover #header li.more {
  margin-top:77px
}
#header button {
  display:none
}
#nav {
  clear:both;
  height:44px;
  box-shadow:0 5px 10px -3px #999;
  margin:0 0 20px
}
#nav ul {
  height:40px;
  display:block
}
#nav ul li {
  display:block;
  border-top:4px solid #444;
  float:left;
  height:40px
}
#nav ul li a {
  display:block;
  border-right:1px solid #ccc;
  height:40px;
  line-height:40px;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  color:#000;
  text-align:center
}
#nav ul li a:hover {
  background-color:#e9e9e9
}
#nav ul li.home {
  border-top:4px solid #000;
  width:48px
}
#nav ul li.home a {
  border-left:1px solid #ccc;
  background-image:url(/mobile/1.6/img/sprite-icons.png);
  background-position:15px -439px;
  background-repeat:no-repeat
}
#nav ul li.home a span {
  display:none
}
#nav ul li.news {
  border-top:4px solid #3c83a5;
  width:96px
}
#nav ul li.videos {
  border-top:4px solid #6db1d4;
  width:90px
}
#nav ul li.reviews {
  border-top:4px solid #5b9ec0;
  width:104px
}
#nav ul li.compare {
  border-top:4px solid #9bca68;
  width:176px
}
#nav ul li.deals {
  border-top:4px solid #ec9d38;
  width:176px
}
#nav ul li.search {
  border-top:4px solid #616161;
  width:300px
}
#nav .caret {
  display:inline-block;
  width:0;
  height:0;
  text-indent:-99999px;
  vertical-align:middle;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #000;
  content:"\2193"
}
#nav .caret {
  margin:-4px 0 0 3px
}
#nav li.search input {
  float:left;
  margin:0;
  border-radius:0!important
}
#nav li.search .terms {
  border:0;
  height:30px;
  font-size:18px;
  font-family:Arial;
  width:245px;
  padding:5px 0 5px 10px;
  color:#000
}
#nav li.search .submit {
  background:#5b9ec0 url(/mobile/1.7/img/sprite-icons.png) no-repeat;
  background-position:-105px -439px;
  display:block;
  width:45px;
  height:40px;
  border:0;
  cursor:pointer!important
}
#nav li.search .submit:hover {
  background-color:#317496
}
#nav ul li.dropdown ul {
  display:none;
  position:absolute;
  margin:0 0 0 -1px;
  box-shadow:0 7px 10px -8px #000;
  border:1px solid #ccc;
  background:#fff;
  height:auto;
  z-index:9999
}
#nav ul li.dropdown ul li {
  display:block;
  float:none;
  border:0;
  border-bottom:1px solid #ccc
}
#nav ul li.dropdown ul li:last-child {
  border-bottom:0
}
#nav ul li.dropdown ul li a {
  display:block;
  border:0;
  float:none;
  text-align:left;
  padding:0 20px 0 15px;
  font-size:15px
}
#nav ul li.dropdown ul li .caret {
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:5px solid #ccc;
  margin-right:3px
}
#nav ul li.dropdown:hover ul {
  display:block
}
#skip {
  display:none
}
#fb-root {
  display:none
}
.wrap {
  width:990px;
  margin:55px auto;
  text-align:center;
  position:relative
}
.content {
  float:right;
  width:527px;
  margin:0 0 20px 0;
  background:#eee;
  box-shadow:inset 0 0 5px #bbb;
  border-radius:7px;
  padding:17px 19px 3px;
  font-size:12px
}
.content {
  text-align:left
}
.content h1 {
  font-size:29px;
  margin:0 0 3px
}
.content h2 {
  font-size:20px;
  font-weight:normal;
  color:#777;
  margin:0 0 12px
}
.content h3 {
  font-size:18px;
  margin:0 0 10px;
  clear:left
}
.content h3.appname {
  margin:0 0 5px
}
.content ul.list {
  list-style:disc outside;
  margin:0 0 10px 40px
}
.content ul.list li {
  margin:0 0 5px;
  line-height:18px
}
.content p {
  margin:0 0 12px;
  line-height:18px
}
.content p.indent {
  margin-left:69px
}
.content p.tip {
  background:#e6ffe6;
  border:1px solid #80b380;
  color:#080;
  padding:7px 10px;
  border-radius:5px;
  margin:0 0 12px;
  clear:left
}
.content .social {
  height:34px;
  border:1px dotted #ccc;
  border-left:0;
  border-right:0;
  margin:0 0 15px
}
.content .social span {
  float:left;
  height:34px;
  line-height:34px;
  font-size:12px;
  font-weight:bold;
  margin:0 5px 0 0
}
.content .social .item {
  float:left;
  width:100px;
  margin-top:7px
}
.content .social .item.twitter-share {
  width:120px;
  overflow:hidden
}
.content .social .item.google-plus-share {
  width:120px
}
.content .icon {
  margin:0 12px 30px 0;
  overflow:hidden;
  text-align:center
}
.content .icon span.count {
  display:none!important
}
.content .app-info {
  display:none
}
.content .boxed {
  background:#fff;
  padding:15px 17px 5px;
  border:1px solid #ddd;
  border-radius:5px;
  box-shadow:0 0 5px #ddd;
  margin:0 0 15px;
  overflow:hidden
}
.content .instructions li {
  margin:0 0 10px
}
.content .instructions span.num {
  width:19px;
  height:19px;
  line-height:19px;
  background:#5a9ec0;
  text-align:center;
  border-radius:100%;
  font-size:13px;
  color:#fff;
  float:left;
  margin:-1px 7px 5px 0
}
.content .ios7 {
  position:relative;
  text-align:center;
  float:right;
  width:100px;
  height:100px;
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  transform:scale(0.5);
  margin:-10px 70px 55px 0
}
.content .ios7 span {
  top:0;
  left:0
}
.content .ios7 b {
  top:0;
  left:56px
}
.content .ios7 em {
  top:0
}
.content .ios7 em:before {
  top:0;
  left:0
}
.content .ios7 i {
  top:0
}
.content .ios7 i:after {
  top:0;
  left:0
}
.content .concepts {
  padding-bottom:10px
}
.content .concepts .icons-row {
  margin-left:-5px
}
.content .concepts .icon {
  -webkit-transform:scale(0.75);
  -moz-transform:scale(0.75);
  transform:scale(0.75);
  margin:-7px 0 0 -1px;
  box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
  cursor:default!important
}
.content .concepts .icon.music {
  margin-right:-7px
}
.content .concepts .icon b, .concepts .icon i, .concepts .icon span {
  cursor:default!important
}
.content .alert {
  background:#fee;
  border:1px solid #c33;
  padding:10px 12px;
  color:#c33;
  margin:0 0 15px;
  border-radius:5px;
  font-size:12px
}
#foot {
  text-align:left;
  clear:both
}
#foot .left-col {
  float:left;
  width:670px;
  margin:0 20px 20px 0
}
#foot .right-col {
  float:left;
  width:300px;
  margin:0 0 20px
}
#foot .right-col h3 {
  background:#eee;
  border-top:4px solid #5a9ec0;
  height:36px;
  line-height:36px;
  margin:0;
  padding:0 12px
}
.side-stories {
  margin-bottom:15px;
  line-height:17px
}
.side-stories a {
  display:block;
  border-bottom:1px solid #ddd;
  min-height:52px;
  padding-bottom:12px;
  color:#111;
  text-decoration:none;
  font-weight:700;
  margin:12px 0 0;
  font-size:14px
}
.side-stories a span.photo {
  display:block;
  width:80px;
  height:50px;
  overflow:hidden;
  float:left;
  margin:0 10px 12px 0
}
.side-stories a:hover {
  text-decoration:underline
}
.side-stories a:hover span.photo img {
  opacity:.9;
  filter:alpha90
}
#disqus_thread {
  clear:both
}
.turn-on {
  display:block;
  background:#5a9ec0;
  padding:5px 0;
  width:110px;
  border-radius:3px;
  text-align:center;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  position:absolute;
  top:-42px;
  left:242px
}
.turn-on:before {
  content:"";
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:7px solid #5a9ec0;
  position:absolute;
  bottom:-7px;
  left:50px
}
@media only screen and(max-device-width :1024px) {
  body {
    width:1038px;
    background:#fff none
  }
  .switch-channel {
    width:1038px;
    top:0;
    left:0
  }
  .takeover-top, .takeover-left, .takeover-right {
    display:none
  }
  #footer {
    width:990px;
    background-color:#f7f7f7;
    clear:both;
    border-top:4px solid #666;
    margin:0 auto;
    padding:20px 0 0
  }
}
@media only screen and(max-height :700px) {
  .turn-on {
    left:232px
  }
}
}

Pop out