/* WWDC 2013 CSS */
/* styles shared by all wwdc pages */
#content { width:980px; margin:0 auto; padding:0; }
#content section { padding:0; }

#content .center { display:block; margin-right:auto; margin-left:auto; text-align:center; }

#content .divider-shadow { background:url(https://devimages.apple.com.edgekey.net/assets/elements/layout/divider-crease-down.png) no-repeat 50% 0; }
#content .border-divider { border-top:1px solid #e5e5e5; }
#content .image-border { display:inline-block; margin-bottom:50px; padding:10px 10px 5px; *padding-bottom:8px; border:1px solid #ccc; 
	-webkit-box-shadow:rgba(0,0,0,0.3) 0 0 4px;
	   -moz-box-shadow:rgba(0,0,0,0.3) 0 0 4px;
	        box-shadow:rgba(0,0,0,0.3) 0 0 4px;
}

#content .hero { padding:62px 0 50px; }
#content .hero h1 { margin-bottom:0; font-size:2em; line-height:36px; font-weight:normal; text-align:center; }
#content .hero p.intro { text-align:center; margin-top:0; font-size:1.5em; line-height:1.35em; }

#content .row { width:860px; margin:0 auto; }
#content .row h1 { font-size:1.535em; font-weight:normal; }
#content .row h2 { font-size:0.97em; margin-bottom:1px; }
#content .row a.small-link { font-size:0.892em; }
#content .row .sidenote { font-size:0.892em; color:#999; }

#content .row.border-gradient { border-top:1px solid #e2e2e2; padding:0 60px;
	background:#fff;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#fff));
	background-image: -moz-linear-gradient(center top, #fafafa 0%, #fff 100%);
	background-image: -o-linear-gradient(#fafafa, #fff);
}
#content .row.border-gradient.bottom {
	-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;
	border-radius: 0 0 4px 4px;
}

#content .row .flushright { margin-right:-60px; }
#content .row .flushleft { margin-left:-60px; }
#content .row .flushright,
#content .row .flushleft { margin-bottom:0; }

#globalfooter { margin: 45px auto 18px; } /* For white */
#globalfooter .gf-sosumi { border-top:1px solid #ddd; padding-top:9px; }
#globalfooter .gf-sosumi p { margin-left:3px; }

