/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

em { font-style: italic; }


blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */

body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Minimal base styles.
 */

/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
.nav ul, .nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th { font-weight: bold; }
cite { font-style: italic; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button, .ylwBtn { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection{ background: #DE670F; color:#fff; text-shadow: none; }
::selection { background:#DE670F; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #ff6d03; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/**
 * Primary styles
 *
 * Author: The Atom Group
 */


/*
 * TYPEKIT FONTS
 * */

 /* Hide the blog titles while 
  * web fonts are loading */
.wf-loading #header a,
.wf-loading #footer a,
.wf-loading h1, .wf-loading h2, .wf-loading h3,
.wf-loading h4, .wf-loading h5, .wf-loading h6 {
    visibility: hidden;
}

/* If web fonts don't load, make sure the fallbacks look OK */
/* TODO relocate this section, test all large text */
.wf-inactive #header #main-nav ul li, .no-js #header #main-nav ul li{
  font-size: 16px;
  font-weight: bold;
}

/*League Gothic*/
#header,
#main-nav ul li, /* ie */
.ylwBtn, a.blueBtn, 
div.foot-bar,
.link-block a,
.landing-hero .attribution,
.select-box,
.file-inner a.call-to-action,
.sport,
.meta .category, .meta .post-date, .meta .published,
.blog .prev, .blog .next,
.search-results .prev, .search-results .next,
.blog #page-title-bar p, 
#ProcessForm .FormSectionHeader h5, #ProcessForm .FormLabel, #ProcessForm .FinishButton, 
.convio label, .convio h3.ObjTitle, .convio #ACTION_SUBMIT_SURVEY_RESPONSE, .convio .appArea .num, .convio input#send, .convio .Smaller, .convio p.FormLabelText, .convio .appArea .Explicit, .convio .contact-us .wrapable .Explicit,
.scfSubmitButtonBorder input, .scfForm label, .scfForm span,
.find-your-sport label, 
h1, h2, h3, h4 {
    font-family: "league-gothic-1", "league-gothic-2", "Franklin Gothic Medium", "Arial Narrow Bold", sans-serif;
    letter-spacing: 1px;
    font-weight: normal;
}

/* News Gothic */
div.sponsors h3,
div.homeColMid h3,
.call-to-action, .find-your-sport .carousel .hide-button, 
#footer, #footer ul, #footer li, 
#utility-nav, #utility-nav ul li, 
div.tags,
div.published,
#header #main-nav li.hover ul a,
.sport-list,
.blog-featured h2, .blog p.partner,
#sub-nav, #header #main-nav li ul a,
.find-your-sport .pagination,
.find-a-solution select, .find-a-solution .select-box,
.find-a-solution .current-value {
    font-family: "news-gothic-std-1","news-gothic-std-2", helvetica, arial, sans-serif;
}


/*Skolar*/
body, 
.link-block span.sub,
#page-nav, div.transcript .call-to-action, 
.convio textarea, .convio .wrapable, .convio .wrapable .Explicit, .convio input, .convio select, .convio option, .convio p, .convio ul, .convio li, .convio .Hint, 
#footer .copy, .scfForm table label, .scfCheckbox label, .convio .ShoppingSearchLabel label, .convio .ShoppingRow .Explicit label, .convio .ProductConfigLabel label,
.scfForm .scfDateSelectorGeneralPanel label,
.find-your-sport .hint{
    font-family: "skolar-1", "skolar-2", georgia, serif;
}

/* American Typewriter Condensed */
.amp{
  color: #ff6d03;
  font-family: "American Typewriter Condensed", "American Typewriter", "Calibri", "Courier New", monospace;
}

.preserveCapitalization{
    text-transform: none !important;
}


body {
    background: #fff url("../img/bgtexture.jpg");
}


body, select, input, textarea {
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* Set your base font here, to apply evenly */
  line-height: 1.5;
  font-size: 16px;
}

a, a:visited, .convio a, .convio a:visited { color: #419fb5; text-decoration: none; }
a:hover, a:focus, a:active, .convio a:hover, .convio a:focus, .convio a:active { color: #ff6d03; }

h2 {
    font-size: 36px; /* appears to be 48px on pages other than home */
    line-height: 1;
    margin: 0.3em 0 0.4em;
    color: #72b619;
    text-transform: uppercase;
}

  .rightCol h2{
    font-size: 30px;
  }

  .wf-inactive h2, .no-js h2{
    font-size: 20px;
    font-weight: bold;
    }

h3 {
    font-size: 24px;
    color: #419fb5;
    line-height: 1.1;
    margin-bottom: 0.35em;
    letter-spacing: 0.005em;
}

  .blog h2, .blog h3{
    color: #701471;
  }

p {
    margin: 0 0 1em;
}

blockquote {
    background: url("../img/quote.png") no-repeat 0 10px;
    font-size: 24px;
    color: #666;
    padding: 0 0 0 23px;
    margin: 0 0 12px -23px;
}

#header,
#main,
#footer,
#page-title-bar,
#slideshow,
#large-bg-container {
    width: 1200px;
    margin: 0 auto;
}

#header-inner,
#main-inner,
#footer-inner,
#page-title-inner,
#slideshow-inner,
#our-mission-inner,
.column-container{
    width: 960px;
    margin: 0 auto;
    position: relative;
}

  #main-inner{
    position: static; /* fixes ie6 z-index issues on find an athlete page */
  }

#header {
    background: #81c527 url("../img/header_texture.png") repeat-x left top;
    height: 168px;
}

  /* right now we only use this on convio form pages */
  #header.no-sub-nav{
    height: 132px;
    margin-bottom: 126px; 
  }
  
  body.error #header{
    height: 132px;
  }
  

#header-inner{
  z-index: 20; /* required for the donate button in ie7 */
}

.blog #header{
  background: #701471 url("../img/header_texture_blog.png");
  /*margin-bottom: -18px;*/
  height: 130px;
}

.search-results #header{
  height: 132px;
}

    #header #logo {
        position: absolute;
        left: 0;
        top: 0;
    }

    #header #logo a {
        background: url("../img/womens_sports_foundation_logo.png") no-repeat center;
        display: block;
        width: 159px;
        height: 131px;
        text-indent: -999em;
    }
    
      .blog #header #logo a {
          background: url("../img/she_network_logo.png") no-repeat right center;
          width: 120px;
      }
   
    #header #logo a:hover, #header #logo a:focus, #header #logo a:active{
          background-image: url("../img/womens_sports_foundation_logo_yellow.png");
    }
    
       .blog #header #logo a:hover, .blog #header #logo a:focus, .blog #header #logo a:active{
          background: url("../img/she_network_logo.png") no-repeat left center;
       }
    #header #utility-nav li,
    #header #utility-nav a,
    #header #main-nav li,
    #header #main-nav a,
    #header #sub-nav li,
    #header #sub-nav a {
        float: left;
        text-decoration: none;
        text-transform: uppercase;
    }

    #header #utility-nav {
        position: absolute;
        top: 0;
        left: 200px;
        width: 760px;
        height: 57px;
        border-bottom: 1px solid #FFF;
        font-size: 12px;
        letter-spacing: 1px;
    }

        #header #utility-nav ul {
            margin-left: -11px;
        }
        
        #header #utility-nav ul li{
          margin: 16px 6px 16px 0;
        }

        #header #utility-nav a {
            color: #fee143;
            line-height: 1;
            padding: 8px 10px;
            
        }
        
            .blog #header #utility-nav a.call-to-action{
              background: url("../img/blog_header_arrow.png") right 1px no-repeat transparent;
              padding: 0 18px 0 0;
              margin: 24px 0; 
              -moz-border-radius: 0;
              -webkit-border-radius: 0;
              border-radius: 0;
            }
            
              .blog #header #utility-nav a.call-to-action:hover,
              .blog #header #utility-nav a.call-to-action:focus,
              .blog #header #utility-nav a.call-to-action:active{
                background-position: bottom right;
              }

            #header #utility-nav a:hover, #header #utility-nav a:focus, #header #utility-nav a:active {
                color: #fff;
                
            }
            
       html.borderradius #header #utility-nav a {
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
         border-radius: 15px;
       }

        #header #utility-nav li.active a {
            background: #fee143;
            color: #72B619;
        }
        
          html.no-borderradius #header #utility-nav .active a{
            background: transparent url(../img/rounded_utility_nav_corners.gif) no-repeat right top;
          }
        
          html.no-borderradius #header #utility-nav li.active{
            display: block;
            background: #FEE143 url(../img/rounded_utility_nav_corners.gif) no-repeat left bottom;
          }

    #header .search {
        float: right;
        margin-top: 17px;
    } 
        
        #header .search input.button {
          width: 71px;
        }
        
        /* TODO test these */
        #header .search .input.text {
          background-position: left 0;
        }
        
          .blog #header .search .input.text {
            background-position: left 30px;
          }
        
        .search input.text {
            background: url("../img/search.png") no-repeat;
            border: 0;
            width: 130px;
            height: 27px;
            padding: 1px 10px;
            margin-right: 8px;
            color: #666;
            float: left;
            background-position: left -95px;
        }

        .search input.button {
            background: url("../img/search.png") -152px 0;
            border: 0;
            text-indent: -999em;
            width: 32px;
            height: 26px;
            float: left;
        }
        
          .colWrap .search input.button{
             background-position: -152px 26px;
          }
        
          .blog .search input.button{
             background-position: -152px -34px;
          } 

          .blog .colWrap .search input.button{
            background-position: -152px -64px;
          }
          

        .search input.button:hover,
        .search input.button:focus{
            background-position: -223px 0;
        }
        
          .blog .search input.button:hover,
          .blog .search input.button:focus {
            background-position: -223px -34px;
          }

          .blog .colWrap .search input.button:hover,
          .blog .colWrap .search input.button:focus {
              background-position: -224px -64px;
          }

        .search input.button:active {
            background-position: -294px 0;
        }
          
          .blog .search input.button:active {
            background-position: -294px -34px;
          }
        
          .blog .colWrap .search input.button:active {
              background-position: -294px -64px;
          }
        
        .search h3{
          font-size: 30px;
          text-transform: uppercase;          
          letter-spacing: 1px;
          color: #72B619;
        }
        
        .blog .search h3{
          color: #701471;
        }
          
        
        .search label{
          display: block;
          clear: left;
          font-size: 14px;
          padding: 4px 0 0 4px;
        }
        
        .search label input{
          vertical-align: middle;
        }

    #header #main-nav {
        position: absolute;
        top: 75px;
        left: 205px;
        font-size: 29px;
        margin: 0 -23px;
        z-index: 101;
    }

        #header #main-nav ul { overflow: hidden; }
        
        #header #main-nav li{
          margin: 0 2px;
        }
        
        #header #main-nav li ul { 
          position: absolute;
          /*left: -999em;  */
          background: transparent url(../img/dd_bottom_edge.png) no-repeat left bottom;
          padding-bottom: 26px;
          display: none;
          top: 40px;
          width: 171px;
          left: auto;
          z-index: 9; 
          font-size: 12px;
          margin-right: 1px;
          /*padding-top: 12px;*/
        }
        
          #header #main-nav li:hover ul{ 
            display: block;
          }
        
        #header #main-nav li ul li{
          float: none;
          background: transparent url(../img/dd_right_edge.png) repeat-y right top; 
          margin: 0 2px 0 0;
        }


        
        #header #main-nav li ul li a{
          color: #1d4852;
          line-height: 36px;
          padding: 0 0 0 12px;
          float: none;
          display: block;
          letter-spacing: 0px;
          background-color: #BEEC81;
        }
        
          #header #main-nav li ul a:hover, #header #main-nav li ul a:focus, #header #main-nav li ul a:active {
            background-color: White;
            color: #1d4852;
          }

        #main-nav a {
            color: #fff;
            line-height: 1;
            letter-spacing: 1px;
            padding: 6px 12px 5px 12px;
            margin: 0;
        }
        
            #header #main-nav a:hover,  #main-nav li:hover a, #header #main-nav a:focus,  #header #main-nav a:active{
                color: #72b619;
                background-color: #beec81;    
            }
            
            .blog #header #main-nav a:hover, .blog #header #main-nav a:focus, .blog #header #main-nav a:active{
              color: #ffcc00;
              background-color: transparent;    
            }

            #header #main-nav a span {
                font-size: 14px;
                color: #e0f0ca;
                display: block;
                letter-spacing: 0.105em;
            }

        html.borderradius #header #main-nav .active a {
            -moz-border-radius: 21px;
            -webkit-border-radius: 21px;
            border-radius: 21px;
        }

        #header #main-nav li.active a {
            background: #fff;
            color: #72b619;
        }
        
          html.no-borderradius #header #main-nav .active a{
            background: transparent url(../img/rounded_nav_corners.gif) no-repeat right top;
          }
        
          html.no-borderradius #header #main-nav li.active{
            display: block;
            background: #fff url(../img/rounded_nav_corners.gif) no-repeat left bottom;
          }
        
          .blog #header #main-nav li.active a {
              background: #fff;
              color: #701471;
          }
        
    
    #header #sub-nav {
        position: absolute;
        top: 132px;
        left: 24px;
        height: 36px;
        letter-spacing: 0.04em;
        z-index: 100; /* donate tab overlaps next section */
    }

        #header #sub-nav a {
            color: #1d4852;
            font-size: 12px;
            line-height: 36px;
            padding: 0 20px;
            border-right: 1px solid #419fb5;
        }

        #header #sub-nav li.active a {
            color: #ff6d03;
            background: #fff;
        }
                
        #sub-nav a:hover, #sub-nav a:focus, #sub-nav a:active {
            background-color: #e0f0ca;
        }
        
        #header #sub-nav li#donate-now {
            position: relative;
        }

        #header #sub-nav li#donate-now a {
            position: absolute;
            top: 0; left: 0;
            border: 0;
        }

           #donate-now a:hover, #donate-now a:focus, #donate-now a:active {
                background-position: left bottom;
                background-color: transparent;
            }

    /*DONATE NOW*/
        #donate-now {
            width: 194px;
            height: 36px;
            z-index: 500;
        }

        #donate-now a{
            background: url("../img/donate-now-blue.png") no-repeat;
            text-indent: -999em;
            width: 194px;
            height: 49px;
            display: block;
        }
        
        .blog #page-title-bar #donate-now a{
          background-image: url("../img/donate-now-blue.png");
        }
          /* make sure the donate now button doesn't overlap the content */
          .blog #page-title-bar{
            padding-top: 60px;
          }
        
        #slideshow #donate-now a, .blog #donate-now a, .no-sub-nav #donate-now a, .search-results #donate-now a{
          background-image: url(../img/donate-now-black.png);
        }
        
          .search-results .column-container #donate-now a, .blog .column-container #donate-now a{
            margin-left: 29px;
          }
            

