/* iPhone (2007) tribute - fixed 760px table layout, Lucida Grande era */
body { margin: 0; padding: 0; background: #fff url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) repeat-x; font: 11px/16px "Lucida Grande", Lucida, Verdana, Helvetica, Arial, sans-serif; color: #333; }
#wrap { width: 760px; margin: 0 auto; padding-bottom: 30px; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* global nav: brushed-metal bar */
#globalnav { background: #b9b9b9; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), color-stop(0.5, #d6d6d6), to(#a9a9a9)); background: linear-gradient(#f4f4f4, #d6d6d6 50%, #a9a9a9); border: 1px solid #8e8e8e; border-top: 0; }
td.nav { text-align: center; border-right: 1px solid #9a9a9a; height: 30px; }
td.nav a { display: block; line-height: 30px; color: #222; font-size: 11px; font-weight: bold; text-shadow: 0 1px 0 #eee; }
td.nav a:hover { background: #c8c8c8; text-decoration: none; }
td.nav.sel { background: #7a7a7a; }
td.nav.sel a { color: #fff; text-shadow: 0 -1px 0 #333; }
td.nav.last { border-right: 0; }

/* hero */
#hero { background: #000; background-image: linear-gradient(#2a2a2a, #000 70%); border: 1px solid #000; margin-top: 8px; }
td.herotext { padding: 28px 10px 24px 34px; color: #ccc; font-size: 13px; line-height: 19px; }
td.herotext h1 { margin: 0; font: normal 54px/54px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; letter-spacing: -1px; }
td.herotext h2 { margin: 4px 0 18px; font: normal 20px/24px "Lucida Grande", Helvetica, Arial, sans-serif; color: #8fb4de; }
td.herotext p { margin: 0 0 14px; }
td.herotext b { color: #fff; }
.price { color: #ddd; }
.price b { font-size: 18px; color: #fff; }
.small { font-size: 10px; color: #999; }
a.btn { display: inline-block; padding: 3px 16px 4px; border: 1px solid #1a3a6a; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; color: #fff; font-weight: bold; font-size: 11px; background: #3b78c4; background-image: linear-gradient(#8bb4e8, #3b78c4 50%, #1f56a8 51%, #4a8ae0); text-shadow: 0 -1px 0 #12376d; box-shadow: 0 1px 2px #000; }
a.btn:hover { text-decoration: none; background-image: linear-gradient(#a6c6ef, #4f88d0 50%, #2a63b8 51%, #5b97ea); }

/* the phone, in CSS */
td.phonecell { padding: 18px 0; background-image: radial-gradient(ellipse at 50% 100%, #3a4a62 0, #000 65%); }
.phone { position: relative; width: 190px; height: 372px; margin: 0 auto; background: #cfd0d2; background-image: linear-gradient(90deg, #8d8e91, #f3f3f4 18%, #d4d5d7 50%, #f3f3f4 82%, #8d8e91); border: 1px solid #555; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; box-shadow: 0 0 0 4px #111, 0 18px 30px #000; }
.phone:before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; bottom: 6px; background: #000; border-radius: 26px; }
.speaker { position: absolute; z-index: 3; top: 16px; left: 70px; width: 50px; height: 5px; background: #333; border-radius: 3px; box-shadow: inset 0 1px 1px #000; }
.screen { position: absolute; z-index: 2; left: 14px; top: 38px; width: 162px; height: 243px; background: #1b2d4a; background-image: linear-gradient(#5b86bd, #1b2d4a 85%); overflow: hidden; }
.screen:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)); }
.statusbar { position: relative; z-index: 2; height: 14px; background: #111; color: #fff; font: bold 8px/14px Helvetica, Arial, sans-serif; }
.carrier { float: left; padding-left: 4px; }
.clock { float: right; padding-right: 4px; }
.icons { position: relative; z-index: 2; padding: 10px 0 0 6px; overflow: hidden; }
.ic { float: left; width: 33px; height: 33px; margin: 0 6px 14px 0; border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 0 1px 2px #000; position: relative; border: 1px solid rgba(0,0,0,.5); }
.ic:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; border-radius: 7px 7px 20px 20px / 7px 7px 6px 6px; background: rgba(255,255,255,.35); }
.ic span { position: absolute; left: -6px; right: -6px; top: 36px; text-align: center; font: 7px/8px Helvetica, Arial, sans-serif; color: #fff; text-shadow: 0 1px 1px #000; white-space: nowrap; }
.i1 { background: #46c43e; } .i2 { background: #f4f4f4; } .i3 { background: #f2b53a; } .i4 { background: #7f8791; }
.i5 { background: #c8281e; } .i6 { background: #1a1a1a; } .i7 { background: #5cb85c; } .i8 { background: #3b8de0; }
.i9 { background: #222; } .i10 { background: #8d8d92; } .i11 { background: #f6e66a; } .i12 { background: #9ea4ae; }
.dock { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 48px; background: rgba(255,255,255,.18); border-top: 1px solid rgba(255,255,255,.3); padding: 7px 0 0 6px; }
.dock .ic { margin-bottom: 0; }
.dock .ic span { display: none; }
.d1 { background: #46c43e; } .d2 { background: #3c86e8; } .d3 { background: #4a9be0; } .d4 { background: #e8861e; }
.homebtn { position: absolute; z-index: 3; left: 78px; top: 307px; width: 34px; height: 34px; border-radius: 17px; background: #111; background-image: radial-gradient(circle at 50% 30%, #444, #111); border: 1px solid #555; }
.homebtn .sq { width: 12px; height: 12px; margin: 10px auto 0; border: 2px solid #aaa; border-radius: 3px; }

/* news strip */
#news { border: 1px solid #c4c4c4; border-top: 0; background: #f0f0f0; background-image: linear-gradient(#fafafa, #e4e4e4); }
td.newsitem { width: 33%; padding: 8px 12px; border-right: 1px solid #c8c8c8; vertical-align: top; font-size: 10px; }
td.newsitem.last { border-right: 0; }

/* sections */
.sectionhead h3 { margin: 22px 0 10px; padding: 0 0 6px; font: normal 18px "Lucida Grande", Helvetica, Arial, sans-serif; color: #444; border-bottom: 1px solid #ccc; }
td.feat { padding: 4px 14px 10px 0; }
td.feat.mid { padding-left: 14px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
td.feat:last-child { padding-left: 14px; padding-right: 0; }
td.feat h4 { margin: 0 0 6px; font: bold 14px "Lucida Grande", Helvetica, Arial, sans-serif; color: #1f56a8; }
td.feat p { margin: 0 0 9px; }

/* quote */
#quote { margin-top: 16px; background: #000; background-image: linear-gradient(#333, #000); border: 1px solid #000; }
#quote td { padding: 18px 30px; text-align: center; }
#quote .q { margin: 0 0 6px; font: italic 17px/23px Georgia, "Times New Roman", serif; color: #fff; }
#quote .who { margin: 0; font-size: 10px; color: #9ab; }

/* specs */
#specs td { padding: 6px 10px; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
#specs tr.odd td { background: #f3f6fa; }
#specs td.k { width: 150px; font-weight: bold; color: #555; text-align: right; padding-right: 16px; }

/* fine print */
#fine td { padding: 18px 0 0; }
#fine p { margin: 0 0 8px; }
.finer { font-size: 9px; line-height: 13px; color: #888; }

/* footer */
#footer { margin-top: 20px; border-top: 1px solid #bbb; background: #efefef; }
#footer td { padding: 7px 10px; font-size: 10px; }
.fr { text-align: right; color: #777; }
.copy { color: #777; border-top: 1px solid #ddd; }
.counter { font-family: "Courier New", Courier, monospace; background: #000; color: #0f0; padding: 1px 4px; letter-spacing: 1px; }