/* Shared Styles
------------------------*/
/* Alex Speaks */
#alex-speak { padding:16px 0 20px 18px; }
#alex-speak .audio-file { display:inline-block; *display:inline; *zoom:1; margin-right:12px; cursor:pointer; overflow:hidden; }
#alex-speak .audio-file.last-child { margin:0; }
#alex-speak .audio-file .player { float:left; margin:8px 5px 0 0; width:42px; background:none; }

#alex-speak .audio-file:focus { outline:dotted 1px #333;
	outline-color:-webkit-focus-ring-color; }
#alex-speak .audio-file .audio-link { float:left; display:block; padding-top:20px; color:#08c; }
#alex-speak .audio-file:hover .audio-link { text-decoration:underline; }
#alex-speak .audio-file:focus .audio-link { color:#333; }

#alex-speak .audio-file .controller { display:block; width:42px; height:43px; background:url(http://images.apple.com/v/accessibility/c/images/controller_sprite.png) no-repeat; background-position:0 0; text-indent:105%; white-space:nowrap; overflow:hidden; }
#alex-speak .audio-file:focus .controller { background-position:0 -44px; }
#alex-speak .audio-file:hover .controller { background-position:0 -44px; }
#alex-speak .audio-file .controller.playing { background-position:0 -88px;}

/* iPhone version of Alex Speaks */
@media only screen and (min-device-width:320px) and (max-device-width:480px){
	#alex-speak .audio-file:focus { outline:none; }
}

@media only screen and (min-device-width:320px) and (max-device-width:568px){
	#alex-speak .audio-file:focus { outline:none; }
}


/* Page specific styles
------------------------*/

/* Accessibility - OSX CSS */
body#osx h2 { margin-bottom:7px; font-size:1.15em; }
body#osx p { margin-bottom:5px; line-height:1.6em; }

body#osx section { position:relative; }

body#osx .content a.back-to-top { top:27px; right:-48px }