#footer {
    background: url("../img/footer_texture.png") no-repeat center;
    height: 188px;
}

.blog #footer {
    background: url("../img/footer_texture_blog.png") no-repeat center;
    
}

    #footer .footer-copy { float: left; padding-top: 60px; }

    #footer h2 { font-size: 36px; color: #fff; line-height: 1; text-transform: uppercase; margin: 0; }
      .wf-inactive #footer h2, .no-js #footer h2{font-size: 24px;}
    #footer h3 { font-size: 24px; color: #fff; line-height: 1; margin-bottom: 33px; }
    .wf-inactive #footer h3, .no-js #footer h3{font-size: 18px; line-height: 1.6;}
    #footer p.copy { color: #fff; font-size: 12px; }

    #footer #social-nav li,
    #social-nav a,
    #footer #footer-nav li,
    #footer-nav a,
    #footer #footer-utility-nav li,
    #footer-utility-nav a {
        float: left;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
    }

    #social-nav, #footer-nav, #footer-utility-nav{
      font-size: 12px;
      letter-spacing: 1px;
    } 

    #footer #social-nav {
        position: absolute;
        top: 57px;
        right: 0;
    }
    
        #footer #social-nav li { padding-bottom: 4px; }

        #footer #social-nav li.facebook a {
            background: url("../img/social_icons.png") no-repeat 0 -31px;  
            padding: 6px 15px 11px 40px;
            line-height: 1;
        }
        
        #footer #social-nav li.twitter a {
            background: url("../img/social_icons.png") no-repeat;  
            padding: 6px 0 11px 40px;
            line-height: 1;
        }

        .blog #footer #social-nav li a{
          background-image: url(../img/social_icons_blog.png);  
        }
    
    #footer #footer-nav {
        position: absolute;
        top: 94px;
        right: 3px;
        border-top: 1px solid #FFF;
    }

        #footer #footer-nav a {
            padding: 0 10px;
            line-height: 34px;
        }
        
        #footer-inner a:hover, #footer-inner a:focus, #footer-inner a:active{
          color: #fee143;
        }
        
        #footer #footer-nav li:first-child a{ padding-left: 0; }
        
        #footer #footer-nav li:last-child a, #footer #footer-utility-nav li:last-child a{ padding-right: 0; }
    
    #footer #footer-utility-nav {
        position: absolute;
        top: 151px;
        right: 0;
    }

        #footer-utility-nav a {
            color: #fee143;
            padding: 0 11px;
        }
        
        #footer-utility-nav a:hover,  #footer-utility-nav a:focus, #footer-utility-nav a:active{
            color: #fff;
        }

/**
 * BUTTONS
 */

body .ylwBtn, #ProcessForm .FormInput .FinishButton, .convio #ACTION_SUBMIT_SURVEY_RESPONSE, .convio input#send, .scfSubmitButtonBorder input {
    background: #fc0;
    display: inline-block;
    padding: 3px 45px;
    float: left;
    font-size: 24px;
    color: #333;
    border: none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

    body.error a.ylwBtn{
      clear: left;
      margin-bottom: 1em;
    }
    
    .ie7 body.error a.ylwBtn{
      width: 300px;
      text-align: center;
    }

    .no-js .ylwBtn, .wf-inactive .ylwBtn,
    .no-js .scfSubmitButtonBorder input, .wf-inactive .scfSubmitButtonBorder input{
      font-size: 18px;
      font-weight: bold;
    }
  

    .ylwBtn:hover,  .ylwBtn:focus,
    #ProcessForm .FormInput .FinishButton:hover, #ProcessForm .FormInput .FinishButton:focus, 
    .convio #ACTION_SUBMIT_SURVEY_RESPONSE:hover, .convio #ACTION_SUBMIT_SURVEY_RESPONSE:focus,
    .convio input#send:hover, .convio input#send:focus,
    .scfSubmitButtonBorder input:hover, .scfSubmitButtonBorder input:focus  {
        background: #fcecb8;
        color: #333;
    }

    .ylwBtn:active,
    #ProcessForm .FormInput .FinishButton:active, 
    .convio #ACTION_SUBMIT_SURVEY_RESPONSE:active,
    .convio input#send:active,
    .scfSubmitButtonBorder input:active {
        background: #e3b603;
        position: relative;
        top: 2px; left: 2px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
a.blueBtn {
    background: #58b8ce no-repeat center center;
    display: inline-block;
    padding: 3px 45px;
    font-size: 24px;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); 
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

  a.blueBtn.next{
    background-image: url(../img/forward_arrow.png);
  }
  
  a.blueBtn.prev{
    background-image: url(../img/back_arrow.png);
  }
  
  #find-an-athlete a.blueBtn.disabled{
    background-color: #ccc;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: default;
    
  }

    a.blueBtn:hover,  a.blueBtn:focus {
        background-color: #b9eaf6;
        color: #333;
    }

    a.blueBtn:active {
        background-color: #458fa1;
        position: relative;
        top: 2px; left: 2px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }


/**
 * SHARE/PRINT BAR 
 *
 */ 

div.foot-bar {
    background: #f1e1ac;
    background: rgba(255, 192, 0, 0.25);
    padding: 11px;
    margin: 29px 0;
    width: 100%;
    overflow: auto;
}

    div.foot-bar div.share-print { 
        float: right;
        text-transform: uppercase;
        font-size: 24px;
        line-height: 1;        
        margin: 9px 0 0;
        letter-spacing: 1px;
    }
    
    .wf-inactive div.foot-bar div.share-print{
      font-size: 18px;
      font-weight: bold;
      line-height: 1.3;
    }
    
    .no-js div.foot-bar div.share-print{
      display: none;  
    }

    div.foot-bar div.share-print li,
    div.foot-bar div.share-print a {
        float: left;
        text-decoration: none;
        margin-bottom: 0;
    }

    div.foot-bar div.share-print .share,
    div.foot-bar div.share-print a.print {
        background: url("../img/share_print_icons.png") no-repeat;
        padding: 0 30px;
    }

    div.foot-bar div.share-print .share {
        background-position: left bottom;
        /*position: relative;*/
    }

    div.foot-bar div.share-print a.print {
        background-position: left top;
    }
    
    .foot-bar .share ul{
      display: none;
      position: absolute;
      margin-top: -235px;
      margin-left: -57px;
      left: auto;
      padding-top: 17px;
      padding-bottom: 20px;
      line-height: 1.2;
      background: url(../img/share_menu_top.png) no-repeat center top;
    }
    
    .wf-inactive .foot-bar .share ul{
      margin-top: -206px;
    }
      
      div.foot-bar .share ul li{
        display: block;
        float: none;
        width: 196px;
        background-color: #fffcdd;
        margin: 0;
        padding: 0;
        background: url(../img/share_menu_sides.png) repeat-y center top;
        padding: 0 3px 0 4px;
      }
      
        div.foot-bar .share ul li:last-child a{
          border:none;
        }
      
      div.foot-bar .share ul li a{
        display: block;
        float: none;
        margin: 0;      
        margin-right: 3px;
        border-bottom: 1px solid #ccc;
        padding: 10px 0 10px 52px;
        width: 144px;
        background: url(../img/sharing_icons.png) no-repeat 21px 12px;
      }
      
         div.foot-bar .share a.twitter{ background-position: 21px -37px;}
         div.foot-bar .share a.instapaper{ background-position: 21px -85px;}
         div.foot-bar .share a.email{ background-position: 21px -134px;}
      
      div.foot-bar .share ul li a:hover, div.foot-bar .share ul li a:focus, div.foot-bar .share ul li a:active{
        background-color: #ffe46e;
      }
      
      
     /* TODO make this focusable, add javascript fallback */
    .share:hover ul{
      display: block;
    }

#page-title-bar {
    background: url("../img/page_title_bg.png") no-repeat bottom;
    padding: 25px 0 55px;
    margin-bottom: 33px;
    position: relative;
}

    #page-title-bar h1 {
        font-size: 72px;
        text-transform: uppercase;
        letter-spacing: 0;
        color: #FFF;
        line-height: .9;
    }
    
      .no-js #page-title-bar h1, .wf-inactive #page-title-bar h1 {
        font-size: 56px;
        font-weight: bold;
      }

    /* TODO is this necessary */
    html.ie6 #page-title-bar h1 {
        line-height: 1;
    }

        /* TODO find out whether em is actually used */
        #page-title-bar h1 em, #page-title-bar h1 a{
            color: #ffcc00;
            padding-right: 30px;
            font-style: normal;
            background: url(../img/yellow_arrow.png) right center no-repeat;
        }
        
          #page-title-bar h1 a.second{
            color: White;
            background-image: url(../img/white_arrow.png);
          }
        
    .tier-3 #page-title-bar{
      padding-top: 0;
    }
    
    .tier-3 #page-title-bar h1, body.error #page-title-bar h1{
      font-size: 96px;
      padding-top: 72px;
    }
    
      .tier-3 #page-nav{
        margin-top: 72px;
      }
    
      .no-js #page-title-bar h1, .wf-inactive #page-title-bar h1 {
        font-size: 64px;
      }
    
    .tier-3 .aside .callout{
      border-color: #72B619;
    }
    
      .aside .callout ul{
        margin-left: 0;
        list-style-type: none;
      }
    
    .tier-3 .aside .callout h2{
      margin-top: 0;
    }
    
    .tier-3 .aside p{
      font-size: 14px;
      color: #333;
      line-height: 1.2857;
    }
    
    /* sometimes the hero-zone is narrower than the video's width attrib, usually on tier-3 pages */
    .hero-zone embed, .hero-zone object, .hero-zone video{
      width: 100%;
    }
      
        
/*
 * INNER PAGES
 * TODO Test in other browsers?
 * */
 
  .athlete-links{
    list-style: none;
    margin: 0;
    border-top: 1px solid #72b619;
    margin-bottom: 48px;
    clear: both;
  }
  
  .athlete-links div{
    border-bottom: 1px solid #ccc;
  }
  
  .athlete-links div:last-child{
    border-bottom-color: #72b619;
  }
    
  
  .athlete-links li{
    padding: 6px 0 6px 42px;
    background: url(../img/athlete_link_icons.png) no-repeat left -65px  transparent;
  }
  
    .athlete-links li.facebook{
      background-position: left 5px;
    }
      
    .athlete-links li.twitter{
      background-position: left -30px;
    }  

  .athlete-links a.call-to-action{
    text-align: left;
    display: inline;
    
  
  }