/* pure css buttons */
.close { display:block; position:absolute; width:30px; height:30px; background-color:#d2d2d2; top:20px; left:20px; color:#ffffff; font-size:28px; font-weight:bold; text-decoration:none !important; line-height:25px; text-align:center;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	border-radius:25px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	-o-border-radius:25px;
	-khtml-border-radius:25px;
}
.close:after { content:"+"; }
.close:hover { background-color:#aeaeae; }

.arrow-down {
	width:0px; 
	height:0px; 
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
}

/* videos */
#videos .hero .sign-in { position:relative; margin-top:25px; height:33px; }
#videos .hero .sign-in .button { position:absolute; top:0; left:50%; z-index:1; margin-left:-50px; }
#videos .register { margin:0 auto; width:894px; padding:20px 0 5px; font-size:0.8571em; border-top:1px solid #ccc; }
/* ios-bouncer */
#videos.ios #content .hero.ioserror { padding:62px 75px 50px;}
#videos.ios #content .hero.ioserror { font-size:2.3em; line-height:1.3em; }
#videos.ios #content .hero.ioserror h2 { font-size:1.1em; margin:4px 0 15px; }
#videos.ios #content .hero.ioserror p { width:800px; }
#videos.ios #content .hero.ioserror img.left { margin-right:40px; }
/* now-playing */
#videos.now-playing #content .hero { padding:0px;
	background-image: url('/videos/wwdc/2014/images/videos-hero.png');
}
#videos.now-playing #content .hero {
	-webkit-border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topleft:6px;
	-moz-border-radius-topright:6px;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
}
#videos.now-playing #content .hero .topbar { color:#ffffff; background-image:none; height:31px; border-bottom:none; height:32px; }
#videos.now-playing.sign-in #content .hero .topbar { background-color:rgba(0,0,0,0.1); }
#videos.now-playing #content .hero .topbar .topbar-select { color:#ffffff; text-shadow:none; }
#videos.now-playing #content .hero .topbar .topbar-select-container { top:11px; }
#videos.now-playing #content .hero .topbar .topbar-select-container .topbar-select:hover,
#videos.now-playing #content .hero .topbar .topbar-select-container .topbar-select.active { background-color:rgba(0,0,0,0.3); }
#videos.now-playing #content .hero .topbar .topbar-select-container .tooltip-content { box-shadow:0 4px 15px 4px rgba(0,0,0,0.3); }
#videos.now-playing #content .hero .topbar .topbar-select-container #topbar-dropdown-tooltip .topbar-dropdown-options a:hover { background:#4e6a7e; }
#videos.now-playing #content .hero .topbar .topbar-select span { background:none; }
#videos.now-playing #content .hero .topbar .topbar-select .section-title .arrow-down { padding:0px; top:8px; position:absolute; right:14px; display:inline-block; }
/*#videos.now-playing #content .hero h1 { line-height:256px; color:#ffffff; font-size:3.5em; letter-spacing:-1px; text-indent:-9999px; }*/
#videos.now-playing #content .hero h1 { line-height:220px; color:#ffffff; font-size:3.5em; letter-spacing:-1px; text-indent:-9999px; }
#videos.now-playing #content .hero p { padding:18px 0 70px; margin-bottom:0px; color:#a1b6ca; font-size:1.5em; }
#videos.now-playing #content .video-list.col2 ul li.title { width: 850px; padding-left:20px; }
#videos.now-playing #content .video-list.col2 ul li.track,
#videos.now-playing #content .video-list.col2 ul li.year { width: 100px; padding-left:10px; }
/*#videos.now-playing #content .video-list.col3 ul li.title { width: 665px; padding-left:20px; }*/
#videos.now-playing #content .video-list.col3 ul li.title { width: 705px; padding-left:20px; }
#videos.now-playing #content .video-list.col3 ul li.track { width: 175px; padding-left:10px; }
#videos.now-playing #content .video-list.col3 ul li.id,
#videos.now-playing #content .video-list.col3 ul li.platform { width: 100px; padding-left:10px; }
#videos.now-playing #content .video-list { position:relative; }
#videos.now-playing #content .video-list ul li.title { width: 800px; padding-left:20px; }
#videos.now-playing #content .video-list ul li.track { width: 150px; padding-left:10px; }
#videos.now-playing #content .video-list header { display:block; position:absolute; top:-33px; }
#videos.now-playing #content .video-list header.scrolling { display:block; height:33px; }
#videos.now-playing #content .video-list header.scrolling ul { position:fixed; top:-1px; z-index:10; background-image: url('/videos/wwdc/2014/images/videos-hero.jpg'); background-position:bottom; }
#videos.now-playing #content .video-list header ul li { display:inline-block; position:relative; height:32px; line-height:29px; color:#ffffff; font-weight:bold; font-size:.9em; text-shadow:0 1px 1px rgba(0,0,0,0.5); border-top:1px solid rgba(255,255,255,0.3); background-color:rgba(108,108,108,0.6); }
#videos.now-playing #content .video-list header ul li.asc,
#videos.now-playing #content .video-list header ul li.desc { background-color:rgba(108,108,108,0.85); }
#videos.now-playing #content .video-list header ul li .order { display:none; position:absolute; top:12px; right:10px;
	-webkit-transition:all 0.25s;
	-webkit-transform:rotate(-180deg);
}
#videos.now-playing #content .video-list header ul li.asc .order,
#videos.now-playing #content .video-list header ul li.desc .order {
	display:block;
}
#videos.now-playing #content .video-list header ul li.desc .order { -webkit-transform:rotate(0deg); }
#videos.now-playing #content .video-list section li.session { cursor:pointer; }
#videos.now-playing #content .video-list section li.session:nth-child(odd) ul { background-color:#f5f5f5; }
#videos.now-playing #content .video-list section li.session:nth-child(even) ul { background-color:#fbfbfb; }
#videos.now-playing #content .video-list section li.session:hover > ul > li { color:#0088cc; }
#videos.now-playing #content .video-list section li.session > ul { height:43px; line-height:43px; text-shadow:0 1px 1px #ffffff; }
#videos.now-playing #content .video-list section li.session > ul li { display:inline-block; vertical-align:top; -webkit-transition:all 0.25s; }
#videos.now-playing #content .video-list section li.session li.title { font-weight:bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#videos.now-playing #content .video-list section li.session .track,
#videos.now-playing #content .video-list section li.session .platform,
#videos.now-playing #content .video-list section li.session .id { color:#666666; font-size:.85em; }
#videos.now-playing #content .video-list section li.session .details { position:relative; height:0px; overflow:hidden; -webkit-transition:all 0.5s; }
#videos.now-playing #content .video-list section li.session.active .details { height:200px; }
#videos.now-playing #content .video-list section li.session.active .details.playing { height:520px; }
#videos.now-playing #content .video-list section li.session .details > div { position:absolute; top:0px; left:0px; opacity:0; -webkit-transition:all 0.5s, z-index 0s; }
#videos.now-playing #content .video-list section li.session.active > ul li { background-color:#68A6E3; color:#ffffff; text-shadow:0 1px 1px #365E85; }
#videos.now-playing #content .video-list section li.session .details div.active { opacity:1; z-index:5; }
#videos.now-playing #content .video-list section li.session .details .description { padding:30px; vertical-align:top; }
#videos.now-playing #content .video-list section li.session .details .description ul.thumbnail { display:inline-block; position:relative; vertical-align:top; width:200px; height:120px;
	background: #171f21;
	background: -moz-linear-gradient(top,  #171f21 0%, #475a69 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#171f21), color-stop(100%,#475a69));
	background: -webkit-linear-gradient(top,  #171f21 0%,#475a69 100%);
	background: -o-linear-gradient(top,  #171f21 0%,#475a69 100%);
	background: -ms-linear-gradient(top,  #171f21 0%,#475a69 100%);
	background: linear-gradient(to bottom,  #171f21 0%,#475a69 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#171f21', endColorstr='#475a69',GradientType=0 );
	-webkit-border-radius:4px;
	-mox-border-radius:4px;
	border-radius:4px;
	-moz-box-shadow: 0px 3px 3px #aaaaaa;
	-webkit-box-shadow: 0px 3px 3px #aaaaaa;
	box-shadow: 0px 3px 3px #aaaaaa;
}
#videos.now-playing #content .video-list section li.session .details ul.thumbnail li { position:absolute; left:12px; }
#videos.now-playing #content .video-list section li.session .details ul.thumbnail li.thumbnail-title { color:#ffffff; top:32px; font-size:10px; line-height:13px; width:169px; height:39px; overflow:hidden; }
#videos.now-playing #content .video-list section li.session .details ul.thumbnail li.thumbnail-id { color:#a1b6ca; top:75px; font-size:8px; }
#videos.now-playing #content .video-list section li.session .details ul.thumbnail li.thumbnail-play { width:64px; height:64px; top:50%; left:50%; margin-left:-32px; margin-top:-32px; text-indent:-9999px;
	background-image:url(https://devimages.apple.com.edgekey.net/assets/elements/icons/video_play_medium.svg);
	background-position:left top;
	background-repeat:no-repeat;
	background-size:64px;
}
#videos.now-playing #content .video-list section li.session .details ul.thumbnail:hover li.thumbnail-play { background-position:left bottom; }
#videos.now-playing #content .video-list section li.session .details p { display:inline-block; color:#666666; }
#videos.now-playing #content .video-list section li.session .details .description p { width:685px; vertical-align:top; padding-left:30px; }
#videos.now-playing #content .video-list section li.session .details .description p.download { width:200px; text-align:center; padding:10px 0 0 0; font-size:0.85em; position:absolute; top:150px; left:30px; }
#videos.now-playing #content .video-list section li.session .details .error { width:100%; padding-top:60px; vertical-align:middle; text-align:center; }
#videos.now-playing #content .video-list section li.session .details .error h3 { display:inline-block; width:480px; text-align:left; }
#videos.now-playing #content .video-list section li.session .details .error p { display:inline-block; width:480px; text-align:left; }
#videos.now-playing #content .video-list section li.session .details .movie { vertical-align:top; text-align:center; }
#videos.now-playing #content .video-list section li.session .details .movie .moviePanel { display:inline-block; top:20px; left:auto; bottom:auto; right:auto; margin:0px; width:980px !important; }
#videos.now-playing #content .video-list section li.session .details .movie .moviePanel .video { position:relative; }