/* ============================================================
   Responsive overrides for the external (marketing) pages.
   extbase.css / extscreen.css lay everything out at a fixed
   975px. Below 1000px the shell goes fluid, below 760px the
   columns stack, the menu wraps under the logo, and fixed
   width forms, tables and media shrink to the screen.
   ============================================================ */

@media (max-width: 1000px) {
 html, body { overflow-x: hidden; }
 .container, #page, #home { width: auto; max-width: 975px; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
 #content img, .box img { max-width: 100%; height: auto; }
}

@media (max-width: 760px) {
 /**** Header: logo + login on top, menu wraps underneath ****/
 #header { height: auto; padding-bottom: 8px; }
 #logo { width: auto; max-width: calc(100% - 120px); }
 #logo a:link, #logo a:visited, #logo a:active { padding-top: 14px; }
 #logo img { max-width: 100%; height: auto; }
 #login-button { margin-top: 4px; }
 #menu { float: none; clear: both; width: auto; margin: 10px 0 0 0; }
 #menu ul { float: none; text-align: center; }
 #menu ul li { float: none; display: inline-block; padding: 8px 9px; background: none; }

 /**** Home page banner: screenshot goes under the text ****/
 #home { height: auto; }
 .home-banner { padding: 24px 0 72vw 0; background-size: 90% auto; background-position: center bottom; }
 #home-text { width: auto; }
 #home-text p { font-size: 15px; }
 #home-bottom { background-image: none; }
 #home-bottom ul { height: auto; background: none; }
 #home-bottom li { float: none; width: auto; height: auto; background: none; border-bottom: 1px solid #ddd; }
 #home-bottom li.selected { background: #fff; }
 #home-bottom li a:link, #home-bottom li a:visited, #home-bottom li a:active { padding: 12px 4px; }

 /**** Type ****/
 h1 { font-size: 34px; line-height: 38px; }
 h2 { font-size: 18px; margin-bottom: 16px; }
 #content { padding: 24px 0 20px 0; }

 /**** Columns stack ****/
 .column, .testimonial .column-25 { float: none !important; width: auto !important; }
 .testimonial .column-25 { border-left: 0; padding-left: 0; }
 div.logos-box { float: none; }
 .features-box { margin-top: 30px; }
 .features-box p, .logos-box p { margin-bottom: 25px; }
 .box { padding: 12px 14px; }
 .box-signup .column-66 em { padding: 0 0 12px 0; }
 .box-signup .column-33 a { float: none; margin: 0 auto; }

 /**** Footer ****/
 #footer { margin-top: 40px; padding-bottom: 40px; }
 #footer-left, #footer-right { float: none; width: auto; text-align: left; padding: 4px 0; }

 /**** Forms ****/
 .cat_textbox, .cat_dropdown, .cat_listbox,
 .contact-form td .cat_textbox, .contact-form td .cat_textbox-large,
 .contact-form td .cat_listbox, .contact-form td .cat_dropdown,
 .small-textbox, .medium-textbox, .large-textbox, .large-listbox { width: 100%; max-width: 100%; box-sizing: border-box; }
 .contact-form table { width: 100%; }
 .contact-left, .contact-right { float: none; width: auto; padding: 10px 0; border-left: 0; }

 /**** Login / signup popups ****/
 /* fancybox positions from its own measurement, pin it to the screen instead... */
 #fancybox-wrap { left: 8px !important; width: calc(100vw - 16px) !important; box-sizing: border-box; }
 #fancybox-content { width: auto !important; height: auto !important; }
 .dialog-window { padding: 16px; box-sizing: border-box; }
 .dialog-window h2 { font-size: 24px; }
 .dialog-window table, .dialog-window tbody, .dialog-window tr, .dialog-window td { display: block; width: auto !important; }
 .dialog-window td:empty { display: none; }
 .dialog-window .cat_textbox { width: 100%; font-size: 18px; box-sizing: border-box; }

 /**** Pricing: let the plans table scroll sideways ****/
 .plans-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
 .plans-table tr td { padding: 8px 6px; width: auto !important; }
 .plans-table .plan-price { font-size: 28px; }

 /**** Tour video, screenshot gallery, docs: one column ****/
 #tourTable, #tourTable tbody, #tourTable tr, #tourTable td,
 .gallery, .gallery tbody, .gallery tr, .gallery td { display: block; width: auto !important; padding-left: 0 !important; }
 #youtube { width: 100%; height: 56vw; }
 .zoom { display: none; }
 #content table[cellspacing] td { display: block; width: auto !important; }
}