/* TODO this needs the calloutLeft and Right styles that are defined in .explore-further */
    div.featured-athletes h2.ir {
        float: left;
        width: 95px;
        height: 404px;
        margin: 0;
        background: url("../img/hdr_featured_athletes.png") no-repeat;  
    }
    
    div.sport-details h3.ir{
        float: left;
        width: 60px;
        margin: 0;
        margin-right: 24px;
        border-right: 1px solid #ccc;
        height: 446px;
        background: url("../img/hdr_sport_details.png") no-repeat;   
    }
    
    div.sport-details table{
      border: 1px solid #72B619;
      border-width: 1px 0;
      text-align: left;
      float: left;
      width: 465px;
      font-size: 14px;
    }
    
      div.sport-details tr{
        border-bottom: 1px solid #ccc;
        line-height: 35px;
      }
    
       div.sport-details tr:last-child{
         border-bottom: 0;
       }
    
      div.sport-details td{
        width: 190px;
        font-weight: bold;
      }
    
      div.sport-details th{
        font-weight: normal;
      }
      
    div.sport-organizations h3.ir{
      float: left;
      width: 60px;
      margin: 0;
      margin-right: 9px;
      border-right: 1px solid #ccc;
      height: 215px;
      background: url("../img/hdr_organizations.png") no-repeat;   
    }
    
       div.sport-organizations div{
         float: left;
         width: 480px;
       }
       
       div.sport-organizations li{
         float: left;
         width: 230px;
         margin-left: 10px;
         display: block;
       }
       
       div.sport-organizations h4{
        font-size: 24px;
        letter-spacing: 0;
        color: #72B619;
       }
       
       .sport-organizations .vcard .tel, .sport-organizations .vcard .url {
         font-weight: bold;
       }
       
       .sport-organizations .vcard .tel .value{
         font-weight: normal;
       }
       
       .sport-organizations .vcard div{
         width: 100%;
       }
    
    /* right column*/
    .tier-3 .aside h2{
      text-transform: none;
      letter-spacing: 0;
      font-size: 30px;
    }
    
      .no-js .tier-3 .aside h2, .wf-inactive .tier-3 .aside h2{
        font-size: 22px;
        font-weight: bold;
      }
      
      


/* max height for these images is 900px. images should include any top margin or they will touch the nav bar*/
 #large-bg-container{
    background: transparent url("../img/page_bg/athletes_basketball.png") no-repeat 445px 0; /* left 650 */
    margin-bottom: -900px;
    padding-bottom: 900px; 
 }
 
  body.error #large-bg-container{ margin-bottom: 0; padding-bottom: 0; background-image: none; }
  body.find-your-sport #large-bg-container{ background-image: none !important; } /* override bg set on the element */

#find-an-athlete{
   border-top: 1px solid #bbb;
   padding-top: 1em;
   margin-top: 2em;
}

  #find-an-athlete .bx-wrapper{
    clear: both;
  }

#sport-athletes{
  padding-bottom: 2.5em;
  margin-bottom: 2.5em;
  border-bottom: 1px solid #72B619;
}

    #find-an-athlete div.bx-wrapper { clear: both; }
  
   #find-an-athlete label{
     color: #999;
     font-style: italic;
     float: left;
     display: block;
     padding: 5px 3px 0 0;
   }
   
   #find-an-athlete .filter-controls{
     float: right;
     margin-right: 5px;
     position: relative;
     z-index: 850;
   }
      
    #sport-athletes .prev, #sport-athletes .next{
        height: 298px;
        float: left;
        width: 20px;
        padding: 5px;
    }
   
   #find-an-athlete .nav{
     margin: 0;
   }
   
   .no-js #find-an-athlete .pagination{
     display: none;
   }
   
 /**
 *  These pagination styles can be widely used
 */ 
  .pagination{
        width: 100%;
        margin: 24px 0 40px 0;
        padding-bottom: 14px;
        position: relative;
        text-align: center;
    }
    
      .pagination .prev{float: left;}
      .pagination .next{float: right;}

      .blog .prev, .blog .next, .search-results .prev, .search-results .next{
        font-size: 30px;
        letter-spacing: 0px;
        line-height: 1;
        background: transparent url(../img/page-arrows.png) no-repeat;
        width: 120px;
      }
      
        .no-js .blog .prev, .no-js .blog .next, .wf-inactive .blog .prev, .wf-inactive .blog .next, 
        .no-js .search-results .prev, .no-js .search-results .next, .wf-inactive .search-results .prev, .wf-inactive .search-results .next{
          font-size: 24px;
        }
      
        .blog .prev, .search-results .prev{
          background-position: -35px 2px;
          padding-left: 35px;
          width: 120px;
          text-align: left;
        }
          
            .no-js .blog .prev, .wf-inactive .blog .prev,
            .no-js .search-results .prev, .wf-inactive .search-results .prev{
                width: 140px;
              }
        
            .blog a.prev:hover, .blog a.prev:focus, .blog a.prev:active,
            .search-results a.prev:hover, .search-results a.prev:focus, .search-results a.prev:active {
              background-position: -35px -63px; 
            }
          
            .blog a.prev.disabled, .search-results a.prev.disabled{
              background-position: -35px -31px;
              color: #ccc;
            }
      
        .blog .next, .search-results .next{
          background-position: 109px 2px;
          padding-right: 35px;
          text-align: right;
          width: 100px;
        }
        
                  
            .no-js .blog .next, .wf-inactive .blog .next,
            .no-js .search-results .next, .wf-inactive .search-results .next{
                width: 120px;
                background-position: 130px 2px;
              }
        
          .blog a.next:hover, .blog a.next:focus, .blog a.next:active,
          .search-results a.next:hover, .search-results a.next:focus, .search-results a.next:active {
            background-position: 109px -63px; 
          }
              .no-js .blog a.next:hover,  .no-js .blog a.next:focus,  .no-js .blog a.next:active,
              .wf-inactive .blog a.next:hover, .wf-inactive .blog a.next:focus, .wf-inactive .blog a.next:active,
              .no-js .search-results a.next:hover,  .no-js .search-results a.next:focus,  .no-js .search-results a.next:active,
              .wf-inactive .search-results a.next:hover, .wf-inactive .search-results a.next:focus, .wf-inactive .search-results a.next:active{    
                background-position: 130px -63px;
              }
          
          /* TODO will this be an <a> when it is disabled? */
          .blog a.next.disabled, .search-results a.next.disabled{
            background-position: 109px -31px;
            color: #ccc;
          }
    
      #find-an-athlete .pagination{
        border-bottom: 1px solid #ccc;  
      }

       
        .pagination .dots {
            display: inline-block;
            margin: 13px auto;
        }
        
          .ie7 .pagination .dots {
            width: 200px;
          }

            .pagination .dots a {
                background-color: #bbb;
                float: left;
                width: 12px;
                height: 12px;
                text-indent: -999em;
                margin: 0 4px 5px 4px;
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;
                border-radius: 12px;
            }
                 .pagination .dots a:hover, 
                 .pagination .dots a:focus, 
                 .pagination .dots a:active { background-color: #ff6d03; }
                 
                 .pagination .dots a.active { 
                   border: #ff6d03 3px solid;
                   background-color: White;
                   width: 7px;
                   height: 7px;
                   -moz-border-radius: 12px;
                   -webkit-border-radius: 12px;
                   border-radius: 12px;
                   margin-bottom: 4px; }
   
   #athlete-grid{
     clear: both;
     width: 960px;
     overflow: auto;
     margin: 0;
   }
   
    #athlete-grid .pager{
      position: relative; /*required for overlays in ie7 */
      z-index: 120;
    }
    
    #sport-athletes .bx-wrapper{
      float: left;
      margin-right: 10px;
    }

     #sport-athletes #athlete-grid{
       width: 480px;
       margin: -5px 5px;
     }
 
   #athlete-grid div{
     color: #333;
     margin: 6px 5px;
     position: relative;
     z-index: 500;
   }

   #athlete-grid li {
        width: 240px;
        float: left;
   }
   
   #athlete-grid img{
    width: 230px;
    height: 144px;
   }
  
   #athlete-grid div.overlay{
     cursor: pointer; /* TODO this is a cheap fix for the problem of the overlay not being linked */
     z-index: 100;
     float: none;
     height: 22px;
     position: absolute;
     top: 99px;
     left: 0;
     overflow: hidden;
     background-color: White;
     background: rgba(255, 255, 255, .75);
     width: 196px;
     margin: 3px;
     padding: 8px 14px;
     -moz-transition-property: top, height;
     -moz-transition-duration: .5s;
     -webkit-transition-property: top, height;
     -webkit-transition-duration: .5s;
     -o-transition-property: top, height;
     -o-transition-duration: .5s;
      /* TODO add vanilla css3 transitions */
   }
 
    #athlete-grid h3, #athlete-grid h4{
      margin: 0 0 5px 0;
      color: #333;
      padding: 0;
      font-weight: normal; /* for ie - TODO set sitewide? */
      text-shadow: white 1px 1px 0;
      font-size: 24px;
      line-height: 1;
    }
    
    #athlete-grid div a{
      display: block;
    }
    
    /* TODO in IE7 the cursor disappears when the overlay slides up */
    #athlete-grid div a:hover .overlay, #athlete-grid a:focus .overlay{
      height: 121px;
      top: 0;
      
    }
 
   #athlete-grid .call-to-action{
     color: #333;
     text-align: left;
     font-size: 14px;
     padding: 0 14px 0 0;
     display: inline;
     position: absolute;
     top: 100px;
     background: transparent url(../img/black_arrow.png) no-repeat right center;
   }
   
/*
 * CUSTOM SELECT BOX
 **/

/*.select-box ol li .selected*/

.select-box{
  border: 2px solid #bbb;
  background-color: White;
  display: inline-block;
  position: relative;
  width: 226px;
  cursor: default;
  font-size: 18px;
  margin-left: 10px;
  z-index: 700;
}

.select-box ol{
  margin: 0 0 0 -2px;
  padding: 1px 0;
  list-style-type: none;
  width: 226px;
  display: none;
  z-index: 620;
  background-color: White;
  position: absolute;
  left: 0;
  border: 2px solid #BBBBBB;
  border-top: 0;
  top: 28px; 
}




.current-value{
  padding:  0 10px;
  width: 175px;
  float: left;
}

.select-box li{
  padding: 0 10px;
  display: block;
}

  .leftCol .select-box li{
    margin-bottom: 0;
  }
  
  .leftCol .select-box li:before{
    content: "";
  }

.select-box.open ol{
  display: block;
}

.select-box li:hover, .select-box li.focused, .select-box.open .current-value, .select-box.has-focus .current-value{
  /*display: block;*/
  background-color: #419fb5;
  color: White;
}

.select-box .display-all{
  display: block;
  float: right;
  border-left: 1px dashed #bbb; 
  padding: 0 8px;
  height: 27px;
  z-index: 230;
}

  .select-box .display-all img{
    padding-top: 10px; 
    width: auto;
    height: auto;
  }

/*
 * PAGE NAV
 * */

#page-nav {
    /*position: absolute;
    width: 189px;
    right: 0;
    bottom: 0;*/
    width: 190px;
    float: right;
    margin: 0 10px 0 0;
}
    
    #page-nav a {
        color: #fff;
        font-family: georgia, serif;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
    }

    #page-nav a:hover,  #page-nav a:focus, #page-nav a:active{
      color: #fcecb8;
    }

    #page-nav li.active a {
        color: #ffcc00;
    }
    