body#osx .gradient-wrap { border-top:1px solid #ccc; *width:100%;
	background:#fff;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#fff));
	background-image:-moz-linear-gradient(center top, #f2f2f2 0%, #fff 100%);
	background-image:-o-linear-gradient(#f2f2f2, #fff);
}

body#osx .white-rule { border-top:1px solid #fff; }

body#osx .callout { margin:0 -50px 75px; padding:43px 45px 38px; *width:900px; }
body#osx .callout h3 { font-size:1.45em; }
body#osx .callout p { font-size:1.30em; line-height:1.399em; }

body#osx .pullout { margin:0 -50px; padding:15px 60px 5px 33px; }
body#osx .pullout h3 { padding-top:37px; }
body#osx .pullout img { margin:8px 42px 8px 0; }

body#osx .hero { padding:46px 0 36px; }
body#osx .hero h1 { margin:0 0 8px 13px; }
body#osx .hero p.intro { width:834px; text-align:center; }
body#osx .hero nav { padding-top:27px; }

body#osx .flushleft { position:relative; z-index:1; }

body#osx .page-border { position:absolute; z-index:1001; top:0; width:1px; height:120%; margin-top:-5%;
	background:#c3c3c3;
	background:-moz-linear-gradient(top, #fcfcfc 0%, #999999 50%, #fcfcfc 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(50%,#999999), color-stop(100%,#fcfcfc));
	background:-webkit-linear-gradient(top, #fcfcfc 0%,#999999 50%,#fcfcfc 100%);
	background:-o-linear-gradient(top, #fcfcfc 0%,#999999 50%,#fcfcfc 100%);
	background:-ms-linear-gradient(top, #fcfcfc 0%,#999999 50%,#fcfcfc 100%);
	background:linear-gradient(to bottom, #fcfcfc 0%,#999999 50%,#fcfcfc 100%);
}

body#osx .page-border.left { left:0px; }
body#osx .page-border.right { right:0px; }


body#osx #vision h1 { margin-bottom:15px; padding-top:64px; }
body#osx #vision p.intro { margin:0 50px; text-align:center; }
body#osx #vision .voiceover .column { position:relative; z-index:2; width:293px; padding-top:184px; }
body#osx #vision .voiceover .flushright { position:relative; z-index:1; margin-top:-295px; }
body#osx #vision .zoom { padding-top:50px; }
body#osx #vision .zoom img { margin-left:-55px; }
body#osx #vision .zoom img.drop-shadow { margin-left:-83px; margin-right:0; }
body#osx #vision .zoom .column { width:416px; padding-top:85px; }
body#osx #vision .dictation { padding:86px 0; }
body#osx #vision .dictation .column.first { width:465px; }
body#osx #vision .dictation .column { width:400px; }
body#osx #vision .dictation img { margin:-20px 0 -103px 16px; }
body#osx #vision .invert img { margin-left:-29px; }
body#osx #vision .invert .column { width:416px; padding-top:60px; }
body#osx #vision .cursor { padding:11px 0 50px; }
body#osx #vision .cursor .column { width:440px; }
body#osx #vision .cursor .column.last { margin:0 -55px 0 50px; padding-top:33px; }

body#osx #vision .cursor .growing-arrow { position:relative; z-index:1; width:430px; height:80px; }
body#osx #vision .cursor .growing-arrow .replay-button { margin:15px 0 0 200px; }
body#osx #vision .cursor .growing-arrow img { position:absolute; z-index:5; }
body#osx #vision .cursor .growing-arrow img.track { position:relative; z-index:1; margin-top:2px; }
body#osx #vision .cursor .growing-arrow .slider { top:3px; left:80px; }
body#osx #vision .cursor .growing-arrow.can-animate .slider {
	-webkit-transform:translate3d(0,0,0);
	   -moz-transform:translate3d(0,0,0);
	        transform:translate3d(0,0,0);
}
body#osx #vision .cursor .growing-arrow.animate .slider {
	-webkit-animation:slide 8s ease-in-out 0s;
	   -moz-animation:slide 8s ease-in-out 0s;
}
body#osx #vision .cursor .growing-arrow .arrow { top:5px; left:87px; width:17px\9; height:26px\9; }
body#osx #vision .cursor .growing-arrow.can-animate .arrow {
	-webkit-transform:translate3d(-26px,-40px,0) scale(.25);
	   -moz-transform:translate3d(-26px,-40px,0) scale(.25);
	        transform:translate3d(-26px,-40px,0) scale(.25);
}
body#osx #vision .cursor .growing-arrow.animate .arrow {
	-webkit-animation:grow 8s ease-in-out 0s;
	   -moz-animation:grow 8s ease-in-out 0s;
}
@-webkit-keyframes slide {
	0%, 10%, 90%, 100% { -webkit-transform:translate3d(0,0,0); }
	40%, 60%           { -webkit-transform:translate3d(321px,0,0); }
}
@-moz-keyframes slide {
	0%, 10%, 90%, 100% { -moz-transform:translate3d(0,0,0); }
	40%, 60%           { -moz-transform:translate3d(321px,0,0); }
}
@-webkit-keyframes grow {
	0%, 10%, 90%, 100% { -webkit-transform:translate3d(-26px,-40px,0) scale(.25); }
	40%, 60%           { -webkit-transform:translate3d(313px,-4px,0) scale(1); }
}
@-moz-keyframes grow {
	0%, 10%, 90%, 100% { -moz-transform:translate3d(-26px,-40px,0) scale(.25); }
	40%, 60%           { -moz-transform:translate3d(313px,-4px,0) scale(1); }
}

body#osx #hearing h1 { margin-bottom:13px; padding-top:65px; }
body#osx #hearing p.intro { margin:0 25px 55px; text-align:center; }
body#osx #hearing .facetime .flushright { position:relative; z-index:1; margin-left:-40px; }
body#osx #hearing .facetime .column { position:relative; z-index:2; width:265px; padding-top:124px; }
body#osx #hearing .closed-captions { padding-top:42px; }
body#osx #hearing .closed-captions img { margin-left:-56px; }
body#osx #hearing .closed-captions .column { width:413px; padding-top:55px; }
body#osx #hearing .imessage { padding-bottom:27px; }
body#osx #hearing .imessage img { margin:-43px -51px 0 0; }
body#osx #hearing .imessage .column { padding-top:66px; width:540px; }
body#osx #hearing .mono { padding:21px 0 46px; }
body#osx #hearing .mono .column { padding-top:44px; width:545px; }
body#osx #hearing .mono img { margin-right:35px; }
body#osx #hearing .screen-flash .column { width:423px; margin-right:-6px; padding-top:60px; }
body#osx #hearing .flash-animation { position:relative; z-index:1; margin:0 0 0 -36px; height:331px; }
body#osx #hearing .flash-animation.animate .flash { position:absolute; top:21px; left:65px; width:352px; height:220px; background-color:white; opacity:0;
	-webkit-animation:flash 1.2s linear .8s;
	   -moz-animation:flash 1.2s linear .8s;
}
body#osx #hearing .flash-animation .replay-button { margin:5px 0 0 172px; }
@-webkit-keyframes flash {
	0%   { opacity:.6; }
	25%  { opacity:0; }
	100% { opacity:0; }
}
@-moz-keyframes flash {
	0%   { opacity:.6; }
	25%  { opacity:0; }
	100% { opacity:0; }
}

