@charset "UTF-8";
/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
/* @import "compass/css3/columns" */
/* @import "compass/css3/hyphenation"; */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Other interesting functions:
@import "compass/utilities/color/contrast";
detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
Used to pass two colors into a get out the most readable color.
Good for situations where we dont want to create a new color,
but be sure that colors from variables are always going to be readable
*/
/* ! ===== Grid ===== */
/*
* Susy: Un-obtrusive grids for designers
* By: Eric A. Meyer and OddBird
* Site: susy.oddbird.net
*
* Would like to remove the dependence on Susy by using a simpler grid structure : J. Hogue
*/
/* Settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.
* We are using Susy 1.0. Update your GEM file by deleting the old and downloading the new.
*/
/* ! ===== Variables ===== */
/* Colors */
/* Confusing, but in some cases, this can be set to a dark color */
/* Python blue */
/* Python yellow */
/* Also used for error messages */
/* Set a generic border color here to keep them consistent */
/* Typography */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Calculate the font-size-adjust of Flux:
* http://www.cs.tut.fi/~jkorpela/x-height.html
* Or, in this case, we did it by hand by comparing Flux to Arial, side by side.
* We then adjusted it further visually, as Flux is more condensed and therefore line-length changes pretty dramatically.
*/
/*
Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin
A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
Note: The line height is relative to the constant $base-line-height.
The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems.
Don’t worry about nested elements etc, Compass will do the maths for you :)
*/
/* Defaults */
/* Positive is down */
/*
* Functional mixins – Items we would like to keep consistent from project to project
*/
/* Turn numbers with units into unitless numbers: https://github.com/nex3/sass/issues/533 */
/* NOTE: Neither of these work on units with decimal points. */
/* Easy little function to do the math of pixel to EM conversion for us. Needs a base-font-size set in _base.scss */
/* Shorthand for a set of useful text/line-height resizing functions. easier to remember... */
/*
* Font-size-adjust: the problem and a solution
* Not widely supported, can't use this yet */
/* Since we can't use the above, let's create our own way to do it. */
/* Quickly apply border styles to elements */
/* Talk of depreciating the Compass mixin, so we pull it in here and make small adjustments */
/* Namespace the box-sizing mixin so we can add support (a polyfill?) for IE7 */
/* Vertical and Horizontal gradient mixins to make things easier. */
/*
* Set all the up-and-coming input text types here for easier reference
* Does not include types that are not meant to be displayed full width, such as:
type=number, type=range, type=date, type=color
* Usage: @include input-text-types() { @content }
*/
/*
* Cross browser @keyframe definition set
* Compass doesn't have one yet, so we namespace this so as not to conflict with a future release
*/
/*
* Cross browser animation definition set
* Compass doesn't have one yet, so we namespace this so as not to conflict with a future release
*
* $timing: linear | ease | ease-in | ease-out | ease-in-out
* $delay: seconds before animation starts
* $count: how many times the animation will loop
* $direction: normal | alternate (Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.)
* $fill-mode: none | forwards | backwards | both
* forwards (The animation’s final keyframe continues to apply after the final iteration of the animation completes)
* backwards (The animation’s initial keyframe is applied as soon as the animation style is applied to an element.
* This only affects animations that have a nonzero value for -webkit-animation-delay)
* both (The animation’s initial keyframe is applied as soon as the animation style is applied to an element,
* and the animation’s final keyframe continues to apply after the final iteration of the animation completes.
* The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay)
*/
/*
* Cross browser method to apply word-breaking and hyphenation (where supported)
* Should be able to use the built-in Compass method, hyphenation(), but the library won't load right now
*/
/* Keep this in all mix-in files if you can. Useful stuff */
/* Manage our preferred reset as a Mix-in instead of relying on Compass or Blueprint */
/* HTML5 Boilerplate Non-semantic helper classes */
/* Add in the HTML5 Boilerplate rules for print (generic). Modify as needed. */
/* ! ===== LOCAL EXTENDABLE STYLES =====
*
* "Local" mixins can be used with the @extend operative.
* If the rule name has a % in front of it, it will not be output as part of the file, only if called with @extend
* Unfortunately, the @extend operative does not work inside a media query or mix-in
*/
/* Color Spaces: use for consistency */
/* Buttons */
/* Other elements */
.container:after,
.row:after,
.listing-company:after,
.list-recent-jobs li:after {
content: "";
display: table;
clear: both; }
/* ! ===== Mixins ===== */
/* An element than can force a line break, to be used inside certain breakpoints on lines of text or bwteen elements */
/* A pointer mix-in. Something to help make little triangles easy. Apply to a :before or :after element */
/* Apply to individual elements when we want to force line breaks. */
/* Base styles for a navigation mixin */
/* Base styles for a navigation with dropdowns mixin */
/* A two-tier, stacked version of the main navigation -- DESKTOP ONLY */
/* A single row of main navigation -- DESKTOP ONLY */
/* ! Slideshows - - - */
/*
// Dynamically added
Library. Student Photographer: Zack Athschuler
// Dynamically added wrapper
*/
/* ! ===== Larger than Medium size, as determined by the site ===== */
/* ! ===== Largest desktop size ===== */
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} */
/* FlexSlider Necessary Styles
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;} */
/* Clearfix for the .slides element
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }*/
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you include js that eliminates this class on page load
.no-js .slides > li:first-child { display: block; } */
/* FlexSlider Default Theme
.flexslider { margin: 0 0 60px; background: $white; border: 4px solid $white; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px} */
/* Direction Nav
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(./?mortyurl=https%3A%2F%2Fwww.python.org%2Fstatic%2Fimg%2Fbg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} */
/* Control Nav
.flex-control-nav {width: 100%; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
.flex-direction-nav .flex-next {opacity: 1; right: 0;}
} */
/* Mixins for media query parts */
/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
/* @import "compass/css3/columns" */
/* @import "compass/css3/hyphenation"; */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Other interesting functions:
@import "compass/utilities/color/contrast";
detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
Used to pass two colors into a get out the most readable color.
Good for situations where we dont want to create a new color,
but be sure that colors from variables are always going to be readable
*/
/* ! ===== Grid ===== */
/*
* Susy: Un-obtrusive grids for designers
* By: Eric A. Meyer and OddBird
* Site: susy.oddbird.net
*
* Would like to remove the dependence on Susy by using a simpler grid structure : J. Hogue
*/
/* Settings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.
* We are using Susy 1.0. Update your GEM file by deleting the old and downloading the new.
*/
/* ! ===== Variables ===== */
/* Colors */
/* Confusing, but in some cases, this can be set to a dark color */
/* Python blue */
/* Python yellow */
/* Also used for error messages */
/* Set a generic border color here to keep them consistent */
/* Typography */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Calculate the font-size-adjust of Flux:
* http://www.cs.tut.fi/~jkorpela/x-height.html
* Or, in this case, we did it by hand by comparing Flux to Arial, side by side.
* We then adjusted it further visually, as Flux is more condensed and therefore line-length changes pretty dramatically.
*/
/*
Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin
A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/
Note: The line height is relative to the constant $base-line-height.
The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems.
Don’t worry about nested elements etc, Compass will do the maths for you :)
*/
/* Defaults */
/* Positive is down */
/*
* Functional mixins – Items we would like to keep consistent from project to project
*/
/* Turn numbers with units into unitless numbers: https://github.com/nex3/sass/issues/533 */
/* NOTE: Neither of these work on units with decimal points. */
/* Easy little function to do the math of pixel to EM conversion for us. Needs a base-font-size set in _base.scss */
/* Shorthand for a set of useful text/line-height resizing functions. easier to remember... */
/*
* Font-size-adjust: the problem and a solution
* Not widely supported, can't use this yet */
/* Since we can't use the above, let's create our own way to do it. */
/* Quickly apply border styles to elements */
/* Talk of depreciating the Compass mixin, so we pull it in here and make small adjustments */
/* Namespace the box-sizing mixin so we can add support (a polyfill?) for IE7 */
/* Vertical and Horizontal gradient mixins to make things easier. */
/*
* Set all the up-and-coming input text types here for easier reference
* Does not include types that are not meant to be displayed full width, such as:
type=number, type=range, type=date, type=color
* Usage: @include input-text-types() { @content }
*/
/*
* Cross browser @keyframe definition set
* Compass doesn't have one yet, so we namespace this so as not to conflict with a future release
*/
/*
* Cross browser animation definition set
* Compass doesn't have one yet, so we namespace this so as not to conflict with a future release
*
* $timing: linear | ease | ease-in | ease-out | ease-in-out
* $delay: seconds before animation starts
* $count: how many times the animation will loop
* $direction: normal | alternate (Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.)
* $fill-mode: none | forwards | backwards | both
* forwards (The animation’s final keyframe continues to apply after the final iteration of the animation completes)
* backwards (The animation’s initial keyframe is applied as soon as the animation style is applied to an element.
* This only affects animations that have a nonzero value for -webkit-animation-delay)
* both (The animation’s initial keyframe is applied as soon as the animation style is applied to an element,
* and the animation’s final keyframe continues to apply after the final iteration of the animation completes.
* The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay)
*/
/*
* Cross browser method to apply word-breaking and hyphenation (where supported)
* Should be able to use the built-in Compass method, hyphenation(), but the library won't load right now
*/
/* Keep this in all mix-in files if you can. Useful stuff */
/* Manage our preferred reset as a Mix-in instead of relying on Compass or Blueprint */
/* HTML5 Boilerplate Non-semantic helper classes */
/* Add in the HTML5 Boilerplate rules for print (generic). Modify as needed. */
/* ! ===== LOCAL EXTENDABLE STYLES =====
*
* "Local" mixins can be used with the @extend operative.
* If the rule name has a % in front of it, it will not be output as part of the file, only if called with @extend
* Unfortunately, the @extend operative does not work inside a media query or mix-in
*/
/* Color Spaces: use for consistency */
/* Buttons */
/* Other elements */
.container:after,
.row:after,
.listing-company:after,
.list-recent-jobs li:after {
content: "";
display: table;
clear: both; }
/* ! ===== Mixins ===== */
/* An element than can force a line break, to be used inside certain breakpoints on lines of text or bwteen elements */
/* A pointer mix-in. Something to help make little triangles easy. Apply to a :before or :after element */
/* Apply to individual elements when we want to force line breaks. */
/* Base styles for a navigation mixin */
/* Base styles for a navigation with dropdowns mixin */
/* A two-tier, stacked version of the main navigation -- DESKTOP ONLY */
/* A single row of main navigation -- DESKTOP ONLY */
/*
* ! ===== START Media Queries =====
*
* Define media queries here as mix-ins. Deliver the ones we want inside of complete mqs in mq.scss
*
* Column structure =
*
* Susy mix-ins with examples:
* @include span-columns(3 omega, 12);
* @include omega;
* @include prefix(3); 3 columns of padding before
* @include suffix(3); 3 columns of padding after
* @include pad(3,3); 3 columns of padding on each side
* @include pre(3); 3 columns of margin before
* @include post(3); 3 columns of margin after
* @include squish(3,3); 3 columns of margin on each side
* @include pull(2); Uses negative margin to pull an element out of the flow
* columns(2); raw math for 2 cols of width and any gutters contained within
* gutter(6); raw math for gutter width
*/
/* ! ===== Smaller than 400px ===== */
/* ! ===== Larger than 400px ===== */
/* ! ===== Smaller than 480px - Baby ===== */
/* ! ===== Larger than 480px - Tiny ===== */
/* ! ===== Larger than 520px - Smaller ===== */
/* ! ===== Larger than 640px - Small ===== */
/* ! ===== Larger than 800px - Medium ===== */
/* ! ===== Larger than 940px - Large ===== */
/* ! ===== Larger than 1024px - ExtraLarge ===== */
/* ! ===== Larger than 1200px - Supersize ===== */
/*
* We "label" the body with strings that correspond to js functions that we want to fire.
* A window.resize() event checks this label and functions fire when conditions are met
*
* The nice part is, these labels can be strings with more than one item in them.
* As many JS functions that we want to fire at different widths can be controlled with tese labels.
*/
/* - - - Smaller than 400px - - - */
@media (max-width: 24.9375em) {
.search-field:focus {
width: 9em; } }
/* - - - Smaller than 480px - - - */
@media (max-width: 30em) {
body:after {
content: "animatebody";
display: none;
speak: none; }
.tier-1 {
position: static !important; }
.slideshow {
display: none; } }
/* - - - Larger than 400px - - - */
@media (min-width: 25em) {
body:after {
content: "animatebody";
display: none;
speak: none; }
.introduction {
font-size: 1.3125em; }
.content-wrapper .container {
padding: 1em 1.5em; }
.shrubbery .give-me-more {
display: block; }
.widget-title .prompt,
.listing-company .prompt {
display: inline; } }
/* - - - Larger than 480px - - - */
@media (min-width: 30em) {
body:after {
content: "animatebody";
display: none;
speak: none; }
.options-bar .breaker {
display: none; }
.adjust-font-size {
border-left: 1px solid #2d3e4d; }
.search-the-site {
border-right: 1px solid #070a0c; } }
/* - - - Larger than 520px - - - */
@media (min-width: 32.5em) {
body:after {
content: "animatebody";
display: none;
speak: none; }
body {
text-rendering: optimizeLegibility;
/* @include transition( all .3s ease-in-out ); makes the media query changes animate */ }
/* Simple Column Structure */
.col-row .column {
float: left; }
.two-col, .four-col {
/* Only works if we are using all single .column, not .double-col as well */ }
.two-col > .column, .four-col > .column {
width: 50%; }
.two-col > .double-col, .four-col > .double-col {
width: 100%; }
.two-col > div:nth-of-type(2n+3), .four-col > div:nth-of-type(2n+3) {
clear: left; }
.meta-navigation,
.main-header,
.main-navigation,
.content-wrapper,
.main-footer {
/* These elements are full width */
clear: both; }
.container {
max-width: 75em;
width: 100%;
margin: 0 auto;
padding: 0; }
.introduction {
font-size: 1.5em; }
.success-stories-widget blockquote {
font-size: 1.125em;
padding: 1em 1.4em 1.3em; }
input[type="submit"],
input[type="reset"],
button,
.button,
a.button {
display: inline-block;
vertical-align: baseline;
width: auto; }
.search-field:focus {
width: 8em; } }
/* - - - Larger than 640px, less that 940px - - - */
@media (min-width: 39.9375em) and (max-width: 58.75em) {
body:after {
content: "drawer_navigation";
display: none;
speak: none; }
.main-navigation {
/* Include the mixins to start our horizontal nav
* Don't wrap this in a .touch or .no-touch, as it has those selectors already inside
*/
text-align: center;
overflow: visible;
/*ul*/
/*li*/
/*li*/
/*ul*/ }
.main-navigation .menu {
margin-bottom: 0; }
.main-navigation .tier-1, .main-navigation .tier-2 {
/* We do this more explictly (the descendant selector) to avoid also styling links in the Supernav content */ }
.main-navigation .tier-1 > a, .main-navigation .tier-2 > a {
display: block;
padding: .5em 1.5em .4em 1em;
position: relative; }
.main-navigation .tier-1 {
display: block;
width: 100%; }
.main-navigation .tier-1 > a {
text-align: center; }
.main-navigation .tier-2 > a {
text-align: left; }
.main-navigation .menu:after {
content: "";
display: table;
clear: both; }
.main-navigation .tier-1 {
position: relative; }
.main-navigation .subnav {
position: absolute;
z-index: 100;
text-align: left;
/*modernizr*/
/*modernizr*/ }
.no-touch .main-navigation .subnav {
min-width: 100%;
display: none;
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-o-transition: all 0s ease;
transition: all 0s ease; }
.touch .main-navigation .subnav {
top: 120%;
display: none;
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-webkit-box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.6);
box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.6); }
.touch .main-navigation .subnav:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 0.75em;
top: -1.45em;
display: block; }
.no-touch .main-navigation .element-1:hover .subnav, .no-touch .main-navigation .element-1:focus .subnav, .no-touch .main-navigation .element-2:hover .subnav, .no-touch .main-navigation .element-2:focus .subnav, .no-touch .main-navigation .element-3:hover .subnav, .no-touch .main-navigation .element-3:focus .subnav, .no-touch .main-navigation .element-4:hover .subnav, .no-touch .main-navigation .element-4:focus .subnav {
left: 0;
display: initial;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s; }
.no-touch .main-navigation .element-5:hover .subnav, .no-touch .main-navigation .element-5:focus .subnav, .no-touch .main-navigation .element-6:hover .subnav, .no-touch .main-navigation .element-6:focus .subnav, .no-touch .main-navigation .element-7:hover .subnav, .no-touch .main-navigation .element-7:focus .subnav, .no-touch .main-navigation .element-8:hover .subnav, .no-touch .main-navigation .element-8:focus .subnav, .no-touch .main-navigation .last:hover .subnav, .no-touch .main-navigation .last:focus .subnav {
right: 0;
display: initial;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s; }
.touch .main-navigation .element-1, .touch .main-navigation .element-2, .touch .main-navigation .element-3, .touch .main-navigation .element-4 {
/* Position the pointer element */ }
.touch .main-navigation .element-1:hover .subnav, .touch .main-navigation .element-1 .subnav.touched, .touch .main-navigation .element-2:hover .subnav, .touch .main-navigation .element-2 .subnav.touched, .touch .main-navigation .element-3:hover .subnav, .touch .main-navigation .element-3 .subnav.touched, .touch .main-navigation .element-4:hover .subnav, .touch .main-navigation .element-4 .subnav.touched {
display: block;
opacity: 1;
left: 0; }
.touch .main-navigation .element-1 .subnav:before, .touch .main-navigation .element-2 .subnav:before, .touch .main-navigation .element-3 .subnav:before, .touch .main-navigation .element-4 .subnav:before {
left: 1.5em; }
.touch .main-navigation .element-5, .touch .main-navigation .element-6, .touch .main-navigation .element-7, .touch .main-navigation .element-8, .touch .main-navigation .last {
/* Position the pointer element */ }
.touch .main-navigation .element-5:hover .subnav, .touch .main-navigation .element-5 .subnav.touched, .touch .main-navigation .element-6:hover .subnav, .touch .main-navigation .element-6 .subnav.touched, .touch .main-navigation .element-7:hover .subnav, .touch .main-navigation .element-7 .subnav.touched, .touch .main-navigation .element-8:hover .subnav, .touch .main-navigation .element-8 .subnav.touched, .touch .main-navigation .last:hover .subnav, .touch .main-navigation .last .subnav.touched {
display: block;
opacity: 1;
right: 0; }
.touch .main-navigation .element-5 .subnav:before, .touch .main-navigation .element-6 .subnav:before, .touch .main-navigation .element-7 .subnav:before, .touch .main-navigation .element-8 .subnav:before, .touch .main-navigation .last .subnav:before {
left: auto;
right: 1.5em; }
.main-navigation .tier-2 {
display: block;
min-width: 100%; }
.main-navigation .tier-2 a {
white-space: nowrap; }
.no-touch .main-navigation {
display: block;
clear: both;
text-align: center;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.no-touch .main-navigation .tier-1 {
float: left;
width: 33.333333%; }
.no-touch .main-navigation .tier-1.element-6:not(.unstacked), .no-touch .main-navigation .tier-1.element-7:not(.unstacked) {
width: 16.6666665%; }
.no-touch .main-navigation .tier-1.element-1 {
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px; }
.no-touch .main-navigation .tier-1.element-1 > a {
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px; }
.no-touch .main-navigation .tier-1.element-3 {
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
border-right: 0; }
.no-touch .main-navigation .tier-1.element-3 > a {
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
border-right: 0; }
.no-touch .main-navigation .tier-1.element-7 {
/* @include border-bottom-right-radius( 8px ); */
border-right: 0; }
.no-touch .main-navigation .tier-2 {
font-size: 0.875em; }
.no-touch .main-navigation .tier-2 > a {
border-right: 1px solid rgba(255, 255, 255, 0.8); }
.no-touch .main-navigation .subnav {
-webkit-box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.3);
box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.3); }
/* Shorten the amount of blue space under the nav on inner pages */
.no-touch .default-page .main-navigation {
position: relative;
margin-bottom: -.0625em; } }
/* - - - Larger than 640px - - - */
@media (min-width: 40em) {
body:after {
content: "drawer_navigation";
display: none;
speak: none; }
/* The order in which we include these is important */
/*
! Because "touch" is present, we assume that the browser can handle cssTransform3d and cssTransition, which might be dangerous
! If there is no javascript running, than the .jump-to-menu link will jump to #site-map (footer) and the .main-navigatin will remain offscreen, which is not such a bad fallback.
*/
.touch body, .touch #touchnav-wrapper {
position: relative;
width: 100%; }
.touch .default-page .main-header {
position: static; }
.touch .main-navigation {
display: block;
position: absolute;
top: 0;
left: -260px;
width: 260px;
height: 100%;
overflow: scroll;
/* styles that are not being applied because they are inside .no-touch in other nav patterns */
text-align: center;
font-size: 1.125em;
/* Reset some styles from the drop down menus */ }
.touch .main-navigation a {
text-align: center;
padding: .65em 1.25em .55em; }
.touch .main-navigation .tier-2 {
font-size: 0.875em; }
.touch .main-navigation .subnav {
position: static;
display: block;
opacity: 1;
border-top: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
/* TO DO: With Javascript, look for a left-right swipe action and also trigger the menu to open */
.touch #touchnav-wrapper {
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
-o-transition: -o-transform 300ms ease;
transition: transform 300ms ease;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden; }
.touch .show-sidemenu #touchnav-wrapper {
-webkit-transform: translate3d(260px, 0, 0);
-moz-transform: translate3d(260px, 0, 0);
-ms-transform: translate3d(260px, 0, 0);
-o-transform: translate3d(260px, 0, 0);
transform: translate3d(260px, 0, 0); }
/* Simple Column Structure */
.three-col {
/* Only works if we are using all single .column, not .double-col as well */ }
.three-col > .column {
width: 33.3333%; }
.three-col > .double-col {
width: 66.6666%; }
.three-col > div:nth-of-type(3n+4) {
clear: left; }
.meta-navigation {
text-align: left; }
.meta-navigation .say-no-more {
display: none;
visibility: hidden; }
.meta-navigation .jump-link {
display: none; }
.meta-navigation li {
float: left;
width: 16.6666667%;
/* 6 columns */
border-left: 1px solid #273643;
border-right: 1px solid #11171d; }
.site-headline {
float: left; }
.options-bar-container {
float: right; }
.donate-button {
display: inline;
margin: 0 0.5em 0 0;
position: relative;
top: 19px; }
.options-bar {
float: right;
width: auto; }
.main-navigation {
/*modernizr*/ }
.touch .main-navigation .subnav:before {
border-color: transparent; }
.search-field {
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out; }
.search-field:focus {
width: 6em;
margin-right: .5em; }
/*modernizr*/
.no-touch .search-button {
display: inline; }
.slide-copy p {
font-size: 1em; }
.introduction {
padding: 0 1.5em; }
.call-to-action {
font-size: 1.5em; }
.fontface .call-to-action {
font-size: 1.725em; }
.fontface .call-to-action span:before {
font-size: .875em; }
/* Header-banners (not home) */
.header-banner {
padding: 1em; }
.home .header-banner, .default-page .header-banner {
padding: 0; }
.about-banner,
.download-for-current-os,
.documentation-banner,
.welcome-to-the-foundation {
padding-left: 8.51064%;
padding-right: 8.51064%; }
.main-header {
/* Shorten the amount of blue space under the nav on inner pages */ }
.default-page .main-header {
position: relative;
z-index: 10; }
/*li*/
.with-supernav .super-navigation {
display: none; }
/*
* This is super cool. Uses two arrays to spit out a bunch of repetitive rulesets.
* Associative array example borrowed from https://github.com/nex3/sass/issues/132#issuecomment-4335097
*/
.python-navigation {
background-color: #2d618c;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #3776ab), color-stop(95%, #2d618c));
background-image: -webkit-linear-gradient(#3776ab 30%, #2d618c 95%);
background-image: -moz-linear-gradient(#3776ab 30%, #2d618c 95%);
background-image: -o-linear-gradient(#3776ab 30%, #2d618c 95%);
background-image: linear-gradient(#3776ab 30%, #2d618c 95%);
border-top: 1px solid #629ccd;
border-bottom: 1px solid #18334b;
/*a*/ }
.python-navigation .tier-1 {
border-top: 1px solid #4f90c6;
border-right: 1px solid #2b5b84;
border-bottom: 1px solid #1e415e;
border-left: 1px solid #4f90c6; }
.python-navigation .tier-1 > a {
color: #e6e8ea;
background-color: transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
letter-spacing: 0.01em; }
.python-navigation .tier-1 > a:hover, .python-navigation .tier-1 > a:focus, .python-navigation .tier-1 > a .tier-1:hover > a {
color: white;
background-color: #2d618c;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #326b9c), color-stop(90%, #2d618c));
background-image: -webkit-linear-gradient(#326b9c 10%, #2d618c 90%);
background-image: -moz-linear-gradient(#326b9c 10%, #2d618c 90%);
background-image: -o-linear-gradient(#326b9c 10%, #2d618c 90%);
background-image: linear-gradient(#326b9c 10%, #2d618c 90%);
border-top: 1px solid #3776ab;
border-bottom: 1px solid #2d618c; }
.python-navigation .subnav {
border-top: 1px solid #18334b;
background-color: #d6e5f2;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #bbd4e9), color-stop(90%, #d6e5f2));
background-image: -webkit-linear-gradient(#bbd4e9 10%, #d6e5f2 90%);
background-image: -moz-linear-gradient(#bbd4e9 10%, #d6e5f2 90%);
background-image: -o-linear-gradient(#bbd4e9 10%, #d6e5f2 90%);
background-image: linear-gradient(#bbd4e9 10%, #d6e5f2 90%);
-webkit-box-shadow: inset 0 0 20px rgba(55, 118, 171, 0.15);
-moz-box-shadow: inset 0 0 20px rgba(55, 118, 171, 0.15);
box-shadow: inset 0 0 20px rgba(55, 118, 171, 0.15);
/*modernizr*/ }
.touch .python-navigation .subnav:before {
border-color: transparent transparent #bbd4e9 transparent; }
.python-navigation .tier-2 > a {
color: rgba(51, 51, 51, 0.9);
border-top: 1px solid rgba(55, 118, 171, 0.25);
border-bottom: 1px solid transparent; }
.python-navigation .tier-2 > a:hover, .python-navigation .tier-2 > a:focus {
background: rgba(255, 255, 255, 0.35);
color: rgba(34, 34, 34, 0.9); }
.python-navigation .tier-2:last-child > a {
border-bottom: 1px solid rgba(55, 118, 171, 0.25); }
.python-navigation .current_item {
color: white;
background-color: #244e71;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #2b5b84), color-stop(90%, #244e71));
background-image: -webkit-linear-gradient(#2b5b84 10%, #244e71 90%);
background-image: -moz-linear-gradient(#2b5b84 10%, #244e71 90%);
background-image: -o-linear-gradient(#2b5b84 10%, #244e71 90%);
background-image: linear-gradient(#2b5b84 10%, #244e71 90%); }
.python-navigation .super-navigation {
color: #666666;
border: 1px solid #89b4d9;
background-color: #d6e5f2;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #fcfdfe), color-stop(90%, #d6e5f2));
background-image: -webkit-linear-gradient(#fcfdfe 10%, #d6e5f2 90%);
background-image: -moz-linear-gradient(#fcfdfe 10%, #d6e5f2 90%);
background-image: -o-linear-gradient(#fcfdfe 10%, #d6e5f2 90%);
background-image: linear-gradient(#fcfdfe 10%, #d6e5f2 90%); }
.python-navigation .super-navigation a:not(.button) {
color: #3776ab; }
.python-navigation .super-navigation h4 {
color: #316998; }
.psf-navigation {
background-color: #646565;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #78797a), color-stop(95%, #646565));
background-image: -webkit-linear-gradient(#78797a 30%, #646565 95%);
background-image: -moz-linear-gradient(#78797a 30%, #646565 95%);
background-image: -o-linear-gradient(#78797a 30%, #646565 95%);
background-image: linear-gradient(#78797a 30%, #646565 95%);
border-top: 1px solid #9e9fa0;
border-bottom: 1px solid #39393a;
/*a*/ }
.psf-navigation .tier-1 {
border-top: 1px solid #929393;
border-right: 1px solid #5f5f60;
border-bottom: 1px solid #454647;
border-left: 1px solid #929393; }
.psf-navigation .tier-1 > a {
color: #e6e8ea;
background-color: transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
letter-spacing: 0.01em; }
.psf-navigation .tier-1 > a:hover, .psf-navigation .tier-1 > a:focus, .psf-navigation .tier-1 > a .tier-1:hover > a {
color: white;
background-color: #646565;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #6e6f70), color-stop(90%, #646565));
background-image: -webkit-linear-gradient(#6e6f70 10%, #646565 90%);
background-image: -moz-linear-gradient(#6e6f70 10%, #646565 90%);
background-image: -o-linear-gradient(#6e6f70 10%, #646565 90%);
background-image: linear-gradient(#6e6f70 10%, #646565 90%);
border-top: 1px solid #78797a;
border-bottom: 1px solid #646565; }
.psf-navigation .subnav {
border-top: 1px solid #39393a;
background-color: #ececec;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #dadada), color-stop(90%, #ececec));
background-image: -webkit-linear-gradient(#dadada 10%, #ececec 90%);
background-image: -moz-linear-gradient(#dadada 10%, #ececec 90%);
background-image: -o-linear-gradient(#dadada 10%, #ececec 90%);
background-image: linear-gradient(#dadada 10%, #ececec 90%);
-webkit-box-shadow: inset 0 0 20px rgba(120, 121, 122, 0.15);
-moz-box-shadow: inset 0 0 20px rgba(120, 121, 122, 0.15);
box-shadow: inset 0 0 20px rgba(120, 121, 122, 0.15);
/*modernizr*/ }
.touch .psf-navigation .subnav:before {
border-color: transparent transparent #dadada transparent; }
.psf-navigation .tier-2 > a {
color: rgba(51, 51, 51, 0.9);
border-top: 1px solid rgba(120, 121, 122, 0.25);
border-bottom: 1px solid transparent; }
.psf-navigation .tier-2 > a:hover, .psf-navigation .tier-2 > a:focus {
background: rgba(255, 255, 255, 0.35);
color: rgba(34, 34, 34, 0.9); }
.psf-navigation .tier-2:last-child > a {
border-bottom: 1px solid rgba(120, 121, 122, 0.25); }
.psf-navigation .current_item {
color: white;
background-color: #525353;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #5f5f60), color-stop(90%, #525353));
background-image: -webkit-linear-gradient(#5f5f60 10%, #525353 90%);
background-image: -moz-linear-gradient(#5f5f60 10%, #525353 90%);
background-image: -o-linear-gradient(#5f5f60 10%, #525353 90%);
background-image: linear-gradient(#5f5f60 10%, #525353 90%); }
.psf-navigation .super-navigation {
color: #666666;
border: 1px solid #b8b9b9;
background-color: #ececec;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffffff), color-stop(90%, #ececec));
background-image: -webkit-linear-gradient(#ffffff 10%, #ececec 90%);
background-image: -moz-linear-gradient(#ffffff 10%, #ececec 90%);
background-image: -o-linear-gradient(#ffffff 10%, #ececec 90%);
background-image: linear-gradient(#ffffff 10%, #ececec 90%); }
.psf-navigation .super-navigation a:not(.button) {
color: #78797a; }
.psf-navigation .super-navigation h4 {
color: #6b6c6d; }
.docs-navigation {
background-color: #ffc91a;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ffd343), color-stop(95%, #ffc91a));
background-image: -webkit-linear-gradient(#ffd343 30%, #ffc91a 95%);
background-image: -moz-linear-gradient(#ffd343 30%, #ffc91a 95%);
background-image: -o-linear-gradient(#ffd343 30%, #ffc91a 95%);
background-image: linear-gradient(#ffd343 30%, #ffc91a 95%);
border-top: 1px solid #ffe58f;
border-bottom: 1px solid #c39500;
/*a*/ }
.docs-navigation .tier-1 {
border-top: 1px solid #ffdf76;
border-right: 1px solid #ffc710;
border-bottom: 1px solid #dca900;
border-left: 1px solid #ffdf76; }
.docs-navigation .tier-1 > a {
color: #333333;
background-color: transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
letter-spacing: 0.01em; }
.docs-navigation .tier-1 > a:hover, .docs-navigation .tier-1 > a:focus, .docs-navigation .tier-1 > a .tier-1:hover > a {
color: white;
background-color: #ffc91a;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffce2f), color-stop(90%, #ffc91a));
background-image: -webkit-linear-gradient(#ffce2f 10%, #ffc91a 90%);
background-image: -moz-linear-gradient(#ffce2f 10%, #ffc91a 90%);
background-image: -o-linear-gradient(#ffce2f 10%, #ffc91a 90%);
background-image: linear-gradient(#ffce2f 10%, #ffc91a 90%);
border-top: 1px solid #ffd343;
border-bottom: 1px solid #ffc91a; }
.docs-navigation .subnav {
border-top: 1px solid #c39500;
background-color: white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffffff), color-stop(90%, #ffffff));
background-image: -webkit-linear-gradient(#ffffff 10%, #ffffff 90%);
background-image: -moz-linear-gradient(#ffffff 10%, #ffffff 90%);
background-image: -o-linear-gradient(#ffffff 10%, #ffffff 90%);
background-image: linear-gradient(#ffffff 10%, #ffffff 90%);
-webkit-box-shadow: inset 0 0 20px rgba(255, 211, 67, 0.15);
-moz-box-shadow: inset 0 0 20px rgba(255, 211, 67, 0.15);
box-shadow: inset 0 0 20px rgba(255, 211, 67, 0.15);
/*modernizr*/ }
.touch .docs-navigation .subnav:before {
border-color: transparent transparent white transparent; }
.docs-navigation .tier-2 > a {
color: rgba(51, 51, 51, 0.9);
border-top: 1px solid rgba(255, 211, 67, 0.25);
border-bottom: 1px solid transparent; }
.docs-navigation .tier-2 > a:hover, .docs-navigation .tier-2 > a:focus {
background: rgba(255, 255, 255, 0.35);
color: rgba(34, 34, 34, 0.9); }
.docs-navigation .tier-2:last-child > a {
border-bottom: 1px solid rgba(255, 211, 67, 0.25); }
.docs-navigation .current_item {
color: white;
background-color: #f5bc00;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffc710), color-stop(90%, #f5bc00));
background-image: -webkit-linear-gradient(#ffc710 10%, #f5bc00 90%);
background-image: -moz-linear-gradient(#ffc710 10%, #f5bc00 90%);
background-image: -o-linear-gradient(#ffc710 10%, #f5bc00 90%);
background-image: linear-gradient(#ffc710 10%, #f5bc00 90%); }
.docs-navigation .super-navigation {
color: #666666;
border: 1px solid #fff1c2;
background-color: white;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffffff), color-stop(90%, #ffffff));
background-image: -webkit-linear-gradient(#ffffff 10%, #ffffff 90%);
background-image: -moz-linear-gradient(#ffffff 10%, #ffffff 90%);
background-image: -o-linear-gradient(#ffffff 10%, #ffffff 90%);
background-image: linear-gradient(#ffffff 10%, #ffffff 90%); }
.docs-navigation .super-navigation a:not(.button) {
color: #ffd343; }
.docs-navigation .super-navigation h4 {
color: #ffcd29; }
.pypl-navigation {
background-color: #6c9238;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #82b043), color-stop(95%, #6c9238));
background-image: -webkit-linear-gradient(#82b043 30%, #6c9238 95%);
background-image: -moz-linear-gradient(#82b043 30%, #6c9238 95%);
background-image: -o-linear-gradient(#82b043 30%, #6c9238 95%);
background-image: linear-gradient(#82b043 30%, #6c9238 95%);
border-top: 1px solid #a6ca75;
border-bottom: 1px solid #3e5420;
/*a*/ }
.pypl-navigation .tier-1 {
border-top: 1px solid #9bc363;
border-right: 1px solid #678b35;
border-bottom: 1px solid #4b6627;
border-left: 1px solid #9bc363; }
.pypl-navigation .tier-1 > a {
color: #e6e8ea;
background-color: transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
letter-spacing: 0.01em; }
.pypl-navigation .tier-1 > a:hover, .pypl-navigation .tier-1 > a:focus, .pypl-navigation .tier-1 > a .tier-1:hover > a {
color: white;
background-color: #6c9238;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #77a13d), color-stop(90%, #6c9238));
background-image: -webkit-linear-gradient(#77a13d 10%, #6c9238 90%);
background-image: -moz-linear-gradient(#77a13d 10%, #6c9238 90%);
background-image: -o-linear-gradient(#77a13d 10%, #6c9238 90%);
background-image: linear-gradient(#77a13d 10%, #6c9238 90%);
border-top: 1px solid #82b043;
border-bottom: 1px solid #6c9238; }
.pypl-navigation .subnav {
border-top: 1px solid #3e5420;
background-color: #eef5e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ddebca), color-stop(90%, #eef5e4));
background-image: -webkit-linear-gradient(#ddebca 10%, #eef5e4 90%);
background-image: -moz-linear-gradient(#ddebca 10%, #eef5e4 90%);
background-image: -o-linear-gradient(#ddebca 10%, #eef5e4 90%);
background-image: linear-gradient(#ddebca 10%, #eef5e4 90%);
-webkit-box-shadow: inset 0 0 20px rgba(130, 176, 67, 0.15);
-moz-box-shadow: inset 0 0 20px rgba(130, 176, 67, 0.15);
box-shadow: inset 0 0 20px rgba(130, 176, 67, 0.15);
/*modernizr*/ }
.touch .pypl-navigation .subnav:before {
border-color: transparent transparent #ddebca transparent; }
.pypl-navigation .tier-2 > a {
color: rgba(51, 51, 51, 0.9);
border-top: 1px solid rgba(130, 176, 67, 0.25);
border-bottom: 1px solid transparent; }
.pypl-navigation .tier-2 > a:hover, .pypl-navigation .tier-2 > a:focus {
background: rgba(255, 255, 255, 0.35);
color: rgba(34, 34, 34, 0.9); }
.pypl-navigation .tier-2:last-child > a {
border-bottom: 1px solid rgba(130, 176, 67, 0.25); }
.pypl-navigation .current_item {
color: white;
background-color: #59792e;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #678b35), color-stop(90%, #59792e));
background-image: -webkit-linear-gradient(#678b35 10%, #59792e 90%);
background-image: -moz-linear-gradient(#678b35 10%, #59792e 90%);
background-image: -o-linear-gradient(#678b35 10%, #59792e 90%);
background-image: linear-gradient(#678b35 10%, #59792e 90%); }
.pypl-navigation .super-navigation {
color: #666666;
border: 1px solid #bed99a;
background-color: #eef5e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffffff), color-stop(90%, #eef5e4));
background-image: -webkit-linear-gradient(#ffffff 10%, #eef5e4 90%);
background-image: -moz-linear-gradient(#ffffff 10%, #eef5e4 90%);
background-image: -o-linear-gradient(#ffffff 10%, #eef5e4 90%);
background-image: linear-gradient(#ffffff 10%, #eef5e4 90%); }
.pypl-navigation .super-navigation a:not(.button) {
color: #82b043; }
.pypl-navigation .super-navigation h4 {
color: #749e3c; }
.jobs-navigation {
background-color: #8b5792;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #a06ba7), color-stop(95%, #8b5792));
background-image: -webkit-linear-gradient(#a06ba7 30%, #8b5792 95%);
background-image: -moz-linear-gradient(#a06ba7 30%, #8b5792 95%);
background-image: -o-linear-gradient(#a06ba7 30%, #8b5792 95%);
background-image: linear-gradient(#a06ba7 30%, #8b5792 95%);
border-top: 1px solid #bf9bc4;
border-bottom: 1px solid #58375c;
/*a*/ }
.jobs-navigation .tier-1 {
border-top: 1px solid #b58bba;
border-right: 1px solid #85538c;
border-bottom: 1px solid #67406c;
border-left: 1px solid #b58bba; }
.jobs-navigation .tier-1 > a {
color: #e6e8ea;
background-color: transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
letter-spacing: 0.01em; }
.jobs-navigation .tier-1 > a:hover, .jobs-navigation .tier-1 > a:focus, .jobs-navigation .tier-1 > a .tier-1:hover > a {
color: white;
background-color: #8b5792;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #985f9f), color-stop(90%, #8b5792));
background-image: -webkit-linear-gradient(#985f9f 10%, #8b5792 90%);
background-image: -moz-linear-gradient(#985f9f 10%, #8b5792 90%);
background-image: -o-linear-gradient(#985f9f 10%, #8b5792 90%);
background-image: linear-gradient(#985f9f 10%, #8b5792 90%);
border-top: 1px solid #a06ba7;
border-bottom: 1px solid #8b5792; }
.jobs-navigation .subnav {
border-top: 1px solid #58375c;
background-color: #fcfbfd;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #eee5ef), color-stop(90%, #fcfbfd));
background-image: -webkit-linear-gradient(#eee5ef 10%, #fcfbfd 90%);
background-image: -moz-linear-gradient(#eee5ef 10%, #fcfbfd 90%);
background-image: -o-linear-gradient(#eee5ef 10%, #fcfbfd 90%);
background-image: linear-gradient(#eee5ef 10%, #fcfbfd 90%);
-webkit-box-shadow: inset 0 0 20px rgba(160, 107, 167, 0.15);
-moz-box-shadow: inset 0 0 20px rgba(160, 107, 167, 0.15);
box-shadow: inset 0 0 20px rgba(160, 107, 167, 0.15);
/*modernizr*/ }
.touch .jobs-navigation .subnav:before {
border-color: transparent transparent #eee5ef transparent; }
.jobs-navigation .tier-2 > a {
color: rgba(51, 51, 51, 0.9);
border-top: 1px solid rgba(160, 107, 167, 0.25);
border-bottom: 1px solid transparent; }
.jobs-navigation .tier-2 > a:hover, .jobs-navigation .tier-2 > a:focus {
background: rgba(255, 255, 255, 0.35);
color: rgba(34, 34, 34, 0.9); }
.jobs-navigation .tier-2:last-child > a {
border-bottom: 1px solid rgba(160, 107, 167, 0.25); }
.jobs-navigation .current_item {
color: white;
background-color: #764a7c;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #85538c), color-stop(90%, #764a7c));
background-image: -webkit-linear-gradient(#85538c 10%, #764a7c 90%);
background-image: -moz-linear-gradient(#85538c 10%, #764a7c 90%);
background-image: -o-linear-gradient(#85538c 10%, #764a7c 90%);
background-image: linear-gradient(#85538c 10%, #764a7c 90%); }
.jobs-navigation .super-navigation {
color: #666666;
border: 1px solid #d3bbd7;
background-color: #fcfbfd;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffffff), color-stop(90%, #fcfbfd));
background-image: -webkit-linear-gradient(#ffffff 10%, #fcfbfd 90%);
background-image: -moz-linear-gradient(#ffffff 10%, #fcfbfd 90%);
background-image: -o-linear-gradient(#ffffff 10%, #fcfbfd 90%);
background-image: linear-gradient(#ffffff 10%, #fcfbfd 90%); }
.jobs-navigation .super-navigation a:not(.button) {
color: #a06ba7; }
.jobs-navigation .super-navigation h4 {
color: #945d9c; }
.shop-navigation {
background-color: #9e4650;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #b55863), color-stop(95%, #9e4650));
background-image: -webkit-linear-gradient(#b55863 30%, #9e4650 95%);
background-image: -moz-linear-gradient(#b55863 30%, #9e4650 95%);
background-image: -o-linear-gradient(#b55863 30%, #9e4650 95%);
background-image: linear-gradient(#b55863 30%, #9e4650 95%);
border-top: 1px solid #cc8d95;
border-bottom: 1px solid #622b32;
/*a*/ }
.shop-navigation .tier-1 {
border-top: 1px solid #c57b84;
border-right: 1px solid #97434d;
border-bottom: 1px solid #74333b;
border-left: 1px solid #c57b84; }
.shop-navigation .tier-1 > a {
color: #e6e8ea;
background-color: transparent;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
letter-spacing: 0.01em; }
.shop-navigation .tier-1 > a:hover, .shop-navigation .tier-1 > a:focus, .shop-navigation .tier-1 > a .tier-1:hover > a {
color: white;
background-color: #9e4650;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ac4c58), color-stop(90%, #9e4650));
background-image: -webkit-linear-gradient(#ac4c58 10%, #9e4650 90%);
background-image: -moz-linear-gradient(#ac4c58 10%, #9e4650 90%);
background-image: -o-linear-gradient(#ac4c58 10%, #9e4650 90%);
background-image: linear-gradient(#ac4c58 10%, #9e4650 90%);
border-top: 1px solid #b55863;
border-bottom: 1px solid #9e4650; }
.shop-navigation .subnav {
border-top: 1px solid #622b32;
background-color: #fbf7f8;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #f1dee0), color-stop(90%, #fbf7f8));
background-image: -webkit-linear-gradient(#f1dee0 10%, #fbf7f8 90%);
background-image: -moz-linear-gradient(#f1dee0 10%, #fbf7f8 90%);
background-image: -o-linear-gradient(#f1dee0 10%, #fbf7f8 90%);
background-image: linear-gradient(#f1dee0 10%, #fbf7f8 90%);
-webkit-box-shadow: inset 0 0 20px rgba(181, 88, 99, 0.15);
-moz-box-shadow: inset 0 0 20px rgba(181, 88, 99, 0.15);
box-shadow: inset 0 0 20px rgba(181, 88, 99, 0.15);
/*modernizr*/ }
.touch .shop-navigation .subnav:before {
border-color: transparent transparent #f1dee0 transparent; }
.shop-navigation .tier-2 > a {
color: rgba(51, 51, 51, 0.9);
border-top: 1px solid rgba(181, 88, 99, 0.25);
border-bottom: 1px solid transparent; }
.shop-navigation .tier-2 > a:hover, .shop-navigation .tier-2 > a:focus {
background: rgba(255, 255, 255, 0.35);
color: rgba(34, 34, 34, 0.9); }
.shop-navigation .tier-2:last-child > a {
border-bottom: 1px solid rgba(181, 88, 99, 0.25); }
.shop-navigation .current_item {
color: white;
background-color: #853b44;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #97434d), color-stop(90%, #853b44));
background-image: -webkit-linear-gradient(#97434d 10%, #853b44 90%);
background-image: -moz-linear-gradient(#97434d 10%, #853b44 90%);
background-image: -o-linear-gradient(#97434d 10%, #853b44 90%);
background-image: linear-gradient(#97434d 10%, #853b44 90%); }
.shop-navigation .super-navigation {
color: #666666;
border: 1px solid #dcb0b6;
background-color: #fbf7f8;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #ffffff), color-stop(90%, #fbf7f8));
background-image: -webkit-linear-gradient(#ffffff 10%, #fbf7f8 90%);
background-image: -moz-linear-gradient(#ffffff 10%, #fbf7f8 90%);
background-image: -o-linear-gradient(#ffffff 10%, #fbf7f8 90%);
background-image: linear-gradient(#ffffff 10%, #fbf7f8 90%); }
.shop-navigation .super-navigation a:not(.button) {
color: #b55863; }
.shop-navigation .super-navigation h4 {
color: #a94b56; }
/* end @for */
.content-wrapper {
/* Increase the amount of white space under the nav on inner pages */ }
.default-page .content-wrapper {
padding-top: 2em; }
/* Main content with sidebars */
.main-content.with-left-sidebar {
width: 65.95745%;
float: right;
margin-right: 0; }
.main-content.with-right-sidebar {
width: 65.95745%;
float: left;
margin-right: 2.12766%; }
.text {
font-size: 0.9375em; }
/*aside*/
.left-sidebar {
width: 31.91489%;
float: left;
margin-right: 2.12766%;
margin-top: 1em; }
/*aside*/
.right-sidebar {
width: 31.91489%;
float: right;
margin-right: 0; }
.left-sidebar .small-widget, .left-sidebar .medium-widget, .left-sidebar .triple-widget, .right-sidebar .small-widget, .right-sidebar .medium-widget, .right-sidebar .triple-widget {
float: none;
width: auto;
margin-right: auto; }
/* Widgets in main content */
.row {
margin-bottom: 1em; }
.small-widget {
width: 48.93617%;
float: left;
margin-right: 2.12766%; }
.small-widget:nth-child(2), .small-widget.last {
margin-right: 0; }
.triple-widget {
width: 31.91489%;
float: left;
margin-right: 2.12766%; }
.triple-widget.last {
margin-right: 0; }
.most-recent-posts {
width: 74.46809%;
float: left;
margin-right: 2.12766%; }
.psf-widget,
.python-needs-you-widget {
padding: 1.5em 1.75em;
clear: both; }
/* Jobs landing page */
.jobs-intro {
padding-top: 2em;
padding-bottom: 2em; }
.listing-company-category:before {
content: "Category: ";
color: #666666; }
.listing-job-title:before {
content: "Title: ";
color: #666666; }
.listing-job-type:before {
content: "Looking for: ";
color: #666666; }
.release-number,
.release-date,
.release-download,
.release-enhancements {
-moz-box-orient: vertical;
display: inline-block;
margin-right: -4px;
vertical-align: middle; }
.release-number {
width: 20%; }
.release-date {
width: 30%; }
.release-download {
width: 25%; }
.release-enhancements {
width: 25%; }
.release-version,
.release-status,
.release-dl,
.release-start,
.release-end,
.release-pep {
-moz-box-orient: vertical;
display: inline-block;
margin-right: -4px;
vertical-align: middle; }
.release-version {
width: 10%; }
.release-status {
width: 20%; }
.release-dl {
width: 15%; }
.release-start {
width: 20%; }
.release-end {
width: 20%; }
.release-pep {
width: 15%; }
/* Previous Next pattern */
.previous-next {
overflow: hidden; }
.previous-next a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.previous-next .prev-button {
width: 48.93617%;
float: left;
margin-right: 2.12766%; }
.previous-next .next-button {
width: 48.93617%;
float: right;
margin-right: 0; }
/* Footer */
.main-footer .jump-link {
display: none; }
.sitemap .tier-1 {
float: left;
width: 50%;
/* Special case, we want the Events subnav to be up under Blog */ }
.sitemap .tier-1:nth-child(odd) {
clear: left; }
.sitemap .tier-1:nth-child(even) {
border-left: 1px solid #f7f7f8; }
.sitemap .tier-1.element-7 {
clear: none; }
.footer-links {
clear: both;
text-align: center; }
.footer-links li {
display: inline-block; } }
/* - - - Larger than 800px - - - */
@media (min-width: 50em) {
body:after {
content: "drawer_navigation";
display: none;
speak: none; }
.site-headline {
margin: .25em 0 .5em; }
.site-headline a .python-logo {
width: 255.2px;
height: 72.16px; }
.site-headline a .psf-logo {
width: 293.92px;
height: 72.16px; }
.donate-button {
top: 33px; }
.options-bar {
margin: 0.875em 0; }
.search-field {
background: white;
padding: .4em .5em .3em;
margin-right: .5em;
width: 11em; }
.search-field:focus {
width: 13em; }
.home .header-banner {
margin: 0 2em 0 1em; }
.slideshow .slides li {
overflow: hidden; }
.slide-code, .slide-copy {
float: left;
width: 50%;
min-height: 280px; }
.slide-code {
position: relative;
line-height: 1.5; }
.js .launch-shell {
display: block; }
/* Launch Interactive Shell>>> */
.flexslide .launch-shell {
display: block;
position: absolute;
top: 1.25em;
right: 52%;
z-index: 50; }
.flexslide .launch-shell span, .flexslide .launch-shell a {
display: inline-block; }
.flexslide .launch-shell .button {
padding-bottom: .2em; }
.flexslide .launch-shell .button .message {
opacity: 0;
position: absolute;
top: -9999px;
right: 2.6em;
white-space: nowrap;
padding: .4em .75em .35em;
color: #999999;
background-color: #1f1f1f;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #333333), color-stop(90%, #1f1f1f));
background-image: -webkit-linear-gradient(#333333 10%, #1f1f1f 90%);
background-image: -moz-linear-gradient(#333333 10%, #1f1f1f 90%);
background-image: -o-linear-gradient(#333333 10%, #1f1f1f 90%);
background-image: linear-gradient(#333333 10%, #1f1f1f 90%);
border-top: 1px solid #444444;
border-right: 1px solid #444444;
border-bottom: 1px solid #444444;
border-left: 1px solid #444444;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-webkit-transition: opacity 0.25s ease-in-out, top 0s linear;
-webkit-transition-delay: 0s, 0.25s;
-moz-transition: opacity 0.25s ease-in-out, top 0s linear 0.25s;
-o-transition: opacity 0.25s ease-in-out, top 0s linear 0.25s;
transition: opacity 0.25s ease-in-out, top 0s linear 0.25s; }
.flexslide .launch-shell .button:hover .message {
opacity: 1;
top: 0;
-webkit-transition: opacity 0.25s ease-in-out, top 0s linear;
-moz-transition: opacity 0.25s ease-in-out, top 0s linear;
-o-transition: opacity 0.25s ease-in-out, top 0s linear;
transition: opacity 0.25s ease-in-out, top 0s linear; }
.introduction {
text-align: center; }
.introduction .breaker {
display: block;
width: 100%;
height: 1px;
font-size: 1px;
line-height: 1px; }
/* Header-banners */
.main-header .container {
padding-bottom: 0; }
.header-banner {
padding: 0 0 0 1em;
margin: 0 -1em 0 0; }
.about-banner,
.download-for-current-os,
.documentation-banner,
.community-banner {
padding-left: 0%;
padding-right: 51.06383%;
padding-top: 1em; }
.about-banner {
background: 120% 0 no-repeat url("./?mortyurl=https%3A%2F%2Fwww.python.org%2Fstatic%2Fimg%2Flanding-about.e908feec18e7.png%3F1694722768") transparent;
min-height: 345px;
padding-bottom: 3.5em;
margin-bottom: -2.5em; }
.download-for-current-os {
background: 130% 0 no-repeat url("./?mortyurl=https%3A%2F%2Fwww.python.org%2Fstatic%2Fimg%2Flanding-downloads.0f509c33f57f.png%3F1694722768") transparent;
min-height: 345px;
padding-bottom: 4em;
margin-bottom: -3em; }
.documentation-banner {
background: 130% 0 no-repeat url("./?mortyurl=https%3A%2F%2Fwww.python.org%2Fstatic%2Fimg%2Flanding-docs.8af25927be37.png%3F1694722768") transparent;
padding-bottom: 1em; }
.community-banner {
text-align: left;
background: 110% 0 no-repeat url("./?mortyurl=https%3A%2F%2Fwww.python.org%2Fstatic%2Fimg%2Flanding-community.a9c31090c1c1.png%3F1694722768") transparent;
min-height: 345px;
padding-bottom: 2em;
margin-bottom: -1.25em; }
.welcome-to-the-foundation {
padding-top: 2em;
padding-bottom: 2em; }
/* Blog landing page */
/*h2*/
.welcome-message {
text-align: left;
position: absolute;
left: 0;
width: 23.40426%;
margin-top: 0.56875em; }
.latest-blog-post,
.featured-event,
.jobs-intro {
position: relative;
text-align: left;
min-height: 130px; }
.latest-blog-post .call-to-action,
.featured-event .call-to-action,
.jobs-intro .call-to-action {
margin-left: 34.04255%; }
.latest-blog-post .date-posted, .latest-blog-post .event-date,
.featured-event .date-posted,
.featured-event .event-date,
.jobs-intro .date-posted,
.jobs-intro .event-date {
position: absolute;
left: 0;
width: 31.91489%; }
.latest-blog-post .date-posted time,
.featured-event .date-posted time,
.jobs-intro .date-posted time {
position: relative;
top: 30px; }
.latest-blog-post .excerpt,
.featured-event .excerpt,
.jobs-intro .excerpt {
margin-left: 34.04255%; }
/* Main content with sidebars */
.home .content-wrapper .container {
padding-top: 2.5em; }
.main-content.with-left-sidebar {
width: 74.46809%;
float: right;
margin-right: 0; }
.main-content.with-right-sidebar {
width: 74.46809%;
float: left;
margin-right: 2.12766%; }
/*aside*/
.left-sidebar {
width: 23.40426%;
float: left;
margin-right: 2.12766%; }
/*aside*/
.right-sidebar {
width: 23.40426%;
float: right;
margin-right: 0; }
.featured-success-story {
/*blockquote*/ }
.featured-success-story .success-quote:before, .featured-success-story .success-quote:after {
font-size: 2.375em; }
.quote-by, .quote-by-organization {
display: -moz-inline-stack;
display: inline-block;
vertical-align: baseline; }
.quote-by-organization:before {
content: ", ";
margin-left: -.25em; }
.activity-feed {
position: absolute;
right: 0; }
.psf-widget, .python-needs-you-widget {
min-height: 14em;
position: relative; }
.psf-widget .python-logo, .python-needs-you-widget .python-logo {
position: absolute;
top: 0.5em;
right: 1em;
width: 210px;
height: 210px;
background: top left no-repeat url("./?mortyurl=https%3A%2F%2Fwww.python.org%2Fstatic%2Fimg%2Fpython-logo-large.c36dccadd999.png%3F1694722768") transparent; }
.psf-widget .widget-title, .psf-widget p, .python-needs-you-widget .widget-title, .python-needs-you-widget p {
margin-right: 34.04255%; }
.triple-widget {
width: 31.91489%;
float: left;
margin-right: 2.12766%; }
.triple-widget.last {
margin-right: 0; }
/* ! Events landing page */
.list-recent-events .event-title, .list-recent-events p, .list-recent-posts .event-title, .list-recent-posts p {
margin-left: 25.53191%; }
.list-recent-events time, .list-recent-posts time {
position: absolute;
top: .3em;
left: 0;
width: 23.40426%; }
/* Jobs Section */
.list-recent-jobs .listing-company-category a, .list-recent-jobs .listing-job-type a {
white-space: nowrap; }
.list-recent-jobs .listing-posted {
width: 48.93617%;
float: left;
margin-right: 2.12766%;
margin-right: 0; }
.list-recent-jobs .listing-company-category {
width: 48.93617%;
float: right;
margin-right: 0;
text-align: right;
clear: none; }
.list-recent-jobs .listing-actions {
clear: both;
overflow: hidden;
padding-top: 0.9375em;
text-align: right; }
/*h2*/
.listing-company .listing-company-name {
width: 57.44681%;
float: left;
margin-right: 2.12766%; }
.listing-company .listing-company-name a:hover:after, .listing-company .listing-company-name a:focus:after {
color: #666666;
content: " View Details";
font-size: .75em; }
.listing-company .listing-location {
width: 40.42553%;
float: right;
margin-right: 0;
text-align: right; }
.job-meta {
width: 48.93617%;
float: left;
margin-right: 2.12766%;
margin-bottom: 0; }
.job-tags {
width: 48.93617%;
float: right;
margin-right: 0; }
/* Forms that are wide enough to have labels and input fields side by side */
.wide-form ul {
margin-left: 24%; }
.wide-form p {
overflow: hidden;
/* ! This is done the wrong way with SASS. Should be something like #{$form-text-inputs} with $form-text-inputs as a variable */ }
.wide-form p label, .wide-form p textarea {
display: inline-block;
vertical-align: top; }
.wide-form p label {
width: 24%; }
.wide-form p input[type=text], .wide-form p input[type=password], .wide-form p input[type=search], .wide-form p input[type=email], .wide-form p input[type=url], .wide-form p input[type=tel] {
width: 75%;
display: inline-block;
vertical-align: top; }
.wide-form p textarea {
width: 75%; }
.wide-form p button {
margin-left: 24%; }
.wide-form p button + button {
margin-left: 0; }
.jobs-form ul {
margin-top: -3.25em; }
.jobs-form ul:after {
content: "";
display: table;
clear: both; }
.jobs-form ul li {
float: left;
width: 33%; }
.jobs-form ul.errorlist {
/* Reset margin for errorlist so that messages are not drawn over
other labels */
margin-top: 0; }
/* Footer */
.sitemap, .footer-links, .copyright {
font-size: 0.875em; }
.sitemap .tier-1 {
width: 32.97872%;
border-left: 0;
border-right: 0; }
.sitemap .tier-1:nth-child(odd), .sitemap .tier-1:nth-child(even) {
clear: none;
border-left: 0;
border-right: 0; }
.sitemap .tier-1.element-1, .sitemap .tier-1.element-2, .sitemap .tier-1.element-4, .sitemap .tier-1.element-5, .sitemap .tier-1.element-8 {
border-right: 1px solid #d5d6d8; }
.sitemap .tier-1.element-2, .sitemap .tier-1.element-3, .sitemap .tier-1.element-5, .sitemap .tier-1.element-6, .sitemap .tier-1.element-7, .sitemap .tier-1.element-8, .sitemap .tier-1.element-9 {
border-left: 1px solid #f7f7f8; }
.footer-links .say-no-more {
display: inline;
visibility: visible; }
.flex-slideshow.default-slideshow .caption-wrapper {
position: absolute;
top: 1em;
left: 1em;
bottom: 2em;
width: 33%;
padding: .75em;
overflow: hidden;
background: #e6e8ea;
background: rgba(255, 255, 255, 0.75); }
.flex-control-nav {
padding-bottom: 1.5em; } }
/* - - - Larger than 940px - - - */
@media (min-width: 58.75em) {
body:after {
content: "drawer_navigation load_supernavs";
display: none;
speak: none; }
.main-navigation {
/* Include the mixins to start our horizontal nav
* Don't wrap this in a .touch or .no-touch, as it has those selectors already inside
*/
text-align: center;
overflow: visible;
/*ul*/
/*li*/
/*li*/
/*ul*/ }
.main-navigation .menu {
margin-bottom: 0; }
.main-navigation .tier-1, .main-navigation .tier-2 {
/* We do this more explictly (the descendant selector) to avoid also styling links in the Supernav content */ }
.main-navigation .tier-1 > a, .main-navigation .tier-2 > a {
display: block;
padding: .5em 1.5em .4em 1em;
position: relative; }
.main-navigation .tier-1 {
display: block;
width: 100%; }
.main-navigation .tier-1 > a {
text-align: center; }
.main-navigation .tier-2 > a {
text-align: left; }
.main-navigation .menu:after {
content: "";
display: table;
clear: both; }
.main-navigation .tier-1 {
position: relative; }
.main-navigation .subnav {
position: absolute;
z-index: 100;
text-align: left;
/*modernizr*/
/*modernizr*/ }
.no-touch .main-navigation .subnav {
min-width: 100%;
display: none;
-webkit-transition: all 0s ease;
-moz-transition: all 0s ease;
-o-transition: all 0s ease;
transition: all 0s ease; }
.touch .main-navigation .subnav {
top: 120%;
display: none;
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-webkit-box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.6);
box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.6); }
.touch .main-navigation .subnav:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 0.75em;
top: -1.45em;
display: block; }
.no-touch .main-navigation .element-1:hover .subnav, .no-touch .main-navigation .element-1:focus .subnav, .no-touch .main-navigation .element-2:hover .subnav, .no-touch .main-navigation .element-2:focus .subnav, .no-touch .main-navigation .element-3:hover .subnav, .no-touch .main-navigation .element-3:focus .subnav, .no-touch .main-navigation .element-4:hover .subnav, .no-touch .main-navigation .element-4:focus .subnav {
left: 0;
display: initial;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s; }
.no-touch .main-navigation .element-5:hover .subnav, .no-touch .main-navigation .element-5:focus .subnav, .no-touch .main-navigation .element-6:hover .subnav, .no-touch .main-navigation .element-6:focus .subnav, .no-touch .main-navigation .element-7:hover .subnav, .no-touch .main-navigation .element-7:focus .subnav, .no-touch .main-navigation .element-8:hover .subnav, .no-touch .main-navigation .element-8:focus .subnav, .no-touch .main-navigation .last:hover .subnav, .no-touch .main-navigation .last:focus .subnav {
right: 0;
display: initial;
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s; }
.touch .main-navigation .element-1, .touch .main-navigation .element-2, .touch .main-navigation .element-3, .touch .main-navigation .element-4 {
/* Position the pointer element */ }
.touch .main-navigation .element-1:hover .subnav, .touch .main-navigation .element-1 .subnav.touched, .touch .main-navigation .element-2:hover .subnav, .touch .main-navigation .element-2 .subnav.touched, .touch .main-navigation .element-3:hover .subnav, .touch .main-navigation .element-3 .subnav.touched, .touch .main-navigation .element-4:hover .subnav, .touch .main-navigation .element-4 .subnav.touched {
display: block;
opacity: 1;
left: 0; }
.touch .main-navigation .element-1 .subnav:before, .touch .main-navigation .element-2 .subnav:before, .touch .main-navigation .element-3 .subnav:before, .touch .main-navigation .element-4 .subnav:before {
left: 1.5em; }
.touch .main-navigation .element-5, .touch .main-navigation .element-6, .touch .main-navigation .element-7, .touch .main-navigation .element-8, .touch .main-navigation .last {
/* Position the pointer element */ }
.touch .main-navigation .element-5:hover .subnav, .touch .main-navigation .element-5 .subnav.touched, .touch .main-navigation .element-6:hover .subnav, .touch .main-navigation .element-6 .subnav.touched, .touch .main-navigation .element-7:hover .subnav, .touch .main-navigation .element-7 .subnav.touched, .touch .main-navigation .element-8:hover .subnav, .touch .main-navigation .element-8 .subnav.touched, .touch .main-navigation .last:hover .subnav, .touch .main-navigation .last .subnav.touched {
display: block;
opacity: 1;
right: 0; }
.touch .main-navigation .element-5 .subnav:before, .touch .main-navigation .element-6 .subnav:before, .touch .main-navigation .element-7 .subnav:before, .touch .main-navigation .element-8 .subnav:before, .touch .main-navigation .last .subnav:before {
left: auto;
right: 1.5em; }
.main-navigation .tier-2 {
display: block;
min-width: 100%; }
.main-navigation .tier-2 a {
white-space: nowrap; }
.no-touch .main-navigation {
display: block;
text-align: center;
font-size: 1.125em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.no-touch .main-navigation .menu {
text-align: center; }
.no-touch .main-navigation .tier-1 {
float: none;
border-top: 0;
border-bottom: 0;
/* Conside display: table; on the wrapper (ul.main-navigation) to get the centering to work, and to allow floats here */
width: auto;
margin: 0 -5px 0 0;
display: -moz-inline-stack;
display: inline-block;
vertical-align: baseline;
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.1);
/* We've set this explicitly before, so we need to unset it here */ }
.no-touch .main-navigation .tier-1.element-1 {
border-left: 0; }
.no-touch .main-navigation .tier-1.last {
border-right: 0; }
.no-touch .main-navigation .tier-1.element-6, .no-touch .main-navigation .tier-1.element-7 {
width: auto; }
.no-touch .main-navigation .tier-1 > a {
padding: .65em 1.25em .55em; }
.no-touch .main-navigation .tier-2 {
font-size: 0.875em; }
/* Shorten the amount of blue space under the nav on inner pages */
.no-touch .default-page .main-navigation {
position: relative;
margin-bottom: -1.375em; }
/* Simple Column Structure */
.four-col > .column {
width: 25%; }
.four-col > .double-col {
width: 50%; }
.four-col > div:nth-of-type(2n+3) {
clear: none; }
.four-col > div:nth-of-type(4n+5) {
clear: left; }
.site-headline a .python-logo {
width: 290px;
height: 82px; }
.site-headline a .psf-logo {
width: 334px;
height: 82px; }
.search-field {
width: 14em; }
.search-field:focus {
width: 18em;
margin-right: .5em; }
.donate-button {
top: 38px; }
.options-bar {
margin: 1.3125em 0; }
/* Supernavs in main-navigation */
/*