/* * 
 * FIND YOUR SPORT
 */
 
 .find-your-sport .info-block-chooser{
   width: 100%;
 }
 
 .find-your-sport .info-block-chooser label{
   width: 20.5%;
   margin-right: 2%;
   float: left;
   font-size: 24px;
   text-align: center;
   text-transform: uppercase;
   padding: .75em 1% 1em 1%;
   color: #333;
   letter-spacing: 1px;
 }
 
    .find-your-sport .info-block-chooser label:hover, .find-your-sport .info-block-chooser label.selected{
       background: url(../img/circle-check.png) no-repeat center center;
      }
      
    #container .find-your-sport .info-block-chooser label.selected{
      background-color: #ff6d03;
    }
    
      .find-your-sport .info-block-chooser label.selected, .find-your-sport .info-block-chooser label.selected .hint{ color: White; }
      
    #container .find-your-sport .info-block-chooser label.not-selected{
       color: #999;
       background-color: #e5e7e7;
    }
 
     .find-your-sport .info-block-chooser label.not-selected .hint{
       color: #666;
     }
 
  .info-block-chooser #getting-started{ background-color: #fcecb8; }
  .info-block-chooser #fitness-seeker{ background-color: #fae59f; }
  .info-block-chooser #sportswoman{ background-color: #fedf63; }
  .info-block-chooser #daredevil{ background-color: #fc0; }
    
  .find-your-sport .hint{
    font-size: 14px;
    text-transform: none;
    display: block;
    text-align: left;
    letter-spacing: 0;
    color: #333;
    line-height: 1.5;
  }
  
    .find-your-sport h2 span.hint{
      float: right;
      width: 480px;
    }
  
    .find-your-sport p.hint{
      margin-bottom: 24px;
    }
  
  .find-your-sport .filter-results{
    background-color: #e0f0ca;
    border-radius: 12px;
    padding: .5em 66px;
    margin: 1em 0;
    clear: left;
    /* TODO add all vendor prefixes here */
  }
  
    .find-your-sport .filter-results h2{
      float: left;    
      margin: .25em 0 0 0;
    }
    
    .find-your-sport .filter-results .blueBtn{
      margin: .5em 0 0 1em;
    }
    
      .questions .filter-results .blueBtn{
        margin: 0 0 .5em 0;
      }
      
      .questions .filter-results .blueBtn.disabled{
        color: #eee;
        box-shadow: none;
        background-color: #bbb;
        cursor: default;
      }
    
    .find-your-sport .filter-results p{
      clear: left;
    }
    
 .find-your-sport .interpolate{
   font-style: italic;
 }
 
 .find-your-sport h2{
   clear: left;
   margin: 72px 0 0 0;
   font-size: 48px;
 }
 
    .find-your-sport h2 .inline-hint-heading{
      display: block;
      float: left;
    }
 
    .find-your-sport .n1, .find-your-sport .n2, .find-your-sport .n3, .find-your-sport .n4{
      background: transparent url(../img/circled-numbers.png) no-repeat left 6px;
      padding-left: 65px;
      padding: 12px 0 12px 65px;
      margin-top: 60px;
    } 
  
    .find-your-sport .n2{background-position: left -126px;}
    .find-your-sport .n3{background-position: left -259px;}
    .find-your-sport .n4{background-position: left -393px;}  
 
 
 
 .find-your-sport .carousel .bx-window, .find-your-sport .carousel .bx-wrapper, .find-your-sport .carousel ul{
   width: 960px;
   float: none;
   
 }
 
 .find-your-sport .carousel li{ 
   padding: 0 10px 0 0; 
   background-image: none;
   width: 320px;
   overflow: auto;
 }
 
 .find-your-sport .carousel li div{
   width: 230px;
   background-color: #f5e4af;
   padding: 24px 40px;
   overflow: auto;
 }
 
  .find-your-sport .carousel .hide-button{
    background: transparent url(../img/red-x.png) no-repeat left 2px;
    color: #c00;
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 5px 0 18px;
    display: block;
    letter-spacing: 1px;
    margin-top: 12px;
    float: left;
    width: 90px;
  }
  
    .find-your-sport .carousel .hide-button:hover, .find-your-sport .carousel .hide-button:focus, .find-your-sport .carousel .hide-button:active{
      color: #FF6D03;
      background-position: left -24px;
      }  
  
    .find-your-sport .carousel .call-to-action{
      float: right;
      width: 90px;
    }
 
    /* TODO remove this - temp placeholder */
    .find-your-sport .carousel li img{
      width: 230px;
      height: 144px;
      display: block;
      background-color: #bbb;  
    }
 
    .find-your-sport .carousel table{
      width: 100%;
      margin-top: 12px;
      font-size: .9em;
    }
  
    .find-your-sport .carousel h3{
      color: #ff6d03;
    }
 
    .find-your-sport .carousel tr{
      border: 1px solid #fc0;
      border-width: 1px 0;
      line-height: 2;
    }
  
    .find-your-sport .carousel th{
      text-align: left;
      font-weight: normal;
    }
    .find-your-sport .carousel td{
      font-weight: bold;
    }
    
  .find-your-sport .pagination{
    width: 100%;
    background-color: #e0f0ca;
    padding: 12px 6px 6px 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
    .find-your-sport .dots{
      margin: 0 auto;
      max-width: 600px;
    }
    
    .find-your-sport .next, .find-your-sport .prev{
      background: url(../img/page-arrows-small.png) no-repeat left top;
      line-height: 1;
    }
    
      .find-your-sport .next{
        padding-right: 18px;
        background-position: 112px top;
      }
      
        .find-your-sport .next:hover, .find-your-sport .next:focus, .find-your-sport .next:active{
          background-position: 112px center;
        }
      
        .find-your-sport .next.disabled{
          background-position: 112px bottom;
          color: #999;
        }
      
      .find-your-sport .prev{
        padding-left: 18px;
        background-position: -20px top;
      }
      
        .find-your-sport .prev:hover, .find-your-sport .prev:focus, .find-your-sport .prev:active{
          background-position: -20px center;
        }
      
        .find-your-sport .prev.disabled{
          background-position: -20px bottom;
          color: #999;
        }
    
  .find-your-sport .ui-slider{
    background-color: #ccc;
    height: 24px;
    position: relative;
    border-radius: 12px;
  }
  
    .find-your-sport .ui-slider-range{
      background-color: #7ccfe3;
      height: 100%;
      border-radius: 12px 0 0 12px;
    }
    
    .find-your-sport .ui-slider-handle{
      width: 44px;
      margin-left: -23px;
      position: absolute;
      top: 0;
      height: 22px;
      background-color: #419fb5;
      /* TODO make this look dimensional - use border styles? also add vendor prefixes for below */
      border-radius: 12px;
      border: 1px solid black;
      border-bottom: 1px inset black;
      border-right: 1px inset black;
      border-top: 1px outset #ddd;
      border-left: 1px outset #ddd;
    }
    
    .find-your-sport label{
      width: 25%;
      text-align: center;
      display: block;
      float: left;
      font-size: 24px;
      line-height: 1;
      text-transform: uppercase;
      color: #ccc;
      letter-spacing: 0;   
      padding-top: 12px;
    }
    
       .find-your-sport label.selected{
         color: #FF6D03;
       }
    
      /* TODO make this accessible - screen readers, no JS */
      .js.canvas .find-your-sport label input{
        border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; 
      }
    

/* * 
 * MAIN Columns
 */

/* only used in 4th tier nav - rename? */
div.leftCol {
    width: 550px;
    float: left;
}

  .leftCol img{
    width: 550px;
    height: 336px;
  }

  .leftCol .calloutFloat img{
    width: 150px;
    height: auto;
  }

  .leftCol blockquote{
    background-color: #fcecb8;
    background-position: 9px 20px;
    font-size: 16px;
    font-style: italic;
    padding: 1em 1.75em;
    margin: 1.5em -1.75em;
    color: #333;
  }
  
  .leftCol .attribution{
    font-weight: bold;
    text-align: right;
    display: block;
    font-style: normal;
  
  }
  
  .leftCol .attribution:before, .homeColRight .attribution:before{
    content: "\2014\2009";  
  }
    
  div.summary{
    font-size: 24px;
    color: #666;
    margin: 1em 0;
  }
  
  .leftCol ul, .leftCol ol {
    color: #ff6d03;
    margin-left: 0;
  }
  
  .leftCol li{
    color: #444;
    margin-bottom: 1em;
  }
  
  /* TODO
     make sure this only applies to the single content pages! (HistoryContentBody) 
     do the same for ul
     combine with above styles to shrink CSS
  */
  .leftCol ol {
    counter-reset:li; /* Initiate a counter */
    list-style:none; /* Disable the normal item numbering */
  }
  
  .ie7 .leftCol ol, .ie6 .leftCol ol{
      list-style: decimal;
   }
   
     .ie7 .leftCol .find-a-solution ol, .ie6 .leftCol .find-a-solution  ol{
        list-style: none;
     }
  
  .leftCol ol li {
    position:relative; 
    margin-left: 2em;
    left: -2em;*/

  }
  .leftCol ol li:before {
    content:counter(li) "."; 
    counter-increment:li;
    /* Position and style the number */
    position:absolute;
    left:-2em;
    width:2em;
    color:#ff6d03;
    font-weight:bold;
    text-align:center;
  }
  /* end single-content only styles */

  .leftCol h2{
    /* should have margin: 0 on single content page - ok elsewhere? */
    font-size: 48px;
    text-transform: none;
    letter-spacing: 0;
  }
  
  .leftCol h2:first-child{
    margin-top: 0;
  }
  
  .leftCol h3, .leftCol .callout h4{
    font-size: 30px;
    letter-spacing: 0;
    margin: 24px 0 0 0;
    line-height: 1.2;
    color: #72b619;
  }
  
  .athlete-profile h3{
    color: #ff6d03;
    font-size: 30px;
    text-transform: uppercase;
  }
  
    .athlete-profile .leftCol h3{
      margin-top: 2em;
    }
      
  /* TODO this is the wrong proportion */
  .athlete-profile .eight img{
    margin-bottom: 24px; 
    width: 310px;
    /* height: 228px; based on comp proportions */
    height: 189px;
  }
  
  .leftCol .callout h2, .leftCol .callout h3, .leftCol .callout h4{
    font-size: 30px;
    line-height: 36px;
    margin: 0 0 .4em 0;
  }
  
    .tier-4 .leftCol .callout h2 a{
      color: #72B619;
    }
    
    .tier-4 .leftCol .callout h2 a:hover, .tier-4 .leftCol .callout h2 a:focus, .tier-4 .leftCol .callout h2 a:active{
      color: #FF6D03;
    }
    
  
  .leftCol .excerpts{
    border-top: 1px solid #ccc;
    padding-top: 23px;
    margin-top: 1em;
  }
   
  .leftCol .calloutFloat p{
    width: 374px;
    font-size: 16px;
    float: left;
    margin: -8px 0 0 24px;
  } 

  .leftCol .calloutFloat img{
    margin: 0;
    padding: 0;
  }
  
  .leftCol .signature{
    line-height: 24px;
    font-size: 14px;
    color: #666;
  }
  
  .leftCol .signature .name{
    display: block;
    font-size: 24px;
  }
  
  .leftCol .resources{
     margin-top: 24px;
   }
  
    .leftCol .resources a{
      color: #444;
      display: block; 
      padding: 6px;
    }
  
    .leftCol .resources a h3{
      font-size: 24px;
      text-transform: uppercase;
      margin: 0;
    }
  
    .leftCol .resources a p{
      display: inline;
    }
  
    .leftCol .resources a p:last-child{ /* because the CMS sometimes inserts multiple empty paragraphs */
      background: transparent url(../img/blue_arrow.png) no-repeat right center;
      padding-right: 16px;
    }
  
    .leftCol .resources a p{
      display: inline;
    }
  
    .leftCol .resources a:hover, .leftCol .resources a:focus, .leftCol .resources a:active{
      background-color: #fbf3d5;
      cursor: pointer;
    }
  
  .leftCol .additional-info{
    font-style: italic;
    padding-top: .75em;
    margin-top: 1.25em;
    border-top: 1px dotted #72B619;
  }
  
  .leftCol .file{
    background: url(../img/pdf_bg.png) no-repeat center top;
    padding-top: 30px;
    width: 100%;
    margin-top: 2em;
  }
  
    .file-inner{
      background: #b9eaf6 url(../img/file-download-icon.png) no-repeat 20px 12px; 
      padding: 2px 40px 12px 80px;
    }
  
    .file-inner p{
      font-style: italic;
      color: #333;
      margin: 0;
    }
  
    .file-inner p .file-size{
      font-style: normal;
    }
  
    .file-inner a.call-to-action{
       text-align: left;
       font-size: 30px;
       display: inline-block;
       padding-left: 0;
    }
    
  div.leftCol div.sport-list ol{
    margin: 0;
    line-height: 1.5;
    float: left;
    width: 170px;
    padding-right: 13px;
    font-size: 14px;
  }
  
    .leftCol .sport-list ol li{
      margin: 0;
      left: auto;
    }
  
    .leftCol .sport-list ol li:before{
      content: none;
    }
    
div.rightCol {
    width: 190px;
    float: right;
    color: #666;
    border-top: 1px solid #72B619;
}

    div.rightCol .callout p {
        line-height: 1.3;
        margin-top: 0;
    }
    
    .rightCol .callout h3{
      margin-bottom: 0;
    }
    
    .rightCol .find-a-sport{
      border-bottom: 1px solid #72B619;
      padding-bottom: 1em;
    }
    
    a.ylwBtn.request-speaker{
      padding: 3px 0;
      width: 100%;
      text-align: center;
      margin-bottom: 24px;
    }
    

/* used on individual athlete profiles and short single content pages */
div.accomplishments, div.content-summary{
  margin-bottom: 1em;
  }
  
div.accomplishments .ir, div.content-summary .ir  {
  background: url("../img/hdr_accomplishments.png") no-repeat;
  width: 58px; /*40*/
  height: 263px;
  float: left;
  margin: 0;
  border-right: 1px solid #ccc; 
  
}

  div.content-summary .ir{
    background-image: url(../img/hdr_content_summary.png);
  }
  
  .content-summary div{
    padding-left: 24px;
    margin-left: -1px;
    border-left: 1px solid #CCCCCC;
    float: left;
    width: 466px;
  }
  
    /* TODO add ol here, make this work with no markup inside div */
    .content-summary ol{
      margin-left: 12px;
      }

  .accomplishments ul, .accomplishments ol{
    float: left;
    width: 480px;
    border-left: 1px solid #CCCCCC;
    margin-left: -1px;
    padding-left: 10px;
  }

  .accomplishments ul{
    list-style: disc outside url("../img/light_bullet.png");
  }
  
  .content-summary ul, .leftCol ul{
    list-style: disc outside url("../img/orange_bullet.png");
  }
  
    .accomplishments ul li{
      margin-left: 12px;
    }
  
    .accomplishments ol li{
      margin-bottom: 1em;  
      width: 100%;
      overflow: auto;
    
    }
  
    .accomplishments ol ul, .accomplishments ol ul li, .accomplishments ol p{
      float: left;
      width: 390px;
      margin: 0;
      padding: 0;
      list-style: none;
      border: 0;
      left: 0; /* why does this get set to anything else? TODO */
    }
  
    .accomplishments ol .date{
      float: left;
      width: 40px;
      padding-right: 10px;
      color: #72B619;
      font-weight: bold;
    }
  
  /* TODO instead of overriding this everywhere, make the initial selector more specific */
  .accomplishments ol li:before{
      content: none;
    }

.sport{
  font-size: 24px;
  color: #999;
  text-transform: uppercase;
  margin: -1em 0 .25em 0;
}
  


/**
 * Div widths based on columns spanned
 * 30 px columns
 * 5 px gutters (1 on outer edges, 2 between columns)  
 * math: numCols * 30 + (numCols - 1) * 10
 */ 
 
.col {
  float: left;
  margin: 0 5px;
}

.col.five{
  width: 190px;
}

  .col.five .callout img{
    width: 190px;
    height: 120px;  
  }

.col.six{
  width: 230px;
}
 
.col.eight {
  width: 310px;
}

  .col.eight .callout img{
    width: 310px;
    height: 189px;
  }
  
  .col.eight .calloutFloat img{
    width: 110px;
    height: 132px;
  }
  
  .col.eight .calloutFloat p{
    float: left;
    width: 190px;
    margin-top: 0;
    }
    
    /* TODO apply this to all .call-to-actions? */
    .col.eight .calloutFloat .call-to-action{
      clear: left;
    }
  
.col.eleven {
  width: 430px;
}

.col.thirteen{
  width: 510px;
}

.col.fourteen {
  width: 550px;
}

  .col.fourteen img{
    width: 550px;
    height: 336px;
  }

.col.fifteen {
  width: 590px;
}

.col.seventeen{
  width: 670px;
}

.col.eighteen {
  width: 710px;
}

  .col.eighteen .calloutFloat img{
    width: 150px;
    height: auto;
  }

.col.twenty-four {
  width: 950px;
}

  .col.twenty-four.explore-further img, .featured-athletes img{
    width: 390px;
    height: 240px;
  }

.push-1{
  padding-left: 40px;
}

.push-2{
  padding-left: 80px;
}

.push-4{
  padding-left: 150px;
}

.push-5{
  padding-left: 190px;
}

.push-6{
  padding-left: 230px;
}

.push-8{
  padding-left: 310px;
}


/*
 * CALL OUTS
 * */

div.rightCol div.callout { font-size: 14px; }
div.leftCol div.callout { padding-bottom: 28px; margin-bottom: 25px; }
div.callout {
    font-size: 16px; 
    line-height: 1.5; /* 24px baseline grid */
    border-bottom: 1px solid #CCC;
    padding-bottom: 14px;
    margin-bottom: 17px;
}

    div.callout:last-child {
        border-bottom: 1px solid #72b619;
    }

    div.callout p {
        margin: 0.5em 0;
    }


/* Why do this? Most callout headings are in all caps 
    div.callout h2 { text-transform: none; } */ 

div.calloutFloat img {
    float: left;
    padding: 0 10px 10px 0;
}

/* moves the call to action to the bottom of the callout
   will overlap lengthy text content
   does not apply if call to action is embedded in paragraph */
.calloutFloat{ 
  position: relative;
}

/*.calloutFloat>.call-to-action{
  position: absolute;
  right: 0;
  bottom: 12px;
}*/

/*
 * Photo with Caption
 * */

div.photo {
    color: #666;
    padding: 0;
    margin-bottom: 36px;
}

    .photo .caption { 
      font-size: 12px; 
      line-height: 1.8;
      display: block;
      padding-bottom: 6px;
      border-bottom: 1px solid #72b619;
      }
      
div.transcript{
    border-bottom: 1px solid #72b619;
    padding: 0 0 6px 0;
    margin-bottom: 1em;
}

  .hero-zone .transcript{
    border-color: #FF6D03;
  }

  div.transcript .call-to-action{
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    display: inline;
    padding-left: 0;
  }
  
  
    
    
/*
 * Video link (non-embedded)
 * */
 
 /* TODO:
    hover and active states
    x-browser testing
*/ 
    
 .video-link{
   position: relative;
   margin: 0;
   padding: 0;
   clear: both;
   display: block;
 }
 
 .video-link span{
   display: block;
   position: relative;
 }
 
  .video-link a{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: url("../img/video_play_small.png") no-repeat center center;
  }
  
  /* switch to the larger icon */
  .eight .video-link a, .leftCallout .video-link a, .rightCallout .video-link a{
    background-image: url("../img/video_play_large.png");
  } 
  
  html body .video-link img{
    margin: 0;
  }
    
  
/* Call to Action */
/* TODO convert pair of arrows to a sprite */
.call-to-action{
    background: url("../img/blue_arrow.png") no-repeat right;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 18px 0 5px;
    display: block;
    text-align: right;
    letter-spacing: 1px;
    margin-top: 12px;
}

  .wf-inactive .call-to-action, .no-js .call-to-action{
    font-weight: bold;
    }
  

a.call-to-action:hover, a.call-to-action:focus, a.call-to-action:active {
  background: url("../img/orange_arrow.png") no-repeat right;
}

  .aside ul .call-to-action{
    display: inline;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0;
  }

div.explore-further {
    margin: 30px 0 0;
}

    div.explore-further h2.explore-further {
        float: left;
        width: 95px;
        height: 365px;
        margin: 0;
        background: url("../img/hdr_explore_further.png") no-repeat;  
    }
    
    /* these are also used for featured athletes */
    
    /*div.explore-further*/ .leftCallout,
    /*div.explore-further*/ .rightCallout {
        float: left;
        width: 390px;
    }

    /*div.explore-further*/ .leftCallout {
        border-left: 1px solid #81c527;
        padding: 0 22px;
    }

    /*div.explore-further*/ .rightCallout {
        border-left: 1px solid #CCC;
        padding: 0 0 0 22px;
    }


/*
 * INNER PAGE CAROUSEL
 * TODO button styles for links
 * */
div.explore-further.carousel h2.explore-further{
  width: 70px;
}

  div.explore-further.carousel img{
    width: 190px;
    height: 132px;
  }

.carousel h3{
  text-transform: uppercase;
  font-size: 30px;
  color: #72B619;
}

  .no-js .carousel h3, .wf-inactive .carousel h3{
    font-weight: bold;
    font-size: 22px;
  }

.carousel .bx-wrapper { 
    float: left; 

}

.carousel ul{
  width: 480px;
  overflow: hidden;
  margin: 0;
  float: left;
}

.carousel p{
  font-size: 14px;
}

.carousel li{
  /* TODO if not height limited, move this to the .bx-window and center it */
  background: url(../img/border.png) repeat-y right top;
  width: 190px;
  display: block;
  float: left;
  padding: 0 25px;
}

  .no-js .carousel li{
    width: 480px;
    float: none;
    background: transparent none;
    border-bottom: 1px solid #ccc;
    padding: 0 0 1em 0;
    margin: 0 0 1em 0;
    overflow: auto;
  }
  
  .no-js .carousel li img{
    float: left;
    padding-right: 10px;
  }

.carousel .next, .carousel .prev{
  width: 30px;
  background: no-repeat center center #e0f0ca;
  float: left;
  height: 365px;
  display: block;
  text-indent: -999em;
  z-index: 3;
  position: relative;
}

  .no-js .carousel .next, .no-js .carousel .prev{
    display: none;
  }

  .carousel .disabled{
    background-color: #f0fddf;
  }

/* TODO check this in IE7 (hover/carousel slide effects)*/
/* TODO add hover, focus, and active effects */

  .carousel .next{
    background-image: url("../img/carousel_forward_enabled.png");
    margin-left: -11px;
  }

    .carousel .next.disabled{
      background-image: url("../img/carousel_forward_disabled.png");
    }

  .carousel .prev{
    background-image: url("../img/carousel_back_enabled.png");
    margin-right: -11px;
  }

    .carousel .prev.disabled{
      background-image: url("../img/carousel_back_disabled.png");
    }

/*
 * HOME PAGE
 * */

/* Home Slideshow */
#slideshow {
    background-repeat: no-repeat;
    background-position: center top;
    margin: -36px auto 25px;
    height: 499px;
    position: relative;
    overflow: hidden;
    padding-bottom: 90px;
}

  #slideshow .bx-wrapper{
    height: 449px;
  }
  
  #slideshow .bx-window, #slideshow #slides{
    height: 100%;  
  }
  

    #slideshow #slideshow-inner {
        position: absolute;
        left: 68px;
        z-index: 4;
    }

    #slideshow div.slide-image {
        background-position: center top;
        background-repeat: no-repeat;
        position: absolute;
        height: 499px;
        width: 1008px;
        z-index: 1;
    }

    #slideshow ul#slides { 
      margin: 0;
      height: 449px;
      overflow: hidden;
    }
    
    #slideshow #slides li{
      display: block;
      height: 100%;
    }

    #slideshow #donate-now { position: absolute; top: 0; left: 71px; }
    
	#slideshow img.preload { display: none; }
	
    #slideshow div.slide {
        background: url(../img/slide-bg-tile.png) repeat left top;
        width: 294px;
        color: #fff;
        padding: 70px 25px 25px;
        margin: 0 0;
        font-size: 19px;
        line-height: 1.3;
        height: 100%;
    }

        #slideshow h2 {
            text-transform: uppercase;
            font-size: 56px;
            color: #81c527;
            line-height: 1;
            margin: 0.1em 0 0.2em;
        }
        
          .no-js #slideshow h2 , .wf-inactive #slideshow h2{
              font-size: 48px;
            }

        #slideshow div.slide a.call-to-action {
            background-image: url("../img/slideshow-cta.png");
            color: #ffcc00;
            font-size: 14px;
            letter-spacing: 0.05em;
            padding-right: 23px;
            background-position: right 1px !important;
        }
 
    #slideshow div.slide-nav {
        /*background: url(../img/slide-nav-bg.png) no-repeat left top;*/
        background: url(../img/slide-bg-tile.png);
        width: 344px;
        height: 49px;
        border-top: 1px dotted #fff;
        position: relative;
        text-align: center;
    }

        #slideshow div.slide-nav div.pager {
            display: inline-block;
            margin: 22px auto 0;
        }
        
          .ie7 #slideshow div.slide-nav div.pager {
            margin-left: 140px;  
          }

            #slideshow div.bx-window { width: 410px !important; }

            #slideshow div.slide-nav div.pager a {
                background: #ffcc00;
                float: left;
                width: 12px;
                height: 12px;
                text-indent: -999em;
                margin: 0 4px;
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;
                border-radius: 12px;
                outline: 0;
            }
                #slideshow div.slide-nav div.pager a:hover, #slideshow div.slide-nav li a:focus, #slideshow div.slide-nav li a:active { background-color: #ffec97; }
                #slideshow div.slide-nav div.pager a.active { background-color: #fff; }

        #slideshow div.slide-nav a.slide-left,
        #slideshow div.slide-nav a.slide-right {
            background: url("../img/slideshow_arrows.png") no-repeat;
            position: absolute;
            top: 11px;
            padding: 8px;
            width: 18px;
            height: 14px;
            text-indent: -999em;
        }

            #slideshow div.slide-nav a.slide-left {
                background-position: left -70px;
                left: 9px;
            }

            #slideshow div.slide-nav a.slide-right {
                background-position: right 8px;    
                right: 6px;
            }

    #slideshow #our-mission {
        /*background: url("../img/our-mission_bg.png") no-repeat center;*/
        background: url("../img/who-we-are.png") no-repeat 0 center;
        height: 90px; 
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 3;
    }
    #slideshow #our-mission-inner { 
        position: relative; 
        top: 13px; 
        width: auto; 
        padding: 0 35px;
        min-height: 50px;
    }

        #slideshow #our-mission h1 {
            color: #701471;
            font-size: 36px;
            text-transform: uppercase;
            float: left;
            line-height: 1;
            padding-right: 20px; 
            position: relative;
            top: 3px; left: 33px;   
        }
        
        .wf-inactive  #slideshow #our-mission h1, .no-js  #slideshow #our-mission h1{
            font-size: 32px;
          }

        #slideshow #our-mission p {
            color: #444;
            font: italic 19px/20px Times New Roman, serif;
            text-align: right;
            padding-top: 9px;
        }
    
        #slideshow #our-mission a.call-to-action {
            display: inline-block;
            font-size: 14px;
            font-style: normal;   
            color: #701471;
            letter-spacing: 0;
            background: none;
            margin: 0;
            position: relative;
            right: -14px;
        }
        #slideshow #our-mission a.call-to-action .arrow { font-size: 20px; }
        