body#osx #motor-skills .gradient-wrap { padding-bottom:1px; }
body#osx #motor-skills h1 { padding-top:54px; }
body#osx #motor-skills p.intro { margin:0 -10px; text-align:center; }
body#osx #motor-skills .switch-control { margin:53px 0 0 -9px; }
body#osx #motor-skills .switch-control .column.first { margin-top:35px; padding-left:6px; width:58%; }
body#osx #motor-skills .switch-control img.right { margin-right:-60px; }
body#osx #motor-skills .slow-keyboard { padding:13px 0 0; }
body#osx #motor-skills .slow-keyboard .page-border { left:1px; }
body#osx #motor-skills .slow-keyboard .page-border.left { left:0; }
body#osx #motor-skills .slow-keyboard .column { width:415px; margin:25px -3px 0 0; }
body#osx #motor-skills .slow-keyboard .column.last h2 { margin-top:30px; }
body#osx #motor-skills .speakable-items .column { width:525px; padding-top:58px; }
body#osx #motor-skills .speakable-items img { margin:20px -58px 0 60px; }
body#osx #motor-skills .speakable-items img.drop-shadow { margin:30px -76px 0 0; }
body#osx #motor-skills .mouse-keys { padding:13px 0 18px; }
body#osx #motor-skills .mouse-keys img { margin-left:-50px; }
body#osx #motor-skills .mouse-keys .column { width:581px; padding-top:32px; }
body#osx #motor-skills .onscreen-keyboard .column { width:465px; padding-top:38px;  }
body#osx #motor-skills .onscreen-keyboard img { margin-right:-47px; }


body#osx #learning h1 { padding-top:63px; }
body#osx #learning p.intro { margin:0 25px; text-align:center; }
body#osx #learning .finder { margin:37px 0 23px; }
body#osx #learning .finder img { position:static; margin-right:0; }
body#osx #learning .finder .column { width:365px; margin-right:-1px; padding-top:138px; }
body#osx #learning .dictionary .column { width:580px; padding-top:50px; }
body#osx #learning .dictionary img { margin:-4px -5px 0 34px; }
body#osx #learning .text-speech { padding:35px 0 62px; }
body#osx #learning .text-speech img { margin:15px 0 0 -9px; }
body#osx #learning .text-speech .last { margin-top:115px; }

