css-apple-nav
css-apple-nav copied to clipboard
Published
20 hours ago •
mattboldt
mattboldt
u can update now
<nav id="ac-globalnav" class="js no-touch svg no-ie7 no-ie8" role="navigation" aria-label="Global Navigation" data-hires="false" data-analytics-region="global nav" lang="en-US" dir="ltr" data-store-locale="us" data-store-api="/[storefront]/shop/bag/status" data-search-locale="en_US" data-search-api="/search-services/suggestions/">
<div class="ac-gn-content">
<ul class="ac-gn-header">
<li class="ac-gn-item ac-gn-menuicon"> <label class="ac-gn-menuicon-label" for="ac-gn-menustate" aria-hidden="true">
<span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-top">
<span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top"></span>
</span>
<span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom">
<span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom"></span>
</span>
</label>
<a href="#ac-gn-menustate" class="ac-gn-menuanchor ac-gn-menuanchor-open" id="ac-gn-menuanchor-open" data-analytics-click="prop3:t@Open Menu"> <span class="ac-gn-menuanchor-label">Open Menu</span> </a>
<a href="#" class="ac-gn-menuanchor ac-gn-menuanchor-close" id="ac-gn-menuanchor-close" data-analytics-click="prop3:t@Close Menu"> <span class="ac-gn-menuanchor-label">Close Menu</span> </a>
</li>
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus-small"> <span class="ac-gn-link-text">Apple</span> </a>
</li>
<li class="ac-gn-item ac-gn-bag ac-gn-bag-small" id="ac-gn-bag-small">
<a class="ac-gn-link ac-gn-link-bag" href="/us/shop/goto/bag" data-analytics-title="bag" data-analytics-click="prop3:t@Shopping Bag" aria-label="Shopping Bag" data-string-badge="Shopping Bag with Items" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="ac-gn-bagview-content"> <span class="ac-gn-link-text">Shopping Bag</span> <span class="ac-gn-bag-badge"></span> </a> <span class="ac-gn-bagview-caret ac-gn-bagview-caret-large"></span> </li>
</ul>
<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus"> <span class="ac-gn-link-text">Apple</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
<a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac" data-analytics-click="prop3:t@Mac"> <span class="ac-gn-link-text">Mac</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
<a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad" data-analytics-click="prop3:t@iPad"> <span class="ac-gn-link-text">iPad</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-iphone">
<a class="ac-gn-link ac-gn-link-iphone" href="/iphone/" data-analytics-title="iphone" data-analytics-click="prop3:t@iPhone"> <span class="ac-gn-link-text">iPhone</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-watch">
<a class="ac-gn-link ac-gn-link-watch" href="/watch/" data-analytics-title="watch" data-analytics-click="prop3:t@Watch"> <span class="ac-gn-link-text">Watch</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-tv">
<a class="ac-gn-link ac-gn-link-tv" href="/tv/" data-analytics-title="tv" data-analytics-click="prop3:t@TV"> <span class="ac-gn-link-text">TV</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-music">
<a class="ac-gn-link ac-gn-link-music" href="/music/" data-analytics-title="music" data-analytics-click="prop3:t@Music"> <span class="ac-gn-link-text">Music</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-support">
<a class="ac-gn-link ac-gn-link-support" href="https://support.apple.com/" data-analytics-title="support" data-analytics-click="prop3:t@Support"> <span class="ac-gn-link-text">Support</span> </a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-search" role="search">
<a class="ac-gn-link ac-gn-link-search" href="/us/search" data-analytics-title="search" data-analytics-click="prop3:t@Search apple.com" aria-label="Search apple.com" role="button" aria-haspopup="true"> <span class="ac-gn-search-placeholder" aria-hidden="true">Search apple.com</span> </a>
</li>
<li class="ac-gn-item ac-gn-bag" id="ac-gn-bag">
<a class="ac-gn-link ac-gn-link-bag" href="/us/shop/goto/bag" data-analytics-title="bag" data-analytics-click="prop3:t@Shopping Bag" aria-label="Shopping Bag" data-string-badge="Shopping Bag with Items" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="ac-gn-bagview-content"> <span class="ac-gn-link-text">Shopping Bag</span> <span class="ac-gn-bag-badge" aria-hidden="true"></span> </a> <span class="ac-gn-bagview-caret ac-gn-bagview-caret-large"></span> </li>
</ul>
<aside id="ac-gn-searchview" class="ac-gn-searchview" role="search" data-analytics-region="search">
<div class="ac-gn-searchview-content">
<form id="ac-gn-searchform" class="ac-gn-searchform" action="/us/search" method="get">
<div class="ac-gn-searchform-wrapper"> <input id="ac-gn-searchform-input" class="ac-gn-searchform-input" type="text" aria-label="Search apple.com" placeholder="Search apple.com" data-placeholder-long="Search for Products, Stores, and Help" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false"> <input id="ac-gn-searchform-src" type="hidden" name="src" value="globalnav"> <button id="ac-gn-searchform-submit" class="ac-gn-searchform-submit" type="submit" disabled="" aria-label="Submit"></button> <button id="ac-gn-searchform-reset" class="ac-gn-searchform-reset" type="reset" disabled="" aria-label="Clear Search"></button> </div>
</form>
<aside id="ac-gn-searchresults" class="ac-gn-searchresults" data-string-quicklinks="Quick Links" data-string-suggestions="Suggested Searches" data-string-noresults="Hit enter to search."></aside>
</div> <button id="ac-gn-searchview-close" class="ac-gn-searchview-close" aria-label="Close Search">
<span class="ac-gn-searchview-close-wrapper">
<span class="ac-gn-searchview-close-left"></span>
<span class="ac-gn-searchview-close-right"></span>
</span>
</button> </aside>
<aside class="ac-gn-bagview" data-analytics-region="bag">
<div class="ac-gn-bagview-scrim"> <span class="ac-gn-bagview-caret ac-gn-bagview-caret-small"></span> </div>
<div class="ac-gn-bagview-content" id="ac-gn-bagview-content"> </div>
</aside>
</div>
</nav>
#ac-gn-viewport-emitter {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
visibility: hidden;
z-index: -1;
x-content: "large"
}
#ac-gn-viewport-emitter::before {
content: "large"
}
@media only screen and (max-width: 1023px) {
#ac-gn-viewport-emitter {
x-content: "medium"
}
#ac-gn-viewport-emitter::before {
content: "medium"
}
}
@media only screen and (max-width: 767px) {
#ac-gn-viewport-emitter {
x-content: "small"
}
#ac-gn-viewport-emitter::before {
content: "small"
}
}
@media only screen and (max-width: 419px) {
#ac-gn-viewport-emitter {
x-content: "xsmall"
}
#ac-gn-viewport-emitter::before {
content: "xsmall"
}
}
html, body {
margin: 0;
padding: 0
}
#ac-globalnav, #ac-gn-segmentbar {
font-weight: normal;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%
}
#ac-globalnav, #ac-globalnav:before, #ac-globalnav:after, #ac-globalnav * ,
#ac-globalnav * :before, #ac-globalnav * :after, #ac-gn-segmentbar,
#ac-gn-segmentbar:before, #ac-gn-segmentbar:after, #ac-gn-segmentbar * ,
#ac-gn-segmentbar * :before, #ac-gn-segmentbar * :after {
box-sizing: content-box;
margin: 0;
padding: 0;
pointer-events: auto;
letter-spacing: normal
}
#ac-globalnav * , #ac-globalnav * :before, #ac-globalnav * :after, #ac-gn-segmentbar * ,
#ac-gn-segmentbar * :before, #ac-gn-segmentbar * :after {
font-size: 1em;
font-family: inherit;
* font-family: expression(this.parentNode.currentStyle['font-family']);
font-weight: inherit;
* font-weight: expression(this.parentNode.currentStyle['font-weight']);
line-height: inherit;
* line-height: expression(this.parentNode.currentStyle['line-height']);
text-align: inherit;
* text-align: expression(this.parentNode.currentStyle['text-align'])
}
#ac-globalnav article, #ac-globalnav aside, #ac-globalnav details,
#ac-globalnav figcaption, #ac-globalnav figure, #ac-globalnav footer,
#ac-globalnav header, #ac-globalnav nav, #ac-globalnav section, #ac-gn-segmentbar article,
#ac-gn-segmentbar aside, #ac-gn-segmentbar details, #ac-gn-segmentbar figcaption,
#ac-gn-segmentbar figure, #ac-gn-segmentbar footer, #ac-gn-segmentbar header,
#ac-gn-segmentbar nav, #ac-gn-segmentbar section {
display: block
}
#ac-globalnav img, #ac-gn-segmentbar img {
border: 0;
vertical-align: middle
}
#ac-globalnav ul, #ac-gn-segmentbar ul {
list-style: none
}
#ac-globalnav, #ac-globalnav input, #ac-globalnav textarea, #ac-globalnav select,
#ac-globalnav button, #ac-gn-segmentbar, #ac-gn-segmentbar input,
#ac-gn-segmentbar textarea, #ac-gn-segmentbar select, #ac-gn-segmentbar button {
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: 'liga', 'kern';
direction: ltr;
text-align: left
}
#ac-globalnav, #ac-globalnav select, #ac-globalnav button, #ac-gn-segmentbar,
#ac-gn-segmentbar select, #ac-gn-segmentbar button {
font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}
#ac-globalnav input, #ac-globalnav textarea, #ac-gn-segmentbar input,
#ac-gn-segmentbar textarea {
font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}
#ac-globalnav {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 9999;
display: block;
margin: 0;
width: 100%;
min-width: 1024px;
height: 48px;
max-height: 44px;
background: #333;
background: rgba(0, 0, 0, 0.8);
font-size: 18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px)
}
.ac-theme-dark #ac-globalnav {
background: #2b2b2b;
background: rgba(85, 85, 85, 0.5)
}
#ac-globalnav.blocktransitions, #ac-globalnav.blocktransitions:before,
#ac-globalnav.blocktransitions:after, #ac-globalnav.blocktransitions * ,
#ac-globalnav.blocktransitions * :before, #ac-globalnav.blocktransitions * :after {
-webkit-animation: none !important;
animation: none !important;
-webkit-transition: none !important;
transition: none !important
}
@media only screen and (max-width: 1044px) {
#ac-globalnav {
min-width: 320px
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav {
max-height: none;
-webkit-transition: background 0.35s linear, height 0.35s ease-in;
transition: background 0.35s linear, height 0.35s ease-in
}
#ac-gn-menustate:checked ~ #ac-globalnav, #ac-gn-menustate:target ~ #ac-globalnav {
height: 100%;
background: #000;
-webkit-transition: background 0.35s linear, height 0.35s ease-in 200ms;
transition: background 0.35s linear, height 0.35s ease-in 200ms
}
#ac-globalnav.searchshow, #ac-globalnav.searchopen, #ac-globalnav.searchhide {
position: fixed
}
}
#ac-gn-menustate {
display: none
}
#ac-gn-placeholder {
height: 44px
}
@media only screen and (max-width: 767px) {
#ac-gn-placeholder {
height: 48px
}
}
.ac-nav-overlap #ac-gn-placeholder {
display: none
}
@-webkit-keyframes ac-gn-curtain-show {
0% {
opacity: 0;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1
}
}
@keyframes ac-gn-curtain-show {
0% {
opacity: 0;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1
}
}
#ac-gn-curtain {
background: rgba(0, 0, 0, 0.2);
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998
}
@media only screen and (max-width: 419px) {
#ac-globalnav.with-bagview ~ #ac-gn-curtain {
display: block;
-webkit-animation: ac-gn-curtain-show 200ms both;
animation: ac-gn-curtain-show 200ms both
}
}
#ac-globalnav.searchshow ~ #ac-gn-curtain, #ac-globalnav.searchopen ~ #ac-gn-curtain,
#ac-globalnav.searchhide ~ #ac-gn-curtain {
display: block
}
@media only screen and (max-width: 767px) {
#ac-globalnav.searchshow ~ #ac-gn-curtain, #ac-globalnav.searchopen ~ #ac-gn-curtain,
#ac-globalnav.searchhide ~ #ac-gn-curtain {
display: none
}
}
#ac-globalnav.searchshow ~ #ac-gn-curtain {
-webkit-animation: ac-gn-curtain-show 200ms both;
animation: ac-gn-curtain-show 200ms both
}
#ac-globalnav.searchhide ~ #ac-gn-curtain {
-webkit-animation: ac-gn-curtain-show 200ms reverse both;
animation: ac-gn-curtain-show 200ms reverse both
}
#ac-globalnav .ac-gn-content {
margin: 0 auto;
max-width: 980px;
padding: 0 22px;
position: relative;
z-index: 2
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-content {
padding: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%
}
}
@-webkit-keyframes ac-gn-apple-searchshow {
0% {
-webkit-transform: none;
transform: none;
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@keyframes ac-gn-apple-searchshow {
0% {
-webkit-transform: none;
transform: none;
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
}
@-webkit-keyframes ac-gn-apple-searchhide {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: none;
transform: none
}
}
@keyframes ac-gn-apple-searchhide {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: none;
transform: none
}
}
#ac-globalnav .ac-gn-header {
display: none;
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 48px;
overflow: hidden
}
#ac-globalnav .ac-gn-header .ac-gn-apple {
position: absolute;
width: 48px;
top: 0;
left: 50%;
margin-left: -24px;
text-align: center;
z-index: 1
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-header {
display: block
}
#ac-globalnav.searchshow .ac-gn-header, #ac-globalnav.searchopen .ac-gn-header,
#ac-globalnav.searchhide .ac-gn-header {
background: #000;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
#ac-globalnav .ac-gn-header .ac-gn-apple {
display: block
}
#ac-globalnav.searchshow .ac-gn-header .ac-gn-apple {
-webkit-animation: ac-gn-apple-searchshow 600ms 200ms both;
animation: ac-gn-apple-searchshow 600ms 200ms both
}
#ac-globalnav.searchopen .ac-gn-header .ac-gn-apple {
display: none
}
#ac-globalnav.searchhide .ac-gn-header .ac-gn-apple {
-webkit-animation: ac-gn-apple-searchhide 600ms 200ms both;
animation: ac-gn-apple-searchhide 600ms 200ms both
}
#ac-globalnav .ac-gn-header .ac-gn-bag-small {
display: block
}
}
@-webkit-keyframes ac-gn-list-searchshow {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(-100%) translateY(106px);
transform: translateY(-100%) translateY(106px)
}
}
@keyframes ac-gn-list-searchshow {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(-100%) translateY(106px);
transform: translateY(-100%) translateY(106px)
}
}
#ac-globalnav .ac-gn-list {
cursor: default;
margin: 0 -10px;
width: auto;
height: 44px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
#ac-globalnav .ac-gn-list:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-list {
position: absolute;
z-index: 2;
top: 48px;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0 48px;
height: auto;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
visibility: hidden;
-webkit-transition: visibility 0s linear 1s;
transition: visibility 0s linear 1s
}
#ac-globalnav .ac-gn-list :nth-child(2) {
margin-top: 12px
}
#ac-globalnav .ac-gn-list :nth-child(9) {
margin-bottom: 48px
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-list, #ac-gn-menustate:target ~ #ac-globalnav .ac-gn-list {
visibility: visible;
-webkit-transition-delay: 0s;
transition-delay: 0s
}
#ac-globalnav.searchshow .ac-gn-list {
bottom: auto;
-webkit-animation: ac-gn-list-searchshow 800ms both;
animation: ac-gn-list-searchshow 800ms both
}
#ac-globalnav.searchopen .ac-gn-list {
display: none
}
#ac-globalnav.searchhide .ac-gn-list {
bottom: auto;
-webkit-animation: ac-gn-list-searchshow 800ms reverse both;
animation: ac-gn-list-searchshow 800ms reverse both
}
#ac-globalnav .ac-gn-list:after {
display: none
}
}
@-webkit-keyframes ac-gn-item-searchshow {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1);
animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1)
}
40% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7)
}
}
@keyframes ac-gn-item-searchshow {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1);
animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1)
}
40% {
opacity: 1
}
100% {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7)
}
}
@-webkit-keyframes ac-gn-item-searchhide {
0% {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7)
}
60% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1);
animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1)
}
}
@keyframes ac-gn-item-searchhide {
0% {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7)
}
60% {
opacity: 1
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1);
animation-timing-function: cubic-bezier(0.2727, 0.0986, 0.8333, 1)
}
}
@-webkit-keyframes ac-gn-item-searchshow-small {
0% {
-webkit-transform: none;
transform: none;
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px)
}
}
@keyframes ac-gn-item-searchshow-small {
0% {
-webkit-transform: none;
transform: none;
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px)
}
}
@-webkit-keyframes ac-gn-search-placeholder-searchshow {
0% {
opacity: 1;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0.4
}
}
@keyframes ac-gn-search-placeholder-searchshow {
0% {
opacity: 1;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0.4
}
}
@-webkit-keyframes ac-gn-bag-searchshow {
0% {
opacity: 1;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0
}
}
@keyframes ac-gn-bag-searchshow {
0% {
opacity: 1;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0
}
}
#ac-globalnav .ac-gn-item {
display: inline-block;
position: relative;
height: 44px;
z-index: 1;
vertical-align: top
}
#ac-globalnav.ie7 .ac-gn-item {
display: inline;
zoom: 1
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-item {
width: 100%;
height: 48px
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-apple {
display: none
}
}
#ac-globalnav.searchshow .ac-gn-bag {
-webkit-animation: ac-gn-bag-searchshow 300ms both;
animation: ac-gn-bag-searchshow 300ms both;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
#ac-globalnav.searchopen .ac-gn-bag {
visibility: hidden
}
#ac-globalnav.searchhide .ac-gn-bag {
-webkit-animation: ac-gn-bag-searchshow 300ms reverse both;
animation: ac-gn-bag-searchshow 300ms reverse both;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bag {
right: 0;
display: none;
position: absolute;
top: 0;
width: auto;
z-index: 1
}
}
#ac-globalnav.searchshow .ac-gn-item-menu, #ac-globalnav.searchopen .ac-gn-item-menu,
#ac-globalnav.searchhide .ac-gn-item-menu {
pointer-events: none
}
#ac-globalnav.searchshow .ac-gn-item-menu {
-webkit-animation: ac-gn-item-searchshow 400ms both;
animation: ac-gn-item-searchshow 400ms both;
pointer-events: none
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(2) {
-webkit-animation-delay: 280ms;
animation-delay: 280ms
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(3) {
-webkit-animation-delay: 245ms;
animation-delay: 245ms
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(4) {
-webkit-animation-delay: 210ms;
animation-delay: 210ms
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(5) {
-webkit-animation-delay: 175ms;
animation-delay: 175ms
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(6) {
-webkit-animation-delay: 140ms;
animation-delay: 140ms
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(7) {
-webkit-animation-delay: 105ms;
animation-delay: 105ms
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(8) {
-webkit-animation-delay: 70ms;
animation-delay: 70ms
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(9) {
-webkit-animation-delay: 35ms;
animation-delay: 35ms
}
@media only screen and (max-width: 767px) {
#ac-globalnav.searchshow .ac-gn-item-menu {
-webkit-animation: ac-gn-item-searchshow-small 800ms both;
animation: ac-gn-item-searchshow-small 800ms both
}
#ac-globalnav.searchshow .ac-gn-item-menu:nth-child(n) {
-webkit-animation-delay: 0s;
animation-delay: 0s
}
}
#ac-globalnav.searchopen .ac-gn-item-menu {
visibility: hidden
}
#ac-globalnav.searchhide .ac-gn-item-menu {
-webkit-animation: ac-gn-item-searchhide 400ms both;
animation: ac-gn-item-searchhide 400ms both
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(2) {
-webkit-animation-delay: 0ms;
animation-delay: 0ms
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(3) {
-webkit-animation-delay: 35ms;
animation-delay: 35ms
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(4) {
-webkit-animation-delay: 70ms;
animation-delay: 70ms
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(5) {
-webkit-animation-delay: 105ms;
animation-delay: 105ms
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(6) {
-webkit-animation-delay: 140ms;
animation-delay: 140ms
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(7) {
-webkit-animation-delay: 175ms;
animation-delay: 175ms
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(8) {
-webkit-animation-delay: 210ms;
animation-delay: 210ms
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(9) {
-webkit-animation-delay: 245ms;
animation-delay: 245ms
}
@media only screen and (max-width: 767px) {
#ac-globalnav.searchhide .ac-gn-item-menu {
-webkit-animation: ac-gn-item-searchshow-small 800ms reverse both;
animation: ac-gn-item-searchshow-small 800ms reverse both
}
#ac-globalnav.searchhide .ac-gn-item-menu:nth-child(n) {
-webkit-animation-delay: 0s;
animation-delay: 0s
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-item-menu {
height: 47px;
border-bottom: 1px solid #333;
opacity: 0;
pointer-events: none;
-webkit-transform: scale(1.1) translateY(-24px);
transform: scale(1.1) translateY(-24px);
-webkit-transition: opacity 0.35s ease-out, -webkit-transform 0.35s ease-out;
transition: opacity 0.35s ease-out, -webkit-transform 0.35s ease-out;
transition: opacity 0.35s ease-out, transform 0.35s ease-out;
transition: opacity 0.35s ease-out, transform 0.35s ease-out, -webkit-transform 0.35s ease-out
}
#ac-globalnav .ac-gn-item-menu:nth-child(2) {
-webkit-transition-delay: 400ms, 400ms;
transition-delay: 400ms, 400ms
}
#ac-globalnav .ac-gn-item-menu:nth-child(3) {
-webkit-transition-delay: 350ms, 350ms;
transition-delay: 350ms, 350ms
}
#ac-globalnav .ac-gn-item-menu:nth-child(4) {
-webkit-transition-delay: 300ms, 300ms;
transition-delay: 300ms, 300ms
}
#ac-globalnav .ac-gn-item-menu:nth-child(5) {
-webkit-transition-delay: 250ms, 250ms;
transition-delay: 250ms, 250ms
}
#ac-globalnav .ac-gn-item-menu:nth-child(6) {
-webkit-transition-delay: 200ms, 200ms;
transition-delay: 200ms, 200ms
}
#ac-globalnav .ac-gn-item-menu:nth-child(7) {
-webkit-transition-delay: 150ms, 150ms;
transition-delay: 150ms, 150ms
}
#ac-globalnav .ac-gn-item-menu:nth-child(8) {
-webkit-transition-delay: 100ms, 100ms;
transition-delay: 100ms, 100ms
}
#ac-globalnav .ac-gn-item-menu:nth-child(9) {
-webkit-transition-delay: 50ms, 50ms;
transition-delay: 50ms, 50ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu, #ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu {
opacity: 1;
pointer-events: auto;
-webkit-transform: none;
transform: none
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(2),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(2) {
-webkit-transition-delay: 300ms, 300ms;
transition-delay: 300ms, 300ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(3),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(3) {
-webkit-transition-delay: 350ms, 350ms;
transition-delay: 350ms, 350ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(4),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(4) {
-webkit-transition-delay: 400ms, 400ms;
transition-delay: 400ms, 400ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(5),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(5) {
-webkit-transition-delay: 450ms, 450ms;
transition-delay: 450ms, 450ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(6),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(6) {
-webkit-transition-delay: 500ms, 500ms;
transition-delay: 500ms, 500ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(7),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(7) {
-webkit-transition-delay: 550ms, 550ms;
transition-delay: 550ms, 550ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(8),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(8) {
-webkit-transition-delay: 600ms, 600ms;
transition-delay: 600ms, 600ms
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-item-menu:nth-child(9),
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-item-menu:nth-child(9) {
-webkit-transition-delay: 650ms, 650ms;
transition-delay: 650ms, 650ms
}
}
#ac-globalnav .ac-gn-search-placeholder {
display: none
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-search {
border-bottom-color: silver
}
#ac-globalnav.searchshow .ac-gn-search, #ac-globalnav.searchopen .ac-gn-search,
#ac-globalnav.searchhide .ac-gn-search {
-webkit-animation: none;
animation: none
}
#ac-globalnav .ac-gn-search-placeholder {
margin-left: 28px;
cursor: text;
display: block
}
#ac-globalnav.searchshow .ac-gn-search-placeholder {
-webkit-animation: ac-gn-search-placeholder-searchshow 800ms both;
animation: ac-gn-search-placeholder-searchshow 800ms both
}
#ac-globalnav.searchhide .ac-gn-search-placeholder {
-webkit-animation: ac-gn-search-placeholder-searchshow 800ms reverse both;
animation: ac-gn-search-placeholder-searchshow 800ms reverse both
}
}
#ac-globalnav .ac-gn-link {
font-size: 16px;
line-height: 2.75;
font-weight: 400;
letter-spacing: normal;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=100);
color: #fff;
position: relative;
z-index: 1;
display: inline-block;
padding: 0 10px;
height: 44px;
background: no-repeat;
text-decoration: none;
white-space: nowrap;
-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-tap-highlight-color: transparent;
outline-offset: -7px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link {
font-size: 20px;
line-height: 2.35;
font-weight: 300;
letter-spacing: normal
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link {
height: 48px
}
}
#ac-globalnav.no-js .ac-gn-link:hover {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav.no-touch .ac-gn-link:hover {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-search {
cursor: default
}
#ac-globalnav.no-js .ac-gn-link-search:hover {
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=100)
}
#ac-globalnav.no-touch .ac-gn-link-search:hover {
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=100)
}
}
#ac-globalnav .ac-gn-link-text {
position: absolute;
top: 0;
left: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0;
left: auto
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-bag {
padding: 0 16px;
-webkit-transition: -webkit-transform 0.25s 0.55s ease-out;
transition: -webkit-transform 0.25s 0.55s ease-out;
transition: transform 0.25s 0.55s ease-out;
transition: transform 0.25s 0.55s ease-out, -webkit-transform 0.25s 0.55s ease-out
}
#ac-gn-menustate:checked ~ #ac-globalnav.js .ac-gn-link-bag, #ac-gn-menustate:target ~ #ac-globalnav.js .ac-gn-link-bag {
-webkit-transform: translateX(200%);
transform: translateX(200%);
-webkit-transition: -webkit-transform 0.55s 0.25s ease-out;
transition: -webkit-transform 0.55s 0.25s ease-out;
transition: transform 0.55s 0.25s ease-out;
transition: transform 0.55s 0.25s ease-out, -webkit-transform 0.55s 0.25s ease-out
}
}
#ac-globalnav .ac-gn-link-bag:focus:active {
outline: none
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-item-menu .ac-gn-link {
background-position: left center;
display: block;
outline-offset: 0;
padding: 0;
width: auto;
max-width: none
}
}
#ac-globalnav .ac-gn-link-apple {
background-repeat: no-repeat;
background-size: 20px 44px;
background-image: url("../images/ac-globalnav/globalnav/apple/image_large.svg");
background-position: center center;
width: 20px
}
#ac-globalnav.no-svg .ac-gn-link-apple {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-apple {
background-size: 21px 48px;
background-image: url("../images/ac-globalnav/globalnav/apple/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-apple {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/apple/image_small.png")
}
}
.ac-gn-current-apple #ac-globalnav .ac-gn-link-apple {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-mac {
background-repeat: no-repeat;
background-size: 31px 44px;
background-image: url("../images/ac-globalnav/globalnav/links/mac/image_large.svg");
background-position: center center;
background-origin: content-box;
background-size: cover;
width: 1.9375em;
max-width: 52.7px
}
#ac-globalnav.no-svg .ac-gn-link-mac {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/mac/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-mac {
background-size: 37px 48px;
background-image: url("../images/ac-globalnav/globalnav/links/mac/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-mac {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/mac/image_small.png")
}
}
.ac-gn-current-mac #ac-globalnav .ac-gn-link-mac {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-ipad {
background-repeat: no-repeat;
background-size: 30px 44px;
background-image: url("../images/ac-globalnav/globalnav/links/ipad/image_large.svg");
background-position: center center;
background-origin: content-box;
background-size: cover;
width: 1.875em;
max-width: 51px
}
#ac-globalnav.no-svg .ac-gn-link-ipad {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/ipad/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-ipad {
background-size: 35px 48px;
background-image: url("../images/ac-globalnav/globalnav/links/ipad/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-ipad {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/ipad/image_small.png")
}
}
.ac-gn-current-ipad #ac-globalnav .ac-gn-link-ipad {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-iphone {
background-repeat: no-repeat;
background-size: 48px 44px;
background-image: url("../images/ac-globalnav/globalnav/links/iphone/image_large.svg");
background-position: center center;
background-origin: content-box;
background-size: cover;
width: 3em;
max-width: 81.6px
}
#ac-globalnav.no-svg .ac-gn-link-iphone {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/iphone/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-iphone {
background-size: 59px 48px;
background-image: url("../images/ac-globalnav/globalnav/links/iphone/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-iphone {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/iphone/image_small.png")
}
}
.ac-gn-current-iphone #ac-globalnav .ac-gn-link-iphone {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-watch {
background-repeat: no-repeat;
background-size: 44px 44px;
background-image: url("../images/ac-globalnav/globalnav/links/watch/image_large.svg");
background-position: center center;
background-origin: content-box;
background-size: cover;
width: 2.75em;
max-width: 74.8px
}
#ac-globalnav.no-svg .ac-gn-link-watch {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/watch/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-watch {
background-size: 52px 48px;
background-image: url("../images/ac-globalnav/globalnav/links/watch/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-watch {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/watch/image_small.png")
}
}
.ac-gn-current-watch #ac-globalnav .ac-gn-link-watch {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-tv {
background-repeat: no-repeat;
background-size: 20px 44px;
background-image: url("../images/ac-globalnav/globalnav/links/tv/image_large.svg");
background-position: center center;
background-origin: content-box;
background-size: cover;
width: 1.25em;
max-width: 34px
}
#ac-globalnav.no-svg .ac-gn-link-tv {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/tv/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-tv {
background-size: 23px 48px;
background-image: url("../images/ac-globalnav/globalnav/links/tv/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-tv {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/tv/image_small.png")
}
}
.ac-gn-current-tv #ac-globalnav .ac-gn-link-tv {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-music {
background-repeat: no-repeat;
background-size: 40px 44px;
background-image: url("../images/ac-globalnav/globalnav/links/music/image_large.svg");
background-position: center center;
background-origin: content-box;
background-size: cover;
width: 2.5em;
max-width: 68px
}
#ac-globalnav.no-svg .ac-gn-link-music {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/music/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-music {
background-size: 48px 48px;
background-image: url("../images/ac-globalnav/globalnav/links/music/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-music {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/music/image_small.png")
}
}
.ac-gn-current-music #ac-globalnav .ac-gn-link-music {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-support {
background-repeat: no-repeat;
background-size: 57px 44px;
background-image: url("../images/ac-globalnav/globalnav/links/support/image_large.svg");
background-position: center center;
background-origin: content-box;
background-size: cover;
width: 3.5625em;
max-width: 96.9px
}
#ac-globalnav.no-svg .ac-gn-link-support {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/support/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-support {
background-size: 69px 49px;
background-image: url("../images/ac-globalnav/globalnav/links/support/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-support {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/links/support/image_small.png")
}
}
.ac-gn-current-support #ac-globalnav .ac-gn-link-support {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-search {
background-repeat: no-repeat;
background-size: 20px 44px;
background-image: url("../images/ac-globalnav/globalnav/search/image_large.svg");
background-position: center center;
width: 20px
}
#ac-globalnav.no-svg .ac-gn-link-search {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-search {
background-size: 22px 48px;
background-image: url("../images/ac-globalnav/globalnav/search/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-search {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/image_small.png")
}
}
.ac-gn-current-search #ac-globalnav .ac-gn-link-search {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link-bag {
background-repeat: no-repeat;
background-size: 18px 44px;
background-image: url("../images/ac-globalnav/globalnav/bag/image_large.svg");
background-position: center center;
width: 18px
}
#ac-globalnav.no-svg .ac-gn-link-bag {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-link-bag {
background-size: 19px 48px;
background-image: url("../images/ac-globalnav/globalnav/bag/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-link-bag {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/bag/image_small.png")
}
}
.ac-gn-current-bag #ac-globalnav .ac-gn-link-bag {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-link.current {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav .ac-gn-menuicon {
left: 0;
display: none;
position: absolute;
z-index: 2;
top: 0;
width: 48px;
border-bottom: none
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-menuicon {
display: block
}
}
#ac-globalnav .ac-gn-menuicon-label {
display: block;
position: absolute;
z-index: 3;
top: 0;
width: 48px;
height: 48px;
cursor: pointer;
-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-tap-highlight-color: transparent
}
#ac-globalnav .ac-gn-menuicon-label:hover, #ac-globalnav .ac-gn-menuicon-label:focus,
#ac-globalnav .ac-gn-menuicon-label:active {
opacity: .65
}
#ac-globalnav.touch .ac-gn-menuicon-label {
opacity: 1;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99)
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-label,
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-label {
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
#ac-globalnav .ac-gn-menuicon-bread {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 48px;
height: 48px;
-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
}
#ac-globalnav .ac-gn-menuicon-bread-top {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transform: rotate(0);
transform: rotate(0);
z-index: 4
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-top,
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-top {
-webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
#ac-globalnav .ac-gn-menuicon-bread-bottom {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transform: rotate(0);
transform: rotate(0)
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-bottom,
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-bottom {
-webkit-transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#ac-globalnav .ac-gn-menuicon-bread-crust {
display: block;
width: 17px;
height: 1px;
background: #fff;
position: absolute;
left: 16px;
z-index: 1;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s
}
#ac-globalnav .ac-gn-menuicon-bread-crust-top {
top: 23px;
-webkit-transition: -webkit-transform 0.2s 0.2s;
transition: -webkit-transform 0.2s 0.2s;
transition: transform 0.2s 0.2s;
transition: transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s;
-webkit-transform: translateY(-3px);
transform: translateY(-3px)
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-crust-top,
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-crust-top {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 0;
transition-delay: 0
}
#ac-globalnav .ac-gn-menuicon-bread-crust-bottom {
bottom: 23px;
-webkit-transform: translateY(3px);
transform: translateY(3px)
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuicon-bread-crust-bottom,
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuicon-bread-crust-bottom {
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
-webkit-transform: translateY(0);
transform: translateY(0)
}
#ac-globalnav .ac-gn-menuanchor {
left: 0;
color: #fff;
position: absolute;
top: 0;
width: 1px;
height: 1px;
z-index: 10
}
#ac-globalnav .ac-gn-menuanchor:focus {
outline-offset: -8px;
width: 48px;
height: 48px
}
#ac-globalnav .ac-gn-menuanchor-close {
display: none
}
#ac-globalnav .ac-gn-menuanchor-label {
position: absolute;
top: 0;
left: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuanchor-open,
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuanchor-open {
display: none
}
#ac-gn-menustate:checked ~ #ac-globalnav .ac-gn-menuanchor-close,
#ac-gn-menustate:target ~ #ac-globalnav .ac-gn-menuanchor-close {
display: block
}
#ac-globalnav .ac-gn-bag-badge {
border-radius: 6px;
margin-top: -3px;
margin-left: -3px;
width: 6px;
height: 6px;
background: #6bf;
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 1
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bag-badge {
border-radius: 9px;
margin-top: -4px;
margin-left: -4.5px;
width: 9px;
height: 9px
}
}
#ac-globalnav .ac-gn-bag.with-badge .ac-gn-bag-badge {
display: block
}
#ac-globalnav .ac-gn-bagview, #ac-globalnav .ac-gn-notification {
margin-right: -114px;
right: 0;
position: absolute;
top: 48px;
z-index: 1
}
@media only screen and (max-width: 1266px) {
#ac-globalnav .ac-gn-bagview, #ac-globalnav .ac-gn-notification {
margin-right: calc(512px - 50vw);
right: 5px
}
}
@media only screen and (max-width: 1024px) {
#ac-globalnav .ac-gn-bagview, #ac-globalnav .ac-gn-notification {
margin-right: 0
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview, #ac-globalnav .ac-gn-notification {
margin-right: 0;
top: 52px
}
}
#ac-globalnav .ac-gn-bagview-caret, #ac-globalnav .ac-gn-notification-caret {
overflow: hidden;
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 10px;
z-index: 1
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview-caret, #ac-globalnav .ac-gn-notification-caret {
bottom: 100%
}
}
@media only screen and (max-width: 419px) {
#ac-globalnav .ac-gn-bagview-caret, #ac-globalnav .ac-gn-notification-caret {
height: 9px;
margin-bottom: 0
}
}
#ac-globalnav .ac-gn-bagview-caret:after, #ac-globalnav .ac-gn-notification-caret:after {
left: 50%;
border: 1px solid;
content: "";
display: block;
position: absolute;
top: 0;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 0% 0;
transform-origin: 0% 0;
z-index: 1
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview-caret:after, #ac-globalnav .ac-gn-notification-caret:after {
left: auto;
right: 5px
}
}
#ac-globalnav .ac-gn-bagview {
font-size: 15px;
line-height: 1.73333;
font-weight: 400;
letter-spacing: normal;
background: #fff;
border: 1px solid #d6d6d6;
border-radius: 2px;
display: none;
width: 288px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview {
font-size: 16px;
line-height: 1.625;
font-weight: 400;
letter-spacing: normal
}
}
#ac-globalnav.with-bagview .ac-gn-bagview {
display: block
}
@media only screen and (max-width: 419px) {
#ac-globalnav .ac-gn-bagview {
border-radius: 0;
border-width: 0 0 1px 0;
top: 48px;
left: 0;
right: 0;
width: 100%
}
}
#ac-globalnav .ac-gn-bagview-content {
margin: 0 auto;
min-height: 90px;
padding: 0 20px;
position: relative;
z-index: 2
}
@media only screen and (max-width: 419px) {
#ac-globalnav .ac-gn-bagview-content {
padding: 0 48px
}
}
#ac-globalnav .ac-gn-bagview-caret {
display: none
}
#ac-globalnav.with-bagview .ac-gn-bagview-caret {
display: block
}
.with-bagview#ac-globalnav.ie7 .ac-gn-bagview-caret, .with-bagview#ac-globalnav.ie8 .ac-gn-bagview-caret {
display: none
}
#ac-globalnav.with-bagview .ac-gn-bagview-caret-small {
display: none
}
@media only screen and (max-width: 767px) {
#ac-globalnav.with-bagview .ac-gn-bagview-caret-small {
display: block
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav.with-bagview .ac-gn-bagview-caret-large {
display: none
}
}
#ac-globalnav .ac-gn-bagview-caret:after {
background: #fff;
border-color: #d6d6d6
}
@media only screen and (max-width: 419px) {
#ac-globalnav .ac-gn-bagview-caret:after {
right: 11px;
border-color: #fff
}
}
#ac-globalnav .ac-gn-bag {
z-index: 2
}
#ac-globalnav .ac-gn-bagview {
font-size: 15px;
line-height: 1.23333;
font-weight: 400;
letter-spacing: normal;
background: #fff
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview {
font-size: 16px;
line-height: 1.15625;
font-weight: 400;
letter-spacing: normal
}
}
#ac-globalnav .ac-gn-bagview-message {
color: #999;
line-height: 90px;
margin: 0;
text-align: center
}
#ac-globalnav .ac-gn-bagview-linemessage {
margin: 0;
color: #999;
font-size: 12px;
line-height: 1.33333;
font-weight: 400;
letter-spacing: normal;
text-align: center
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview-linemessage {
font-size: 12px;
line-height: 1.33333;
font-weight: 400;
letter-spacing: normal
}
}
#ac-globalnav .ac-gn-bagview-linemessage-text {
padding: 0 8px 0 8px;
background: #fff
}
#ac-globalnav .ac-gn-bagview-linemessage:before {
display: block;
position: relative;
top: 9px;
margin-top: -1px;
z-index: -10;
border-bottom: 1px solid #e3e3e3;
content: ""
}
@-webkit-keyframes loader {
from {
-webkit-transform: rotate(0deg) translateZ(0);
transform: rotate(0deg) translateZ(0)
}
to {
-webkit-transform: rotate(360deg) translateZ(0);
transform: rotate(360deg) translateZ(0)
}
}
@keyframes loader {
from {
-webkit-transform: rotate(0deg) translateZ(0);
transform: rotate(0deg) translateZ(0)
}
to {
-webkit-transform: rotate(360deg) translateZ(0);
transform: rotate(360deg) translateZ(0)
}
}
#ac-globalnav .ac-gn-bagview-loader {
background: no-repeat center / 40px url("../assets/ac-store/spinner.svg");
margin-top: -20px;
margin-left: -20px;
width: 40px;
height: 40px;
background: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/ac-store/spinner.gif") no-repeat\0;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
-webkit-animation: loader 1s linear infinite;
animation: loader 1s linear infinite
}
#ac-globalnav .ac-gn-bagview _:-ms-input-placeholder, :root #ac-globalnav .ac-gn-bagview-loader {
background: none, no-repeat center / 40px url("../assets/ac-store/spinner.svg")
}
#ac-globalnav .ac-gn-bagview-bag {
list-style: none
}
#ac-globalnav .ac-gn-bagview-bagitem {
border-bottom: 1px solid #e3e3e3
}
#ac-globalnav .ac-gn-bagview-bagitem-first {
padding-top: 8px
}
#ac-globalnav .ac-gn-bagview-bagitem-last {
border-bottom-style: none
}
#ac-globalnav .ac-gn-bagview-bagitem-link {
margin: 0;
padding: 0;
display: table;
width: 100%;
color: #333;
text-decoration: none
}
#ac-globalnav .ac-gn-bagview-bagitem-column1, #ac-globalnav .ac-gn-bagview-bagitem-column2 {
display: table-cell;
vertical-align: middle;
min-height: 56px
}
#ac-globalnav .ac-gn-bagview-bagitem-column1 {
padding: 15px 14px 15px 4px;
width: 25%
}
#ac-globalnav .ac-gn-bagview-bagitem-column2 {
padding: 15px 0;
width: 75%
}
#ac-globalnav .ac-gn-bagview-bagitem-picture {
max-width: 56px;
height: auto
}
#ac-globalnav .ac-gn-bagview-bagitem-qty {
font-size: 12px;
line-height: 1.33333;
font-weight: 400;
letter-spacing: normal;
color: #999
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview-bagitem-qty {
font-size: 12px;
line-height: 1.33333;
font-weight: 400;
letter-spacing: normal
}
}
#ac-globalnav .ac-gn-bagview-bagitem-qty:before {
content: "\2715";
font-size: 0.75em
}
#ac-globalnav .ac-gn-bagview-nav {
margin-bottom: 7px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-bagview-nav {
margin-bottom: 8px
}
}
#ac-globalnav .ac-gn-bagview-nav-list {
margin: 0;
padding: 0;
list-style: none
}
#ac-globalnav .ac-gn-bagview-nav-item {
margin: 0;
padding: 0;
border-top: 1px solid #e3e3e3
}
#ac-globalnav .ac-gn-bagview-nav-item:first-child {
border-top-style: none
}
#ac-globalnav .ac-gn-bagview-nav-nobtn {
border-top: 1px solid #e3e3e3
}
#ac-globalnav .ac-gn-bagview-nav-link {
color: #08c;
display: block;
line-height: 44px;
padding: 0 30px;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
#ac-globalnav .ac-gn-bagview-nav-link:hover {
text-decoration: underline
}
#ac-globalnav.touch .ac-gn-bagview-nav-link:hover {
text-decoration: none
}
#ac-globalnav .ac-gn-bagview-nav-link-bag {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/ac-store/bag.png");
background-image: none, url("../assets/ac-store/bag.svg");
background-position: left center;
background-repeat: no-repeat
}
#ac-globalnav .ac-gn-bagview-nav-link-view {
background-image: url("../assets/ac-store/view.png");
background-image: none, url("../assets/ac-store/view.svg");
background-position: left center;
background-repeat: no-repeat
}
#ac-globalnav .ac-gn-bagview-nav-link-favorites {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/ac-store/favorites.png");
background-image: none, url("../assets/ac-store/favorites.svg");
background-position: left center;
background-repeat: no-repeat
}
#ac-globalnav .ac-gn-bagview-nav-link-orders {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/ac-store/orders.png");
background-image: none, url("../assets/ac-store/orders.svg");
background-position: left center;
background-repeat: no-repeat
}
#ac-globalnav .ac-gn-bagview-nav-link-account {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/ac-store/account.png");
background-image: none, url("../assets/ac-store/account.svg");
background-position: left center;
background-repeat: no-repeat
}
#ac-globalnav .ac-gn-bagview-nav-link-signIn {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/ac-store/signIn.png");
background-image: none, url("../assets/ac-store/signIn.svg");
background-position: left center;
background-repeat: no-repeat
}
#ac-globalnav .ac-gn-bagview-nav-link-signOut {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/assets/ac-store/signIn.png");
background-image: none, url("../assets/ac-store/signIn.svg");
background-position: left center;
background-repeat: no-repeat
}
#ac-globalnav .ac-gn-bagview-nav-link-bag {
background-position: left 45%
}
#ac-globalnav .ac-gn-bagview-button {
font-size: 16px;
line-height: 2.00625;
font-weight: 500;
letter-spacing: normal;
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9);
border: 1px solid #07c;
border-radius: 4px;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 0 15px;
text-align: center;
text-shadow: 0 1px 1px rgba(28, 115, 184, 0.64);
white-space: nowrap;
font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}
#ac-globalnav.ie7 .ac-gn-bagview-button, #ac-globalnav.ie8 .ac-gn-bagview-button {
font-weight: normal;
font-family: "Myriad Set Pro 500", "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}
#ac-globalnav.ie7 .ac-gn-bagview-button {
display: inline;
zoom: 1
}
#ac-globalnav.ie7 .ac-gn-bagview-button {
vertical-align: middle
}
#ac-globalnav.no-js .ac-gn-bagview-button:hover {
background-color: #3392de;
background: -webkit-linear-gradient(#51a9ee, #147bcd);
background: linear-gradient(#51a9ee, #147bcd);
border-color: #1482d0;
text-decoration: none
}
#ac-globalnav.no-touch .ac-gn-bagview-button:hover {
background-color: #3392de;
background: -webkit-linear-gradient(#51a9ee, #147bcd);
background: linear-gradient(#51a9ee, #147bcd);
border-color: #1482d0;
text-decoration: none
}
#ac-globalnav .ac-gn-bagview-button:active {
background-color: #1f7ec9;
background: -webkit-linear-gradient(#3d94d9, #0067b9);
background: linear-gradient(#3d94d9, #0067b9);
border-color: #005fa3;
outline: none
}
#ac-globalnav.no-js .ac-gn-bagview-button:active:hover {
background-color: #1f7ec9;
background: -webkit-linear-gradient(#3d94d9, #0067b9);
background: linear-gradient(#3d94d9, #0067b9);
border-color: #006dbc
}
#ac-globalnav.no-touch .ac-gn-bagview-button:active:hover {
background-color: #1f7ec9;
background: -webkit-linear-gradient(#3d94d9, #0067b9);
background: linear-gradient(#3d94d9, #0067b9);
border-color: #006dbc
}
#ac-globalnav .ac-gn-bagview-button:disabled, #ac-globalnav .ac-gn-bagview-button.disabled {
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9);
color: #fff;
cursor: default;
opacity: 0.3
}
#ac-globalnav.ie7 .ac-gn-bagview-button:disabled, #ac-globalnav.ie8 .ac-gn-bagview-button:disabled,
#ac-globalnav.ie7 .ac-gn-bagview-button.disabled, #ac-globalnav.ie8 .ac-gn-bagview-button.disabled {
background-color: #bcdcf4
}
#ac-globalnav.no-js .ac-gn-bagview-button:disabled:hover, #ac-globalnav.no-js .ac-gn-bagview-button.disabled:hover {
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9)
}
.no-js#ac-globalnav.ie7 .ac-gn-bagview-button:disabled:hover,
.no-js#ac-globalnav.ie8 .ac-gn-bagview-button:disabled:hover, .no-js#ac-globalnav.ie7 .ac-gn-bagview-button.disabled:hover,
.no-js#ac-globalnav.ie8 .ac-gn-bagview-button.disabled:hover {
background-color: #bcdcf4
}
#ac-globalnav.no-touch .ac-gn-bagview-button:disabled:hover, #ac-globalnav.no-touch .ac-gn-bagview-button.disabled:hover {
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9)
}
.no-touch#ac-globalnav.ie7 .ac-gn-bagview-button:disabled:hover,
.no-touch#ac-globalnav.ie8 .ac-gn-bagview-button:disabled:hover,
.no-touch#ac-globalnav.ie7 .ac-gn-bagview-button.disabled:hover,
.no-touch#ac-globalnav.ie8 .ac-gn-bagview-button.disabled:hover {
background-color: #bcdcf4
}
@-moz-document url-prefix() {
#ac-globalnav .ac-gn-bagview-button {
line-height: 31.1px;
padding-top: 1px
}
}
#ac-globalnav .ac-gn-bagview-button-buynow, #ac-globalnav .ac-gn-bagview-button-compact {
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9);
border-color: #07c;
color: #fff;
font-size: 13px;
line-height: 1.54615;
font-weight: 500;
letter-spacing: normal;
padding: 0 10px
}
#ac-globalnav.no-js .ac-gn-bagview-button-buynow:hover, #ac-globalnav.no-js .ac-gn-bagview-button-compact:hover {
background: #3392de;
background: -webkit-linear-gradient(#51a9ee, #147bcd);
background: linear-gradient(#51a9ee, #147bcd);
border-color: #1482d0
}
#ac-globalnav.no-touch .ac-gn-bagview-button-buynow:hover, #ac-globalnav.no-touch .ac-gn-bagview-button-compact:hover {
background: #3392de;
background: -webkit-linear-gradient(#51a9ee, #147bcd);
background: linear-gradient(#51a9ee, #147bcd);
border-color: #1482d0
}
#ac-globalnav .ac-gn-bagview-button-buynow:active, #ac-globalnav .ac-gn-bagview-button-compact:active {
background: #1f7ec9;
background: -webkit-linear-gradient(#3d94d9, #0067b9);
background: linear-gradient(#3d94d9, #0067b9);
border-color: #006dbc
}
#ac-globalnav.no-js .ac-gn-bagview-button-buynow:active:hover,
#ac-globalnav.no-js .ac-gn-bagview-button-compact:active:hover {
background: #1f7ec9;
background: -webkit-linear-gradient(#3d94d9, #0067b9);
background: linear-gradient(#3d94d9, #0067b9);
border-color: #006dbc
}
#ac-globalnav.no-touch .ac-gn-bagview-button-buynow:active:hover,
#ac-globalnav.no-touch .ac-gn-bagview-button-compact:active:hover {
background: #1f7ec9;
background: -webkit-linear-gradient(#3d94d9, #0067b9);
background: linear-gradient(#3d94d9, #0067b9);
border-color: #006dbc
}
#ac-globalnav .ac-gn-bagview-button-buynow:disabled, #ac-globalnav .ac-gn-bagview-button-buynow.disabled,
#ac-globalnav .ac-gn-bagview-button-compact:disabled, #ac-globalnav .ac-gn-bagview-button-compact.disabled {
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9)
}
#ac-globalnav.ie7 .ac-gn-bagview-button-buynow:disabled, #ac-globalnav.ie8 .ac-gn-bagview-button-buynow:disabled,
#ac-globalnav.ie7 .ac-gn-bagview-button-buynow.disabled, #ac-globalnav.ie8 .ac-gn-bagview-button-buynow.disabled,
#ac-globalnav.ie7 .ac-gn-bagview-button-compact:disabled, #ac-globalnav.ie8 .ac-gn-bagview-button-compact:disabled,
#ac-globalnav.ie7 .ac-gn-bagview-button-compact.disabled, #ac-globalnav.ie8 .ac-gn-bagview-button-compact.disabled {
background-color: #bcdcf4
}
#ac-globalnav.no-js .ac-gn-bagview-button-buynow:disabled:hover,
#ac-globalnav.no-js .ac-gn-bagview-button-buynow.disabled:hover,
#ac-globalnav.no-js .ac-gn-bagview-button-compact:disabled:hover,
#ac-globalnav.no-js .ac-gn-bagview-button-compact.disabled:hover {
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9)
}
.no-js#ac-globalnav.ie7 .ac-gn-bagview-button-buynow:disabled:hover,
.no-js#ac-globalnav.ie8 .ac-gn-bagview-button-buynow:disabled:hover,
.no-js#ac-globalnav.ie7 .ac-gn-bagview-button-buynow.disabled:hover,
.no-js#ac-globalnav.ie8 .ac-gn-bagview-button-buynow.disabled:hover,
.no-js#ac-globalnav.ie7 .ac-gn-bagview-button-compact:disabled:hover,
.no-js#ac-globalnav.ie8 .ac-gn-bagview-button-compact:disabled:hover,
.no-js#ac-globalnav.ie7 .ac-gn-bagview-button-compact.disabled:hover,
.no-js#ac-globalnav.ie8 .ac-gn-bagview-button-compact.disabled:hover {
background-color: #bcdcf4
}
#ac-globalnav.no-touch .ac-gn-bagview-button-buynow:disabled:hover,
#ac-globalnav.no-touch .ac-gn-bagview-button-buynow.disabled:hover,
#ac-globalnav.no-touch .ac-gn-bagview-button-compact:disabled:hover,
#ac-globalnav.no-touch .ac-gn-bagview-button-compact.disabled:hover {
background-color: #2189db;
background: -webkit-linear-gradient(#42a1ec, #0070c9);
background: linear-gradient(#42a1ec, #0070c9)
}
.no-touch#ac-globalnav.ie7 .ac-gn-bagview-button-buynow:disabled:hover,
.no-touch#ac-globalnav.ie8 .ac-gn-bagview-button-buynow:disabled:hover,
.no-touch#ac-globalnav.ie7 .ac-gn-bagview-button-buynow.disabled:hover,
.no-touch#ac-globalnav.ie8 .ac-gn-bagview-button-buynow.disabled:hover,
.no-touch#ac-globalnav.ie7 .ac-gn-bagview-button-compact:disabled:hover,
.no-touch#ac-globalnav.ie8 .ac-gn-bagview-button-compact:disabled:hover,
.no-touch#ac-globalnav.ie7 .ac-gn-bagview-button-compact.disabled:hover,
.no-touch#ac-globalnav.ie8 .ac-gn-bagview-button-compact.disabled:hover {
background-color: #bcdcf4
}
#ac-globalnav.ie7 .ac-gn-bagview-button-buynow, #ac-globalnav.ie8 .ac-gn-bagview-button-buynow,
#ac-globalnav.ie7 .ac-gn-bagview-button-compact, #ac-globalnav.ie8 .ac-gn-bagview-button-compact {
font-weight: normal;
font-family: "Myriad Set Pro 500", "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}
@-moz-document url-prefix() {
#ac-globalnav .ac-gn-bagview-button-buynow, #ac-globalnav .ac-gn-bagview-button-compact {
line-height: 19.1px;
padding-top: 1px
}
}
#ac-globalnav .ac-gn-bagview-button {
display: block;
margin: 18px 0;
text-decoration: none
}
#ac-globalnav #ac-gn-bagview-content .ac-gn-bagview-button.ac-gn-bagview-button-checkout {
display: block
}
#ac-globalnav .ac-gn-bagview-nav-item-preregistration {
padding: 10px 0px !important;
border-bottom: 1px solid #e3e3e3 !important;
text-align: center !important
}
#ac-globalnav .ac-gn-bagview-nav-link-preregistration {
padding: 0px 12px !important
}
#ac-globalnav li.prereg-promo-links-list {
display: inline-block
}
@-webkit-keyframes ac-gn-searchview-searchhide {
0% {
opacity: 1;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0
}
}
@keyframes ac-gn-searchview-searchhide {
0% {
opacity: 1;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0
}
}
@-webkit-keyframes ac-gn-searchview-searchshow-small {
0% {
opacity: 0;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1
}
}
@keyframes ac-gn-searchview-searchshow-small {
0% {
opacity: 0;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1
}
}
@-webkit-keyframes ac-gn-searchview-close-left-searchshow {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
}
@keyframes ac-gn-searchview-close-left-searchshow {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
}
@-webkit-keyframes ac-gn-searchview-close-left-searchhide {
0% {
opacity: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1)
}
}
@keyframes ac-gn-searchview-close-left-searchhide {
0% {
opacity: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1)
}
}
@-webkit-keyframes ac-gn-searchview-close-right-searchshow {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
}
@keyframes ac-gn-searchview-close-right-searchshow {
0% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
}
@-webkit-keyframes ac-gn-searchview-close-right-searchhide {
0% {
opacity: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1)
}
}
@keyframes ac-gn-searchview-close-right-searchhide {
0% {
opacity: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 0;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1)
}
}
@-webkit-keyframes ac-gn-searchview-close-searchshow-small {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes ac-gn-searchview-close-searchshow-small {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes ac-gn-searchview-close-searchhide-small {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
}
@keyframes ac-gn-searchview-close-searchhide-small {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
animation-timing-function: cubic-bezier(1, 0, 0, 1)
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
}
@-webkit-keyframes ac-gn-searchview-close-left-searchshow-small {
0% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg)
}
}
@keyframes ac-gn-searchview-close-left-searchshow-small {
0% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg)
}
}
@-webkit-keyframes ac-gn-searchview-close-left-searchhide-small {
0% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg)
}
}
@keyframes ac-gn-searchview-close-left-searchhide-small {
0% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg)
}
}
@-webkit-keyframes ac-gn-searchview-close-right-searchshow-small {
0% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg)
}
}
@keyframes ac-gn-searchview-close-right-searchshow-small {
0% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg)
}
}
@-webkit-keyframes ac-gn-searchview-close-right-searchhide-small {
0% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg)
}
}
@keyframes ac-gn-searchview-close-right-searchhide-small {
0% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}
100% {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg)
}
}
#ac-globalnav .ac-gn-searchview {
display: none
}
#ac-globalnav.searchshow .ac-gn-searchview, #ac-globalnav.searchopen .ac-gn-searchview,
#ac-globalnav.searchhide .ac-gn-searchview {
display: block
}
#ac-globalnav .ac-gn-searchview-content {
position: absolute;
top: 0;
left: 16.66667%;
width: 66.66667%;
height: 100vh;
z-index: 3
}
#ac-globalnav.searchhide .ac-gn-searchview-content {
-webkit-animation: ac-gn-searchview-searchhide 200ms both;
animation: ac-gn-searchview-searchhide 200ms both
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchview-content {
top: 58px;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: auto
}
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
#ac-globalnav .ac-gn-searchview-content {
opacity: 0
}
#ac-globalnav.searchshow .ac-gn-searchview-content, #ac-globalnav.searchopen .ac-gn-searchview-content,
#ac-globalnav.searchhide .ac-gn-searchview-content {
-webkit-animation: none;
animation: none
}
#ac-globalnav.searchopen .ac-gn-searchview-content {
opacity: 1
}
}
#ac-globalnav .ac-gn-searchview-close {
right: 12px;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=100);
position: absolute;
z-index: 3;
width: 38px;
height: 44px;
top: 0;
color: #fff;
cursor: pointer;
-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-tap-highlight-color: transparent
}
#ac-globalnav .ac-gn-searchview-close:-moz-focusring {
outline: 1px dotted #fff
}
#ac-globalnav .ac-gn-searchview-close::-moz-focus-inner {
border: 0
}
#ac-globalnav .ac-gn-searchview-close:hover, #ac-globalnav .ac-gn-searchview-close:active {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav.touch .ac-gn-searchview-close:hover, #ac-globalnav.touch .ac-gn-searchview-close:active {
opacity: 1
}
#ac-globalnav .ac-gn-searchview-close:focus {
outline-offset: -7px
}
#ac-globalnav .ac-gn-searchview-close:focus:active {
outline: none
}
#ac-globalnav.searchshow .ac-gn-searchview-close {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
#ac-globalnav.searchhide .ac-gn-searchview-close {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchview-close {
left: 50%;
margin-left: -24px;
width: 48px;
height: 48px;
z-index: 3;
overflow: hidden
}
}
#ac-globalnav .ac-gn-searchview-close-wrapper {
display: block;
width: 100%;
height: 100%
}
#ac-globalnav.ie7 .ac-gn-searchview-close-wrapper, #ac-globalnav.ie8 .ac-gn-searchview-close-wrapper {
background-repeat: no-repeat;
background-size: 16px 44px;
background-image: url("../images/ac-globalnav/globalnav/search/close_large.svg");
background-position: center center;
position: relative;
z-index: 1
}
.ie7#ac-globalnav.no-svg .ac-gn-searchview-close-wrapper, .ie8#ac-globalnav.no-svg .ac-gn-searchview-close-wrapper {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/close_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav.ie7 .ac-gn-searchview-close-wrapper, #ac-globalnav.ie8 .ac-gn-searchview-close-wrapper {
background-size: 18px 48px;
background-image: url("../images/ac-globalnav/globalnav/search/close_small.svg")
}
.ie7#ac-globalnav.no-svg .ac-gn-searchview-close-wrapper, .ie8#ac-globalnav.no-svg .ac-gn-searchview-close-wrapper {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/close_small.png")
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav.searchshow .ac-gn-searchview-close-wrapper {
-webkit-animation: ac-gn-searchview-close-searchshow-small 600ms 150ms both;
animation: ac-gn-searchview-close-searchshow-small 600ms 150ms both
}
#ac-globalnav.searchopen .ac-gn-searchview-close-wrapper {
-webkit-transform: none;
transform: none
}
#ac-globalnav.searchhide .ac-gn-searchview-close-wrapper {
-webkit-animation: ac-gn-searchview-close-searchhide-small 600ms 200ms both;
animation: ac-gn-searchview-close-searchhide-small 600ms 200ms both
}
}
#ac-globalnav .ac-gn-searchview-close-left, #ac-globalnav .ac-gn-searchview-close-right {
height: 18px;
width: 1px;
background: #fff;
position: absolute;
display: block;
top: 11px;
z-index: 1
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchview-close-left, #ac-globalnav .ac-gn-searchview-close-right {
top: 20px;
height: 1px;
width: 12px
}
}
#ac-globalnav.ie7 .ac-gn-searchview-close-left, #ac-globalnav.ie8 .ac-gn-searchview-close-left,
#ac-globalnav.ie7 .ac-gn-searchview-close-right, #ac-globalnav.ie8 .ac-gn-searchview-close-right {
display: none
}
#ac-globalnav .ac-gn-searchview-close-left {
right: 12px;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%
}
#ac-globalnav.searchshow .ac-gn-searchview-close-left {
-webkit-animation: ac-gn-searchview-close-left-searchshow 300ms both;
animation: ac-gn-searchview-close-left-searchshow 300ms both
}
#ac-globalnav.searchopen .ac-gn-searchview-close-left {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#ac-globalnav.searchhide .ac-gn-searchview-close-left {
-webkit-animation: ac-gn-searchview-close-left-searchhide 300ms both;
animation: ac-gn-searchview-close-left-searchhide 300ms both
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchview-close-left {
left: auto;
right: 50%;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%
}
#ac-globalnav.searchshow .ac-gn-searchview-close-left {
-webkit-animation: ac-gn-searchview-close-left-searchshow-small 600ms 225ms both;
animation: ac-gn-searchview-close-left-searchshow-small 600ms 225ms both
}
#ac-globalnav.searchopen .ac-gn-searchview-close-left {
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg)
}
#ac-globalnav.searchhide .ac-gn-searchview-close-left {
-webkit-animation: ac-gn-searchview-close-left-searchhide-small 600ms 150ms both;
animation: ac-gn-searchview-close-left-searchhide-small 600ms 150ms both
}
}
#ac-globalnav .ac-gn-searchview-close-right {
left: 12px;
-webkit-transform: scale3d(1, 0.65, 1);
transform: scale3d(1, 0.65, 1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%
}
#ac-globalnav.searchshow .ac-gn-searchview-close-right {
-webkit-animation: ac-gn-searchview-close-right-searchshow 300ms both;
animation: ac-gn-searchview-close-right-searchshow 300ms both
}
#ac-globalnav.searchopen .ac-gn-searchview-close-right {
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
#ac-globalnav.searchhide .ac-gn-searchview-close-right {
-webkit-animation: ac-gn-searchview-close-right-searchhide 300ms both;
animation: ac-gn-searchview-close-right-searchhide 300ms both
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchview-close-right {
left: 50%;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0
}
#ac-globalnav.searchshow .ac-gn-searchview-close-right {
-webkit-animation: ac-gn-searchview-close-right-searchshow-small 600ms 225ms both;
animation: ac-gn-searchview-close-right-searchshow-small 600ms 225ms both
}
#ac-globalnav.searchopen .ac-gn-searchview-close-right {
-webkit-transform: rotate(40deg);
transform: rotate(40deg)
}
#ac-globalnav.searchhide .ac-gn-searchview-close-right {
-webkit-animation: ac-gn-searchview-close-right-searchhide-small 600ms 150ms both;
animation: ac-gn-searchview-close-right-searchhide-small 600ms 150ms both
}
}
@-webkit-keyframes ac-gn-searchform-slide {
0% {
-webkit-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1);
animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1)
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes ac-gn-searchform-slide {
0% {
-webkit-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1);
animation-timing-function: cubic-bezier(0.11393, 0.8644, 0.14684, 1)
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@-webkit-keyframes ac-gn-searchform-fade {
0% {
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1);
animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1)
}
100% {
opacity: 1
}
}
@keyframes ac-gn-searchform-fade {
0% {
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1);
animation-timing-function: cubic-bezier(0.67, 0, 0.33, 1)
}
100% {
opacity: 1
}
}
@-webkit-keyframes ac-gn-searchinput-fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes ac-gn-searchinput-fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
#ac-globalnav input, #ac-globalnav button {
border: none;
background-color: transparent
}
#ac-globalnav .ac-gn-searchform {
height: 44px;
line-height: 44px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform {
height: 48px;
line-height: 48px;
padding: 0 48px
}
}
#ac-globalnav.searchshow .ac-gn-searchform {
-webkit-animation: ac-gn-searchform-fade 400ms 400ms both;
animation: ac-gn-searchform-fade 400ms 400ms both
}
@media only screen and (max-width: 767px) {
#ac-globalnav.searchshow .ac-gn-searchform {
-webkit-animation: none;
animation: none
}
}
#ac-globalnav .ac-gn-searchform-wrapper {
padding-left: 40px;
position: relative;
z-index: 2
}
#ac-globalnav.ie7 .ac-gn-searchform-wrapper, #ac-globalnav.ie8 .ac-gn-searchform-wrapper {
height: 44px
}
#ac-globalnav.searchshow .ac-gn-searchform-wrapper {
-webkit-animation: ac-gn-searchform-slide 1s 400ms both;
animation: ac-gn-searchform-slide 1s 400ms both
}
@media only screen and (max-width: 767px) {
#ac-globalnav.searchshow .ac-gn-searchform-wrapper {
-webkit-animation: none;
animation: none
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-wrapper {
background: #000;
border-bottom: 1px solid #ccc;
right: 200%;
padding: 0 28px;
height: 47px
}
#ac-globalnav.searchopen .ac-gn-searchform-wrapper {
right: auto
}
}
#ac-globalnav .ac-gn-searchform-input {
font-size: 16px;
line-height: 1.375;
font-weight: 400;
letter-spacing: normal;
color: #fff;
outline: none;
width: 100%;
height: 1.375em
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-input {
font-size: 20px;
line-height: 1.2;
font-weight: 300;
letter-spacing: normal
}
}
.touch#ac-globalnav.searchshow .ac-gn-searchform-input {
-webkit-transform: translateY(-200px);
transform: translateY(-200px)
}
.touch#ac-globalnav.searchopen .ac-gn-searchform-input {
-webkit-animation: ac-gn-searchinput-fade 200ms both;
animation: ac-gn-searchinput-fade 200ms both
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-input {
height: 1.2em
}
.touch#ac-globalnav.searchshow .ac-gn-searchform-input {
-webkit-transform: none;
transform: none
}
.touch#ac-globalnav.searchopen .ac-gn-searchform-input {
-webkit-animation: none;
animation: none
}
}
#ac-globalnav .ac-gn-searchform-input::-webkit-input-placeholder {
color: #999;
opacity: 1
}
#ac-globalnav .ac-gn-searchform-input::-moz-placeholder {
color: #999;
opacity: 1
}
#ac-globalnav .ac-gn-searchform-input:-ms-input-placeholder {
color: #999;
opacity: 1
}
#ac-globalnav .ac-gn-searchform-input::placeholder {
color: #999;
opacity: 1
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-input::-webkit-input-placeholder {
color: #666
}
#ac-globalnav .ac-gn-searchform-input::-moz-placeholder {
color: #666
}
#ac-globalnav .ac-gn-searchform-input:-ms-input-placeholder {
color: #666
}
#ac-globalnav .ac-gn-searchform-input::placeholder {
color: #666
}
}
#ac-globalnav .ac-gn-searchform-input::-ms-clear {
display: none;
width: 0;
height: 0
}
#ac-globalnav .ac-gn-searchform-submit {
left: 0;
position: absolute;
z-index: 1;
top: 0;
width: 40px;
height: 44px;
cursor: pointer;
background-repeat: no-repeat;
background-size: 20px 44px;
background-image: url("../images/ac-globalnav/globalnav/search/image_large.svg");
background-position: 10px 50%;
background-repeat: no-repeat;
-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
}
#ac-globalnav .ac-gn-searchform-submit:-moz-focusring {
outline: 1px dotted #fff
}
#ac-globalnav .ac-gn-searchform-submit::-moz-focus-inner {
border: 0
}
#ac-globalnav.no-svg .ac-gn-searchform-submit {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/image_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-submit {
background-size: 22px 48px;
background-image: url("../images/ac-globalnav/globalnav/search/image_small.svg")
}
#ac-globalnav.no-svg .ac-gn-searchform-submit {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/image_small.png")
}
}
#ac-globalnav .ac-gn-searchform-submit:hover, #ac-globalnav .ac-gn-searchform-submit:active {
opacity: 0.65;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
filter: alpha(opacity=65)
}
#ac-globalnav.touch .ac-gn-searchform-submit:hover, #ac-globalnav.touch .ac-gn-searchform-submit:active {
opacity: 1
}
#ac-globalnav .ac-gn-searchform-submit:focus {
outline-offset: -7px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-submit:focus {
outline-offset: 0
}
}
#ac-globalnav .ac-gn-searchform-submit[disabled] {
opacity: 1;
cursor: default
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-submit {
width: 20px;
height: 48px;
background-position: 0 50%
}
}
#ac-globalnav .ac-gn-searchform-reset {
right: 0;
background-repeat: no-repeat;
display: none;
position: absolute;
z-index: 1;
top: 0;
cursor: pointer
}
#ac-globalnav .ac-gn-searchform-reset:-moz-focusring {
outline: 1px dotted #fff
}
#ac-globalnav .ac-gn-searchform-reset::-moz-focus-inner {
border: 0
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-reset {
background-size: 24px 48px;
height: 48px;
width: 24px;
background-image: url("../images/ac-globalnav/globalnav/search/icon_reset_small.svg")
}
#ac-globalnav.no-svg .ac-gn-searchform-reset {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/icon_reset_small.png")
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform-reset {
cursor: default;
display: block;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 300ms ease;
transition: opacity 300ms ease
}
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchform.with-reset .ac-gn-searchform-reset {
cursor: pointer;
opacity: 1;
pointer-events: auto
}
}
@-webkit-keyframes ac-gn-searchresults-show {
0% {
opacity: 0;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1
}
}
@keyframes ac-gn-searchresults-show {
0% {
opacity: 0;
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1
}
}
@-webkit-keyframes ac-gn-searchresults-items-show {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes ac-gn-searchresults-items-show {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
-webkit-animation-timing-function: ease;
animation-timing-function: ease
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#ac-globalnav .ac-gn-searchresults {
font-size: 15px;
line-height: 2;
font-weight: 400;
letter-spacing: normal;
display: none;
background: #fff;
border-top: none;
color: #999;
max-height: calc(100% - 44px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults {
font-size: 16px;
line-height: 2.8125;
font-weight: 400;
letter-spacing: normal
}
}
#ac-globalnav.ie7 .ac-gn-searchresults, #ac-globalnav.ie8 .ac-gn-searchresults {
border: 1px solid #d6d6d6
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults {
background: transparent;
border: none;
color: #999;
max-height: none;
padding: 48px;
padding-bottom: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1
}
}
#ac-globalnav .ac-gn-searchresults.with-content {
display: block
}
#ac-globalnav .ac-gn-searchresults.with-content-initial {
-webkit-animation: ac-gn-searchresults-show 200ms both;
animation: ac-gn-searchresults-show 200ms both
}
#ac-globalnav .ac-gn-searchresults-section {
border-top: 1px solid #d6d6d6;
margin: 0 40px;
padding: 24px 0 15px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-section {
border-color: #ccc;
margin: 0;
padding: 24px 0
}
}
#ac-globalnav .ac-gn-searchresults-section:first-child {
border-top: none
}
#ac-globalnav .ac-gn-searchresults-header {
font-size: 12px;
line-height: 1;
font-weight: 400;
letter-spacing: normal;
color: #999
}
#ac-globalnav .ac-gn-searchresults-list {
list-style: none;
padding-top: 5px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-list {
padding: 0 30px
}
}
@media only screen and (max-width: 419px) {
#ac-globalnav .ac-gn-searchresults-list {
padding: 0
}
}
#ac-globalnav .ac-gn-searchresults-item {
margin: 4px -32px
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-item {
margin: 0;
border-top: 1px solid #333
}
#ac-globalnav .ac-gn-searchresults-item:first-child {
border-top: none
}
}
#ac-globalnav .ac-gn-searchresults-link {
color: #999;
display: block;
padding: 0 48px;
text-decoration: none
}
#ac-globalnav .ac-gn-searchresults-link b {
color: #333;
font-weight: 400
}
#ac-globalnav .ac-gn-searchresults-link.current {
background-color: #f2f2f2
}
#ac-globalnav .ac-gn-searchresults-link.current, #ac-globalnav .ac-gn-searchresults-link.current b {
color: #08c
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-link {
color: #ccc;
padding: 0
}
#ac-globalnav .ac-gn-searchresults-link b {
color: #fff
}
#ac-globalnav .ac-gn-searchresults-link.current {
background-color: transparent
}
#ac-globalnav .ac-gn-searchresults-link.current, #ac-globalnav .ac-gn-searchresults-link.current b {
color: #5cc3f6
}
}
#ac-globalnav .ac-gn-searchresults-link-suggestions {
background-repeat: no-repeat;
background-size: 21px 60px;
background-image: url("../images/ac-globalnav/globalnav/search/icon_suggested_large.svg");
padding-left: 72px;
background-position: 48px 0;
padding-left: 72px
}
#ac-globalnav.no-svg .ac-gn-searchresults-link-suggestions {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/icon_suggested_large.png")
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-link-suggestions {
background-size: 18px 90px;
background-image: url("../images/ac-globalnav/globalnav/search/icon_suggested_small.svg")
}
#ac-globalnav.no-svg .ac-gn-searchresults-link-suggestions {
background-image: url("http://images.apple.com/ac/globalnav/2.0/en_US/images/ac-globalnav/globalnav/search/icon_suggested_small.png")
}
}
#ac-globalnav .ac-gn-searchresults-link-suggestions.current {
background-position: 48px 100%
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-link-suggestions {
background-position: left top;
padding-left: 26px
}
#ac-globalnav .ac-gn-searchresults-link-suggestions.current {
background-position: left bottom
}
}
#ac-globalnav .ac-gn-searchresults-animated {
-webkit-animation: ac-gn-searchresults-items-show 400ms both;
animation: ac-gn-searchresults-items-show 400ms both
}
#ac-globalnav.searchhide .ac-gn-searchresults-animated {
-webkit-animation: none;
animation: none
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-animated {
-webkit-animation: none;
animation: none
}
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(1) {
-webkit-animation-delay: 20ms;
animation-delay: 20ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(2) {
-webkit-animation-delay: 40ms;
animation-delay: 40ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(3) {
-webkit-animation-delay: 60ms;
animation-delay: 60ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(4) {
-webkit-animation-delay: 80ms;
animation-delay: 80ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(5) {
-webkit-animation-delay: 100ms;
animation-delay: 100ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(6) {
-webkit-animation-delay: 120ms;
animation-delay: 120ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(7) {
-webkit-animation-delay: 140ms;
animation-delay: 140ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(8) {
-webkit-animation-delay: 160ms;
animation-delay: 160ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(9) {
-webkit-animation-delay: 180ms;
animation-delay: 180ms
}
#ac-globalnav .ac-gn-searchresults-animated:nth-child(10) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms
}
#ac-globalnav .ac-gn-searchresults-animated.ac-gn-searchresults-header {
-webkit-animation-delay: 0s;
animation-delay: 0s
}
#ac-globalnav .ac-gn-searchresults-noresults {
display: block;
padding: 0 32px;
color: #999;
line-height: 1.25;
white-space: normal
}
@media only screen and (max-width: 767px) {
#ac-globalnav .ac-gn-searchresults-noresults {
color: #ccc;
padding: 0
}
}
html.ac-gn-segmentbar-visible {
margin-top: 40px !important
}
@media only screen and (max-width: 767px) {
html.ac-gn-segmentbar-visible {
margin-top: 44px !important
}
}
html.ac-gn-segmentbar-visible body {
border-top: 1px solid transparent;
margin-top: -1px;
position: relative
}
#ac-gn-segmentbar {
background: #444;
display: none;
font-size: 12px;
line-height: 1;
position: absolute;
top: -40px;
left: 0;
min-width: 1024px;
width: 100%;
height: 40px;
z-index: 9998
}
@media only screen and (max-width: 1023px) {
#ac-gn-segmentbar {
min-width: 320px
}
}
@media only screen and (max-width: 767px) {
#ac-gn-segmentbar {
top: -44px;
height: 44px
}
}
html.ac-gn-segmentbar-visible #ac-gn-segmentbar {
display: block
}
#ac-gn-segmentbar .ac-gn-segmentbar-content {
list-style: none;
margin: 0 auto;
max-width: 980px;
padding: 0 22px;
white-space: nowrap
}
@media only screen and (max-width: 767px) {
#ac-gn-segmentbar .ac-gn-segmentbar-content {
padding: 0 16px
}
}
#ac-gn-segmentbar .ac-gn-segmentbar-item {
border-left: 1px solid #666;
float: left;
height: 12px;
margin-top: 14px
}
@media only screen and (max-width: 767px) {
#ac-gn-segmentbar .ac-gn-segmentbar-item {
margin-top: 16px
}
}
#ac-gn-segmentbar .ac-gn-segmentbar-item:first-child {
border-left: none;
margin-left: -12px;
max-width: 60%
}
#ac-gn-segmentbar .ac-gn-segmentbar-link {
color: #fff;
cursor: pointer;
display: block;
line-height: 40px;
margin-top: -14px;
outline-offset: -12px;
overflow: hidden;
padding: 0 12px;
text-decoration: none;
text-overflow: ellipsis
}
@media only screen and (max-width: 767px) {
#ac-gn-segmentbar .ac-gn-segmentbar-link {
line-height: 44px;
margin-top: -16px
}
}
#ac-gn-segmentbar .ac-gn-segmentbar-link:hover {
color: #5cc3f6;
text-decoration: none
}
html.ac-gn-noscroll {
margin-top: 0 !important
}
html.ac-gn-noscroll, html.ac-gn-noscroll body {
overflow: hidden !important;
height: 100% !important
}
html.ac-gn-noscroll-long {
overflow-y: scroll !important
}
some stripping of this should bring the current version