#slideshow .social-media {
    position: absolute;
    top: 0; right: 0;
    height: 499px; width: 191px;
    border-left: 1px solid #fff;   
}
    
    /* Follow */
    #slideshow .social-media .follow {
        height: 57px;
        position: relative;
        background: #b5d981;
        border-bottom: 1px solid #fff;
    }
        #slideshow .social-media .follow a {
             display: block;
             background: url("../img/social-media.png") -7px 0;
             height: 27px; width: 84px;
             text-indent: -9999px;
             position: absolute;
             left: 7px; top: 15px;
         }
         #slideshow .social-media .follow .facebook {
             background-position: -100px 0;
             left: auto;
             right: 7px;
         }
    
    /* Medias */
    #slideshow .social-media .medias {
        height: 57px;
        position: relative;
        border-bottom: 1px solid #d8640f;
        background: #a0dff2;
    }
         #slideshow .social-media .medias a {
             display: block;
             background: url("../img/social-media.png") left -43px;
             height: 57px; width: 95px;
             text-indent: -9999px;
             position: absolute;
             left: 0; top: 0;
         }
         #slideshow .social-media .medias .facebook {
             background-position: right -43px;
             left: auto;
             right: 0;
         }
    
    /* Twitter Feed */
    #slideshow .social-media .twitter-feed {
        background: #a0dff2;
    }   
        #slideshow .social-media .twitter-feed .tweet:first-child { border-top: 0; }
        #slideshow .social-media .twitter-feed .tweet {
            height: 105px;
            border-top: 1px solid #666;
            overflow: hidden;
            font: 12px/16px "Times New Roman", Times New Roman, serif;
            color: #333;
            padding: 11px;
            position: relative;
        }
            #slideshow .social-media .twitter-feed .tweet a { color: #de670f; }
            #slideshow .social-media .twitter-feed .tweet .posted {
                display: block;
                position: absolute;
                bottom: 11px; left: 11px;   
                background: #a0dff2;
            }
            
    /* twitter api */
    .twtr-doc { height: 383px; }
    .twtr-ft,
    .twtr-avatar,
    .twtr-hd { display: none !important; }
    .twtr-tweet-text { 
        margin-left: 0 !important; 
        font: 12px/16px "Times New Roman", Times New Roman, serif !important;
    }
    .twtr-tweet-wrap { padding: 11px !important; }
    .twtr-tweet { border-bottom: 1px solid #666 !important; }
    .twtr-widget em { display: block; margin-top: 11px !important; }
    .twtr-timeline { height: 383px !important; }
    .twtr-results-hr { border-color: #666 !important; }


/* home cols */
div.homeColLeft {
    width: 393px;
    float: left;
    margin-right: 47px;
}

  .homeColLeft .callout img{
    width: 390px;
  }

  .homeColLeft .calloutFloat img, .homeColRight .calloutFloat img{
    width: 110px;
    height: 132px;
  }
  
  

div.homeColMid {
    background: #b9eaf6 url("../img/wsf_news_bg.png") no-repeat bottom;
    width: 191px;
    margin-right: 47px;
    float: left;
    padding: 10px 0 64px;
    line-height: 1.5;
}

    div.homeColMid h2 {
        /*background: url("../img/hdr_wsf_poweredby_espn.png") no-repeat 7px 0;*/
        width: 100%;
        margin: 10px 0 0 0;
        border-bottom: 1px solid #d8640f;
        text-align: center;
    }
    
      .blog div.homeColMid h2.news-poweredby-espnw{
        background-image: url(../img/hdr_wsf_poweredby_espn_blog.png);
        height: 67px;
      
      }

   div.homeColMid h3 {
        font-size: 14px;
        color: #333;
        line-height: 1.5;
        margin: 0;
        text-transform: uppercase;
    }

    div.homeColMid div.callout {
        border-color: #666;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    div.homeColMid div.callout a {
        color: #333;
        display: block;
        padding: 14px 10px;
    }
    
    div.homeColMid div.callout a:hover, div.homeColMid div.callout a:focus, div.homeColMid div.callout a:active,
    div.homeColMid div.callout a:hover h3, div.homeColMid div.callout a:focus h3, div.homeColMid div.callout a:active h3{
      color: white;
      background-color: #419fb5;
    }
    
    div.homeColMid div.callout a p{
      margin: 0;
    }
    
     div.homeColMid a.call-to-action {
       margin: 1em 24px 0 0;

     }
    

div.homeColRight {
    width: 272px;
    float: left;
    margin-bottom: 2.5em;
}

  .homeColRight .calloutFloat p{
    /*width: 249px;
    float: left;*/
  }

  .homeColRight blockquote{
    font-style: italic;
    font-size: 1em;
    margin: 0;
    padding: 0;
    background: transparent none;
  }
    
    .homeColRight blockquote .attribution{
      font-style: normal;
      text-align: right;
    }

/* Home Sponsors */
div.sponsors {
    margin: 35px 0 50px 0;
    padding-top: 20px;
    border-top: 1px solid #ccc; 
    clear: left;
}

    div.sponsors h2.partners {
        background: url("../img/hdr_partners.png") no-repeat;
        width: 52px;
        height: 142px;
        margin: 0;
        float: left;
    }

    div.sponsors div.national-sponsor { margin-right: 4px; }

    div.sponsors div.national-sponsor,
    div.sponsors div.corporate-sponsor {
        float: left;
    }

    div.sponsors li,
    div.sponsors a {
        float: left;
    }

    div.sponsors h3 {
        background: #fcecb8;
        font-size: 12px;
        color: #ff6d03;
        text-transform: uppercase;
        padding: 0 13px;
        line-height: 24px;
        text-align: center;
    }
    
/**
 * LANDING PAGES 
 */ 
 
 /* repeats a lot of #slideshow - only height, top margin changed */
 .landing-hero{
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0 auto 25px;
    height: 490px;
    width: 1200px;
    position: relative;
    text-shadow: rgba(0,0,0,.4) 1px 1px 0;   
}

  .landing-hero.advocate{
    height: 600px;
  }
 
.landing-hero h2{
  font-size: 96px;
  color: White;
  margin-bottom: 0;
}

  .no-js .landing-hero h2, .wf-inactive .landing-hero h2{
     font-size: 58px;
     margin-top: .6em;
    }

.landing-hero blockquote{
  font-style: italic;
  color: White;
  font-size: 24px;
  background: url("../img/quote_open_league_yellow.png") no-repeat scroll 0 8px transparent;
  margin-bottom: 1em;
}

.landing-hero .attribution, .landing-hero .attribution a{
  text-transform: uppercase;
  color: #ffcc00;
  font-size: 24px;
  text-align: right;
  line-height: 1;
  letter-spacing: .05em;
}

  .no-js .landing-hero .attribution, .no-js .landing-hero .attribution a, .wf-inactive .landing-hero .attribution, .wf-inactive .landing-hero .attribution a{
    font-size: 16px;
    font-weight: bold;
    }


  /**
   * LINK BLOCK (group of stacked link buttons in the large page-top hero sections )
   */ 
 
  .link-block{
    margin-top: 48px;
  }

    .link-block a{
      color: #ffcc00;
      text-transform: uppercase;
      font-size: 48px;
      display: block;
      padding: 16px 0;
      line-height: 1;
    }
    
      .no-js .link-block a, .wf-inactive .link-block a{
        font-size: 32px;
        font-weight: bold;
        }
  
  
    .link-block a:focus, .link-block a:hover, .link-block a:active{
      text-shadow: 0;
      background: url(../img/slide-bg-tile.png) repeat left top;
      
    }

    .link-block .sub{
      color: #FFF;
      display: block;
      font-weight: normal;
      text-transform: none;
      font-size: 16px; /* what is our base font size?? */
      letter-spacing: 0;
  
    }

    .link-block li{
      border-top: 1px solid white;
      text-align: center;
      padding: 0 2px;
    }  

    .link-block li:last-child{
      border-bottom: 1px solid white;
    }


 /**
 * HERO ZONE (large light blue content area on top-level pages)
 */ 
.hero-zone{
 background: url("../img/wsf_hero_zone_bg.png") no-repeat scroll center bottom transparent;
 padding-bottom: 44px;
}

  .hero-zone .inner-container{
     background: url("../img/wsf_hero_zone_bg_block.png") repeat scroll transparent;
     padding: 0 20px 1em 20px;
  }

  .hero-zone h2{
    color: #333;
    border-bottom: 1px solid #ff6d03;
    line-height: 1;
    padding: 18px 0;
    margin-bottom: 18px;
  }
  
  
  .hero-zone p, .hero-zone ul{
    margin: 1.25em 0;  
  } 
  
  .hero-zone  ul.footer{ /* more semantic name? is this reused anywhere? */
    font-weight: bold;
    margin-bottom: 0;
    list-style: none;
  }
  
   .hero-zone ul.footer li{
      margin: 0;
     }
  
	.hero-zone .footer li a{
		background: url(../img/blue_arrow.png) no-repeat scroll right center transparent;
		padding-right: 15px;
		display: inline-block;
	}
	
	.hero-zone .footer li a:active, .hero-zone li a:focus, .hero-zone li a:hover{
		background-image: url(../img/orange_arrow.png);
	}
		
  .hero-zone .photo{
    border-color: #888;
  }

/**
 * BLOG & CONTENT/ARTICLE METADATA
 */
 
.blog #page-title-bar p{
  color: #fff;
  border: 1px solid #069;
  border-width: 1px 0;
  float: left;
  width: 170px;
  margin: 0 0 0 13px;
  font-size: 28px;
  line-height: 1.285;
  letter-spacing: 0;
  padding: 14px 0;
}
 
  .blog #page-title-bar p em{
    font-size: 48px;
    text-transform: uppercase;
    line-height: 1.16;
    font-style: normal;
    
  }
 