body#voiceover #ac-localnav .ac-ln-title { margin-bottom: 0; font-size: 28px; line-height: 52px; }
body#osx #learning .text-speech .column.first,
body#voiceover #alex .column.first {display: none; }
body#osx #learning .text-speech .column,
body#voiceover #alex .column { width: 100%; float: left !important; }
@media only screen {
	body#osx #learning .text-speech .column,
	body#voiceover #alex .column { width:515px; }
	body#osx #learning .text-speech .column.first,
	body#voiceover #alex .column.first { width:311px; padding-top:17px; display: block; }
	body#osx #learning .text-speech .column.last,
	body#voiceover #alex .column.last { float: right !important; }
	body#osx #learning .text-speech #alex-speak,
	body#voiceover #alex #alex-speak { margin-left:-5px; }
}

body#osx #learning .completion { padding-bottom:44px; }
body#osx #learning .completion .column { width:585px; padding-top:28px; }
body#osx #learning .completion img { margin:0 -10px 0 29px; }
body#osx #learning .completion img.drop-shadow { margin:-10px -38px 0 0; }

body#osx #speech .selfclear:after { content:''; }
body#osx #speech h1 { margin-bottom:5px; padding-top:61px; font-size:1.6em; font-weight:bold; }
body#osx #speech p.speech-intro { width:725px; padding-bottom:55px; }
body#osx #speech h1,
body#osx #speech p.speech-intro { margin-left:-49px; }
body#osx #speech img.speech-bubble { margin:72px -8px 0 0; }

body#osx #speech aside .aside-border { border:1px solid #ccc; background-color:#fafafa; }
body#osx #speech aside h3 { padding-top:28px; font-size:1.15em; }

/* voiceover osx */
body#voiceover.osx .main h2 { font-size:1.1428em; line-height:1.25em; margin-bottom:7px; }
body#voiceover.osx .main h3 { font-size:1.15em; }
body#voiceover.osx .main p { line-height:1.6em; }
body#voiceover.osx .main p.intro { line-height:1.45em; }

body#voiceover.osx #hero { padding-top:40px; }
body#voiceover.osx #hero .column.first { position:relative; z-index:10; width:442px; }
body#voiceover.osx #hero img.right { position:relative; z-index:1; margin:-350px -120px 0 0; }
body#voiceover.osx #hero h1 { margin:0 0 10px -6px; }

body#voiceover.osx #alex.row { margin-left:-4px; padding:41px 0 0; }
body#voiceover.osx #alex .column.first { width:318px; padding-top:36px; }
body#voiceover.osx #alex .column.first .pullout { margin-left:-5px; padding:16px 0 10px 18px; }
body#voiceover.osx #alex .column.last { width:519px; margin-right:-10px; }
body#voiceover.osx #alex-speak h3 { font-size:1.3em; }

body#voiceover.osx #gestures .squeeze { margin:-5px 0 0 -53px; padding:0 50px; }
body#voiceover.osx #gestures .flushpad { margin-left:-238px; padding-top:32px; }

body#voiceover.osx #rotor { margin-left:64px; }
body#voiceover.osx #rotor img.left { margin:16px 20px 16px -67px; }
body#voiceover.osx #rotor .column.last { margin-right:54px; padding-top:25px; width:422px; }

body#voiceover.osx #braille { margin:-4px 0 0 -2px; padding:0 0 6px; }
body#voiceover.osx #braille .column.first { width:388px; }
body#voiceover.osx #braille img.right { margin:56px -10px 0 0; }

body#voiceover.osx #braille-panel .column.first { width:412px; }
body#voiceover.osx #braille-panel .column.last { width:463px; margin:-12px -21px 0 0; }
body#voiceover.osx #braille-panel .column.last h2 { margin-top:43px; }

body#voiceover.osx #apps.row { margin:-2px 0 0 -3px; padding:20px 0; }
body#voiceover.osx #apps .column.first { padding-top:21px; width:582px; }
body#voiceover.osx #apps img.right { margin:-3px -6px 16px 0; }