.blog #page-title-bar p.ir{
        background: url("../img/hdr_she_force.png") no-repeat;
        width: 27px;
        height: 397px;
        margin: 0 0 0 10px;
        float: left;
        border: none;
        padding: 0;
}

div.tags {
    border-bottom: 1px solid #72b619;
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    width: 100%;
    padding: 10px 0 20px;
    margin: 0 0 21px;
}

    div.tags li {
        float: left;
        margin: 4px 4px 4px 0;
    }

    div.tags a {
        background: #f6e6b2;
        padding: 7px 13px;
        float: left;
        -moz-border-radius: 18px;
        -webkit-border-radius: 18px;
        border-radius: 18px;
    }
    
    div.tags a span{
      padding: 10px 0;
    }
     
        /* TODO background image fallback fails for tags on 2 lines - look at blog post page */
        div.tags a:hover, div.tags a:focus, div.tags a:active {
          background-color: #419fb5;
          color: #f6e6b2;
        }

          html.no-borderradius div.tags a{
            background: transparent url(../img/rounded_tag_corners_trans.png) no-repeat right -128px;
          }
          
         .no-borderradius div.tags a span{
           background: #f6e6b2;
         }
    
          html.no-borderradius div.tags li{
            background: transparent url(../img/rounded_tag_corners_trans.png) no-repeat left bottom;
          }
          
          html.no-borderradius div.tags li:hover{
            background: transparent url(../img/rounded_tag_corners_trans.png) no-repeat left -64px;
          }
          
          .no-borderradius div.tags li:hover span{
            background: #419fb5 ;
          }
          
          html.no-borderradius div.tags li:hover a{
            background: transparent url(../img/rounded_tag_corners_trans.png) no-repeat right top;
            color: #f6e6b2;  
          }
          
          html.no-borderradius div.tags a:active, html.no-borderradius div.tags a:focus{
            color: #ff6d03;
          }


div.published {
    border: solid #72b619;
    border-width: 0 0 1px 0;
    text-transform: uppercase;
    color: #999;
    font-size: 12px;
    padding: 10px 0;
    font-weight: bold;
}



    div.published p {
        margin: 0;
        line-height: 1.6;
    }

    div.published a {
      font-size: 14px;
      text-transform: none;
      letter-spacing: 0;
    }



div.additional-reading {
    margin: 43px 0 0;
}

    div.additional-reading h2 {
        background: url("../img/hdr_additional_reading.png") no-repeat;
        width: 58px;
        height: 295px;
        float: left;
        margin: 0;
    }

    div.additional-reading ul {
        border-left: 1px solid #72b619;
        padding-left: 15px;
        float: left;
        width: 475px;
    }

    div.additional-reading a {
        display: block;
        color: #333;
        border-bottom: 1px dotted #72b619;
        padding: 13px 0;
    }

    div.additional-reading li:first-child a {
        border-top: 1px dotted #72b619;
    }

    div.additional-reading li a:hover, div.additional-reading li a:focus, div.additional-reading li a:active {
        color: #FF6D03;
        background-color: #f8f0d3;
    }
    
    .reading-list li{
      margin-bottom: 0;
    }
    
    .reading-list a span{
       padding-right: 18px;
       padding-left: 6px;
       /*background: url("../img/blue_arrow_13x14.png") no-repeat right center;  */
       background: url("../img/blue_arrow.png") no-repeat right center;  
    }
    
      .reading-list a:hover span, .reading-list a:focus span, .reading-list a:active span{
         background-image: url("../img/orange_arrow.png");  
      }
    
 /*
 * Blog-Specific Styles
 * */
 
 /* moves content pages down for the donate now tab */
 .blog .colWrap {
   margin-top: 40px;
 }
 
 h2.results{
    margin: 0;
  }
 
 .blog-featured .eight{
   width: 270px;
   padding: 0 20px;
 }
 
.blog-featured div h2, .blog p.partner{
   font-size: 14px;
   text-transform: uppercase;
   color: #72B619;
   margin-bottom: 1em;
 }
 
   .blog p.partner{
     margin-bottom: 0;
   }
 
  .blog p.partner img{
    padding-left: 20px;
    vertical-align: middle;
  }
  
 
.blog-featured .callout h3{
   font-size: 30px;
   padding-top: 20px;
 }
 
 .blog-featured .calloutFloat h3{
   font-size: 21px;
   padding-top: 8px;
 }
 
 .blog-featured .see-more{
   text-align: left;
   font-size: 14px;
   padding: 0 18px 0 0;
   display: inline;
   letter-spacing: 1px;
 }
 
 .rollover-hero{
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0 auto 25px;
    height: 490px;  
 }
 
   .rollover-hero #donate-now, #page-title-bar #donate-now{
      position: absolute;
      left: 150px;
      top: 0;
      z-index: 10;
   }
   
   .search-results .post{
     border-top: 1px solid #72B619;
     margin-bottom: -1px;
   }
   
   .search-results .colWrap{
     margin-top: 40px;
   }
 
 /* much of this is also used on the search results page for the entire site */
   .post{
     border-bottom: 1px solid  #72B619;
     padding-top: 36px;
   }
   
   .post:first-child{
     border-top: 1px solid  #72B619;
   }
   
   .post .entry{
     width: 550px;
     float: right;
     padding-bottom: 48px;
   }
   
     
    .search-results .tags h2{
      text-indent: -99999em;
      height: 0;
      margin: 0;
    }
   
      /* sometimes we use one, sometimes the other */
     .post .entry.calloutFloat h2, .post .entry.calloutFloat h3{
       font-size: 30px;
     }
     
    
    .blog .post .entry h2{
      margin-top: 0;
      text-transform: none;
      font-size: 48px;
      letter-spacing: 0;
    }
    
      .no-js  .blog .post .entry h2,  .wf-inactive .blog .post .entry h2{
        font-size: 36px;
      }
    
    .entry h2, .entry h3,
    .entry h2 a, .entry h3 a{
      color: #72B619;
    }
    
    .blog h2, .blog h3,
    .blog .entry h2 a, .blog .entry h3 a{
      color: #701471;
    }
    
    .results{
       font-size: 48px;
     }

     .blog .results{ 
       color: #72B619;
     }
     
      .post .entry h2 a:hover, .post .entry h2 a:focus, .post .entry h2 a:active, 
      .post .entry h3 a:hover, .post .entry h3 a:focus, .post .entry h3 a:active,
      .blog a:hover h3, .blog a:focus h3, .blog a:active h3{
        color: #419fb5;
      }

    .post .calloutFloat > .call-to-action{
      bottom: 36px;
    }
   
   .post .meta{
     width: 135px;
     float: left;
     padding-right: 15px;
   }
   
    .post .meta .tags{
      padding: 5px 0;
      border-bottom-width: 0;
      margin: 0;
    }
    
      .blog .meta .tags{
        padding: 10px 0 20px;
        border-bottom-width: 1px;
      }
   
   .meta .category, .meta .post-date{
     text-transform: uppercase;
     margin-bottom: 5px;
     color: #fff;
     line-height: 1;
   }
   
    .meta .category{
      font-size: 18px;
      display: block;
      color: #419fb5;
      margin: -10px 0 0 0;
      padding: 18px 10px 6px 10px; 
      background: url(../img/search_category.png) no-repeat top center transparent;
    }
    
      .no-js .meta .category, .wf-inactive .meta .category{
        font-size: 16px;
      }
     
    
    .blog .meta .category{
      padding: 14px 10px;
      color: #fff;
      margin: 0;
      background-image: none;
      background-color: #701471;
    }
    
       a.category:hover, a.category:focus, a.category:active{
         background-position: center bottom;
         color: #fff;
       }
      
    
      .blog a.category:hover, .blog a.category:focus, .blog a.category:active{
        background: none #ff6d03;
      }
    
    .meta .published{
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 0;
      line-height: 1;
      border-top-width: 1px;
      border-style: solid;
      border-color: #72B619;
    }
    

      
      .post .meta .published{
         border-width: 0;
         clear: left;
         padding: 5px 0;
      }
      
        .post .meta .tags + .published{
          border-top-width: 1px;  
        }
    
        .blog .post .meta .published{
          border-width: 0 0 1px 0; 
          padding: 8px 0;
        }
    
    .meta .published a{
      font-size: 18px;
      padding-left: 2px;

    }
     
    .meta .post-date{
      padding: 14px 0 0 0;
      background: transparent url(../img/post_date_bg.png) no-repeat top left;
    }
    
      .meta .post-date div{ 
        background-color: #99459a;
        padding: 0 10px;
      }
      
        .meta .post-date .date{
          font-size: 30px;
          letter-spacing: 0;
          padding-top: 6px;
        }
        
          .no-js .meta .post-date .date, .wf-inactive .meta .post-date .date{
            font-size: 24px;
          }
        
        
        .meta .post-date .time{
          font-size: 18px;
          padding-bottom: 12px;
        }
        
          .no-js .meta .post-date .time, .wf-inactive .meta .post-date .time{
            font-size: 16px;
          }
        
      .blog .meta .tags, .blog .meta .published{
        border-color: #701471;
      }
      
      .blog .our-mission{
        padding-top: 36px;
        border-color: #72B619;
        margin-bottom: 0;
      }
      
        .blog .rightCol h2{
          font-size: 30px;
        }
        
          .no-js  .blog .rightCol h2,   .wf-inactive .blog .rightCol h2{
            font-size: 24px;
          }
        
        .our-mission h2{
          margin: 12px 0 0 0;
        }
      
        .our-mission p{
          font-style: italic;
        }


/**
 * FIND A SOLUTION
 */
 
 body.find-a-solution-results h2.results{
   text-transform: uppercase;
 }
 
  body.find-a-solution-results .post{
    padding-top: 0;
    border-bottom: none;
  }
  
  body.find-a-solution-results .post .entry{
    border-bottom: 1px solid #ccc;
    padding-bottom: 1em;
  }
 
  body.find-a-solution-results .post .meta{
    display: none;
  }
  
  body.find-a-solution-results .post h3{
    margin: 28px 0 14px 0;
  }
 
 .leftCol .find-a-solution{
   border: 1px solid #72B619;
   border-width: 1px 0;
   padding: 1.75em 0; 
   margin: 1.5em 0 0 0;
   font-size: 18px;
 }
 
  .leftCol .select-box.problem{
    margin: .75em 0;
  }
  
  .leftCol .find-a-solution em{
    display: block;
    float: left;
    padding-right: 5px;
    padding-top: 4px;
    line-height: 1.5;
    letter-spacing: .2px;
  }
  
  .leftCol .find-a-solution input.ylwBtn{
    float: right;
  }

.landing-hero .find-a-solution{
  text-shadow: none;
  color: #333;
  padding-top: 44px;
}

  .landing-hero .find-a-solution h2{
    color: #333;
    font-size: 36px;
    margin-top: 11px;
  }
  
  .find-a-solution .seventeen{
    font-size: 18px;
    padding-top: 28px;
    line-height: 2;
  }
  
  .seventeen #sentence-article{
    width: 1em;
    display: inline-block;
    text-align: center;
  }
  
  input.ylwBtn{
    width: 105px;
    float: none;
    padding: 3px 0;
    line-height: 1;
    float: left;
    top: 0;
  }
  
  .find-a-solution select, .find-a-solution .select-box{
    font-size: 12px;
    /*text-transform: uppercase;*/
  }
  
  .find-a-solution .select-box{
    display: none;
    background-color: #f93;
    letter-spacing: 0;
    border-color: #ffb76e #bf7326 #bf7326 #ffb76e;
    vertical-align: middle;
    line-height: 1.3;
    margin-right: 6px;
    margin-left: 4px;
  }
  
    /* z-index boost to keep dropdown from going behind the next select-box */
    .find-a-solution .select-box.over{
      z-index: 750;
    }
    
    .find-a-solution #person-label, .find-a-solution .select-box{
      float: left;
    }
      
  
  .find-a-solution .select-box .display-all{
    border: 0;
  }
  
  .find-a-solution .problem{
    margin-left: 0;
  }
  
  .find-a-solution .current-value{
    padding: 6px 10px;
    text-transform: uppercase;
  }
  
    .find-a-solution .problem, .find-a-solution .problem ol{
      width: 550px;
    }
  
    .find-a-solution .problem .current-value{
      width: 500px;
    }
    
.find-a-solution .problem-wrap {
    margin-top: 6px;   
}
  
  


/**
 * SEARCH RESULT PAGES
 */

.search-count, .search-term {
  color: #ff6d03;
}

.blog .search-count, .blog .search-term {
  color: #701471;
}