body#voiceover.osx #voices { margin-left:-2px; padding:47px 0 18px; }
body#voiceover.osx #voices .column.last { width:506px; }
body#voiceover.osx #voices img.left { margin:32px 0 0 -4px; }

body#voiceover.osx .pullout.voiceover-pullout { border:1px solid #ccc; background-color:#fafafa; }
body#voiceover.osx .pullout { margin:34px -50px 0; padding:30px 80px 18px 40px; position:relative; min-height:150px; *height:150px; }
body#voiceover.osx .pullout h3 { padding-top:28px; }
body#voiceover.osx .pullout p { margin-bottom:0; }
body#voiceover.osx .pullout img.left { margin:10px 44px 0 2px; }
body#voiceover.osx .image-gestures { margin-left: -118px; padding-top: 32px; }

/* Braille Displays
----------------------------- */
body#braille #hero { padding:58px 0 39px; text-align:center; }
body#braille #hero h1 { margin-bottom:16px; }
body#braille #hero p { margin:0 50px 30px; }
body#braille #hero p.intro { color:#666; }
body#braille #hero .feedback { margin-bottom:40px; font-size:1em; line-height:1.8em; }

body#braille .gradient-wrap { border-top:1px solid #ccc; *width:100%;
	background:#fff;
	background-image:-webkit-linear-gradient(top, #f2f2f2 0, #fff 150px);
	background-image:   -moz-linear-gradient(top, #f2f2f2 0, #fff 150px);
	background-image:     -o-linear-gradient(#f2f2f2, #fff);
	background-image:        linear-gradient(top, #f2f2f2 0, #fff 150px);
}
body#braille .white-rule { border-top:1px solid #fff; }

/* table styles */
body#braille table { margin:0 auto; width:838px; border-left:1px solid #e4e4e4; border-right:1px solid #e4e4e4; table-layout:fixed; border-collapse:separate; empty-cells:show; }
body#braille table th,
body#braille table td { padding:8px 10px 10px; height:21px; vertical-align:middle; border-bottom:1px solid #e4e4e4; text-indent:10px; background-color:#fff; }
body#braille table th { font-size:14px; font-style:italic; text-align:center; background-color:#f7f7f7; }
body#braille table th.title { width:480px; font-style:normal; font-weight:bold; text-align:left; }
body#braille table td { font-size:0.857em; }
body#braille table td.alt { border-left:1px solid #e4e4e4; border-right:1px solid #e4e4e4;}
body#braille table td.checkmark { background:url('http://images.apple.com/v/accessibility/c/images/check.png') no-repeat 50% 50%; text-indent:-9999px; white-space:nowrap; overflow:hidden; }
body#braille .table-title { margin:72px auto 0; padding:8px 10px; width:816px; height:21px; border:1px solid #c3c3c3; border-radius:3px 3px 0 0; text-align:left; text-indent:12px;
	background:#d2d2d2;
	background-image:-webkit-linear-gradient(top, #f6f6f6 0%, #d2d2d2 100%);
	background-image:   -moz-linear-gradient(top, #f6f6f6 0%, #d2d2d2 100%);
	background-image:     -o-linear-gradient(#f6f6f6, #d2d2d2);
	background-image:        linear-gradient(top, #f6f6f6 0%, #d2d2d2 100%);
}
body#braille .table-title h2 { margin:0; font-size:1.1428em; line-height:1.25em; margin-bottom:7px; }

/* promo */
body#braille .pullout { width:980px; margin:40px -50px 2px; padding:1px 0 0; min-height:150px; }
body#braille .pullout .column { padding:18px 30px 4px 27px; }
body#braille .pullout .column.first { width:590px; }
body#braille .pullout .column.last { width:262px; padding-right:40px; border-left:1px solid #dedede; }
body#braille .pullout h3 { padding-top:16px; font-size:1.1em; }
body#braille .pullout img { margin-right:24px; }