/* the CMS sometimes adds p tags where they don't belong */ 
body #container h1 p,
body #container h2 p, 
body #container h3 p, 
body #container h4 p, 
body #container h5 p, 
body #container h6 p,
body #main h1 p,
body #main h2 p, 
body #main h3 p, 
body #main h4 p, 
body #main h5 p, 
body #main h6 p{
  margin: 0;
}


 
/**
 * CONVIO DONATE FORM STYLES 
 */
 
 #ProcessForm, #ProcessForm table{
   /*table-layout: fixed;*/
 }
 
 #ProcessForm td{
   margin: 0;
   padding: 0;
 }
 
 #ProcessForm .FormLabel img[height^="0"]{
   display: none; 
   
 }
 
 #ProcessForm .FormLabelText{
   /*white-space: nowrap;*/
   padding-right: 10px;
   display: block;
 }
 
 #ProcessForm tr.FormRow{
   display: block;
   width: 550px;
   height: auto;
   padding-bottom: 10px;
   
 }
 
 #ProcessForm .FormInput label, .convio .Smaller select, .convio Smaller label, .convio Smaller label a{
   letter-spacing: 0;
 }
  
 #ProcessForm .CheckboxLabel{
   width: 16em;
   float: none;
 }
 
 #ProcessForm .FormCaption{
   display: block;
   width: 550px;
 }
 
 #ProcessForm .FormInput{
   /*vertical-align: middle;*/
 }
 
 #ProcessForm .DFEC_el_wrapper{
   /*padding-bottom: 10px;*/
 }
 
 #ProcessForm td.requiredIndicator, .convio td.req{
   width: 10px;
   min-width: 0; 
   vertical-align: top;
 }
 
 #ProcessForm td.FormLabel, #ProcessForm td.FormInput,  #ProcessForm td.holdsErrorMsgTable, #ProcessForm td.requiredIndicator{
   margin: 0;
   padding: 0;
 }
 
 #ProcessForm .holdsErrorMsg{
   /*display: block;*/
 }
 
  #ProcessForm td.holdsErrorMsgTable{
    width: 250px;
  }
  
  #main #main-inner .colWrap #ProcessForm td table td.FormInfoMsg{
    height: auto;
    
  }
  
    #ProcessForm td table td.FormInfoMsg .InfoMessage2{
      background-color: black;      
      background: rgba(0,0,0, .75);
      padding: 5px;
      color: White;
      width: 12em;
    }
  
 
 #ProcessForm table, #ProcessForm select option, #ProcessForm .RadioGroupLabel {
   font-size: 16px;
 }
 
 #ProcessForm tr,  #ProcessForm .FormSectionHeader, TD.holdsErrorMsgTable, TD.holdsErrorMsgOverTable, TD.TestSecondaryColor{
   background-color: transparent;
 }
 

 #ProcessForm .FormSectionHeader h5{
   font-size: 48px;
   color: #72B619;
   border-top: 1px #ccc solid;
   padding: 20px 0;
   line-height: 1;
   width: 550px;
   margin: 5px 0 0 0;
 }
 
  #ProcessForm td.FormSectionHeader{
    border-bottom: 0;
  }
 
 #ProcessForm .FormLabel label, .FormLabelText, .appArea label, .convio .appArea .num, .convio .appArea .Explicit, .convio .contact-us .wrapable .Explicit, .scfForm label, .scfForm span{
   color: #ff6d03;
   font-size: 24px;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
 
    /* check box labels */
   .convio .wrapable, .convio .wrapable .Explicit, .scfForm table label, .scfCheckbox label, .convio .ShoppingSearchLabel label, .convio .ShoppingRow .Explicit label, .convio .ProductConfigLabel label, .scfForm .scfDateSelectorGeneralPanel label{
    font-size: 16px;
    color: #444;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
   }
   

   
    .appArea label.wrapable a{
      letter-spacing: 0;
    }
 
    #ProcessForm .FormLabelText{
      display: block;
      white-space: nowrap;
    }
 
 .convio textarea,  .convio input[type="text"],  .convio select {
   border: 2px solid #bbb;
   font-size: 1em;
 }
 
  .convio input{
    font-size: 1em;
  }
 
 .convio h3.ObjTitle, .convio h2, h1.scfTitleBorder{
   font-size: 72px;
   color: #72B619;
   text-transform: uppercase;
   margin-top: 0;
 }

.convio .appArea{
  margin: 0;
}

  .convio .appArea legend{
    float: none;
  }
 
 #ProcessForm .ButtonInput{
   width: auto;
 }
  
  .FormInput .FinishButton, .convio #ACTION_SUBMIT_SURVEY_RESPONSE{
    border: 0;
    margin-top: .5em;
  }
 
 .convio #main-inner .colWrap{
   margin: 0 0 25px 0;
  }
 
 .convio option{
   font-size: 100%;
 }

 .convio .callout{
   line-height: 1.6;
   }
   
 .convio .callout:first-child{
   border-top: 1px solid #72B619;
   }
 
 
 .convio .callout h2{
   font-size: 30px;
   margin-top: .3em;
 }
 
 .convio .vcard.callout h2{
   font-size: 24px;
   text-transform: none;
   margin-bottom: 0;
   letter-spacing: 0;
 }
 
 .convio .vcard .email.call-to-action{
   text-align: left;
   display: inline;
   color: #419FB5;
   padding-left: 0;
 }
 
 .convio .vcard .email.call-to-action:hover, .convio .vcard .email.call-to-action:focus, .convio .vcard .email.call-to-action:active{
   color: #FF6D03;
 }  
 
 .convio .vcard .tel{font-weight: bold;}
 .convio .vcard .tel .value{font-weight: normal;}
 
 .convio #donate-now{
    height: 36px;
    left: 29px;
    position: absolute;
    top: 132px;
    width: 194px;
    z-index: 5;
 }
 
 .convio .Hint{
   font-size: 16px;
   text-transform: none;
   letter-spacing: 0;
   color: #444;
 }
 
.convio td.FormInput textarea, .convio td.FormInput label, .convio td.FormInput input, .convio td.FormInput select, .convio td.FormInput option{
  font-family: inherit;
}
 
.convio .AdvocacyNSFix, .convio .Smaller{
  font-family: inherit;
  font-size: 1em;
  letter-spacing: 0;
}

/* next rule should replace this */
.convio .advocacy .WrapperBack #subject+p, .convio .advocacy .WrapperBack p:last-child{
  display: block;
}

.convio .appArea table table p.AdvocacyNSFix{
  display: block;
}

/* advocacy tweaks */

.convio .advocacy td{
  text-align: left;
}

.convio .advocacy .appArea table .Smaller br{
  display: none;
}

.convio .appArea table .Smaller label, .convio .advocacy .appArea table .WrapperBack label{
  display: inline;
  white-space: normal;
  vertical-align: middle;
  
}

  .convio .advocacy .appArea table .Smaller .checkbox{
    float: left;
  }

  .convio .advocacy .appArea table .Smaller .wrapable{
    float: right;
    width: 87%;
    padding-right: 4%;
  }

.convio .advocacy td{
  padding-bottom: 1em;
}

.convio .advocacy .Smaller select, .convio .advocacy .Smaller input{
  margin-left: 5px;
}

.convio .advocacy .WrapperBack{
  background-color: Transparent;
}

.convio .advocacy .WrapperBack td{
  padding: 10px;
}

.convio .advocacy .WrapperBack textarea{
  display: block;
}
 


.convio .advocacy .centered{
  border-bottom: 0;
}
  
  
 
 
 /* single-element tweaks for donation form */
 #donor_matching_employer_Row .FormInput{
   width: 300px;
 }
 
  #donor_matching_employer_Row .FormInput input{
    float: left;
  }
  
    #donor_matching_employer_Row td.holdsErrorMsgTable{
      width: 103px;
    }
    
    #ProcessForm .holdsErrorMsgTable tr.holdsErrorMsg{
      position: absolute;
      padding: 5px; 
      width: 10em;
    }

    #donor_matching_employersearchname{width: 190px; margin-right: 10px;}
    #donor_matching_employersearchBtn{width: 65px;}
 
 #donor_email_opt_in_Row .FormLabel{
  /* display: none;*/
  width: 1px;
 }
 
 #ProcessForm .FormInput fieldset td{
   vertical-align: middle;
 }
 
 #ProcessForm .FormInput fieldset td .RadioGroupLabel{
   width: auto;
 }
 
  #ProcessForm .FormInput fieldset table{
      table-layout: auto;
      width: 300px;
    }
 
  #ProcessForm .FormInput fieldset td .DonationLevelOtherAmount{
   float: left;
   margin-left: 5px;
 }
 
 #ProcessForm .ButtonInput{
   margin-top: 5px;
 }
 
 .convio form #reset, .convio form #ACTION_CANCEL_RESPONSE_SUBMIT{
   display: none;
 }
 
 .convio p{
   text-align: left;
 }
 
  .convio p.FormLabelText{
    margin-bottom: 0;
  }
 
 .convio .appArea p{
   padding-bottom: 1em;
   max-width: 500px;
 }
 
 .convio .appArea table table p{
   border: 0;
   padding: 0;
   display: inline;
 }
 
 .convio .appArea fieldset td{
   vertical-align: middle;
   padding-right: 6px;
 }
 
 .convio fieldset legend.surveyLegend{
   padding-right: 6px;
 }
 
 .convio .NetscapeFix{
   font-size: 100%;
 }
 
 .convio .requiredIndicator img.ExpandedMessageHolder{
   width: 1px;
   height: 1px;
 }
 
 .convio #main img{ /* .spacer and others*/
   height: auto;
   width: auto;
   vertical-align: middle;
 }
 
 .convio #main img.spacer{
   height: 0;
   width: 0;
 }
 
/* for ie */
body.convio p, body.convio ul {
  font-family: inherit;
}

/**
 * CONVIO ECOMMERCE
 */
  .convio .ShoppingSearchLabel label{
    line-height: 1.2;
  }
   
  .convio .ShoppingCartContents{
    width: 98.5%;
  }
   
  .convio p.ShoppingSearch{
    padding-right: 5px;
  }
  
  .convio .ShoppingAdditionalGift p, .convio .ShoppingCartContents p{
    margin-bottom: 0;
  }
  
  .convio .SuccessMessage, .convio .WarningMessage{
    font-size: 16px;
  }
 
 
/**
 * SITECORE FORM MODULE STYLES
 */
 
 .scfForm{
   margin-bottom: 4em;
 }

.scfIntroBorder, .scfFooterBorder, .scfSubmitButtonBorder{
  margin-bottom: 1em;
}

.scfSubmitButtonBorder input{
  float: none;
}

.scfMultipleLineTextBorder {
	padding: 5px 0;
	margin: 0;
}

.scfForm label{
  line-height: 1;
  padding-bottom: .5em;
}

/* TODO what does overflow do with a required asterisk? */
.scfCheckBoxListBorder, .scfRadioButtonListBorder{
  padding-bottom: .5em;
  width: 100%;
  overflow: auto;
}

.scfForm span input, .scfForm table input, .scfForm span label, .scfForm table label{
  vertical-align: middle;
  margin-right: 5px;
  padding-bottom: 0;
}

.scfForm .scfDateSelectorGeneralPanel label{
  padding: 0;
  font-size: 14px;
  
}

.scfSectionBorder{
  overflow: auto;
}

.scfSectionContent div{
  position: relative;
}

.scfRequired{
 position: absolute;
 left: -12px; 
}

.scfForm textarea{
    padding: 0;
  }
 

/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
#header-inner:before, #header-inner:after,
#main-inner:before, #main-inner:after,
#footer-inner:before, #footer-inner:after,
div.callout:before, div.callout:after,
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
#header-inner:after,
#main-inner:after,
#footer-inner:after,
div.callout:after,
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
#header-inner, #main-inner, #foot-inner, div.callout,
.clearfix { zoom: 1; }

/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; float: none !important;} /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 16px; text-transform: lowercase;}
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
  
  /* custom print rules */
  #container .foot-bar, #main-nav, #sub-nav, #utility-nav, #social-nav, #footer-nav, #footer-utility-nav, div.tags, #page-nav, #page-title-bar h1 a, #page-title-bar h1 br, a.request-speaker { display: none; }
  div.rightCol, div.leftCol, span.caption, #container .col { width: auto; display: block;}
  .push-1, .push-2, .push-4, .push-5, .push-6, .push-8 {padding-left: 0;}
  
  #header{height: auto;}
  #header #logo a{
    text-indent: 0;
    height: auto;
    width: auto;
    display: block;
    font-size: 2em;
  }
  #header #logo a:after { content: ""; }
  
  #large-bg-container { margin-bottom: 0; padding-bottom: 0; } 
  

}