/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: .75em; line-height: 1.3333; } /* 12px base font size, 16px line height */
html>body {font-size: 12px; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: 	#00A256; color: #fff; text-shadow: none; }
::selection { background:	#00A256; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #0C7DB2; text-decoration: none; }
a:visited { color: #551a8b; }

.utility a:hover, .utility a:focus, .utility a:active,
a:hover, a:focus, a:active { color: #CC7F00; }

a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

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

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

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

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

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

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: The Atom Group
   ========================================================================== */

/*** font definitions ***/
header .audience, 
header nav h3,
h1, h2, h3, h4, 
.button, input[type="submit"],
.seven .link-details li a, .link-details a.view-all,
.featured-link.solid .title, .featured-link.image .title,
.three-col-promo-blocks h3 a,
.image-promo a,
.tabs a .title, .tabs.horizontal a,
.carousel .find-out-more .find-out-more-light a,
.video-list .title,
.banner.action-links li,
.mixed-links li a,
.topic-block div,
.global.audience-chooser a,
.calendar-detail .event-outline .date-and-time,
.wireframe-error .suggested-links li a
{
  font-family: ff-meta-web-pro, arial, sans-serif;
  font-weight: normal;
}

.article h2.color-bar,
.description h2,
.featured-link a h2,
.image-promo h2,
.banner h4,
.wireframe-23 .carousel .slide h4,
.scfForm h1,
.wireframe-error h2,
.wireframe-4 .slide h4
{
  font-family: "Times New Roman", Times, Serif;
}

body{
  background-color: #00A256;
}

#container{
  background-color: #fff;
  width: 100%;  
  margin-top: 7px;
  min-width: 1000px;
}

header, #main, footer .container, .legal{
  width: 970px;
  margin: 0 auto;
  float: none;
}

header ul, footer ul, .legal ul{
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

/*** HEADER ***/
header{
  background: url(../img/bg-full-width-shadow.jpg) no-repeat center bottom;
  padding-bottom: 10px;
}

header img, header .utility, header nav{
  float: left;
}

header nav{
 background-color: #EEECE6;
 border-radius: 3px;
}

header img{
  margin-top: 52px;
}

header .utility, header nav>ul{
  width: 805px;
}

header nav>ul{
  z-index: 30;  
}

header .utility{
  height: 83px;
  margin-top: 18px;
  margin-bottom: 13px;
  position: relative;
  z-index: 70;
}

  .utility .audience{
    display: block;
    font-size: 22px;
    color: #666;
    position: absolute;
    bottom: 0;
    left: 12px;
    font-weight: bold;
  }
  
  .utility .search{
    position: absolute;
    bottom: 0;
    right: 0;
  }
  
    .utility input{
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    
    .utility input[name]{
      padding: 7px 10px;
      width: 165px;
    }
  
    .utility button{
      background: transparent url(../img/bg-search-button.png) no-repeat left center;
      text-indent: -9999em;
      width: 34px;
      height: 32px;
      margin-left: 2px;
      border: 0 none;
    } 
    
    .utility button:hover,
    .utility button:focus,
    .utility button:active{
      background-position: right center;          
    }
    
  .utility ul{
    margin: 0;
  }
  
  .utility ul li{
    display: block;
    float: left;
    margin: 0 5px;
  }

  .audience-chooser, .quick-help{
    position: absolute;
    top: 0;
    margin: 0;
  }
  
  .audience-chooser{
    left: 10px;
  }
  
  .global.audience-chooser{
    top: 60px;
    background-color: transparent;
    width: auto;
  }
  
  .global.audience-chooser>ul{
    width: auto;
  }
  
    .quick-help{
      right: 0;
      z-index: 68;
    }
    
    .quick-help li>a, .quick-help .support-phone span{
      padding: 4px 6px 4px 16px;
      background: url(../img/bg-header-contact.gif) no-repeat 2px center;
      color: #000;
      margin-left: 2px;
      display: block;
    }
    
      .quick-help .support a{
        background-position: -172px center;
      }
	  
	  .quick-help .languages a{
		background-position: -520px center;  		
	}
      
      /* TODO test on mobile - iphone inserts <a> */
      .quick-help .support-phone a,
      .quick-help .support-phone span{
          background-position: -348px center;
          font-weight: bold;
          font-size: 1.1666em;
      }
      
      .quick-help li.my-account{
        position: relative;  
        z-index: 65;
      }
      
      .quick-help li.my-account.open{
        background-color: #ECE9E2;
        border-radius: 4px 4px 0 0;
      }
      
       .quick-help li.my-account.open>a{
        color: #000;
      }
      
      .quick-help li.my-account .sign-in{
        position: absolute;  
        z-index: 60;
        border-radius: 4px 0 4px 4px;
        right: 0;  
        display: none;
        /*background-image: url(../img/icon-lock.png); NO NEED FOR LOCK */ 
        background-repeat: no-repeat;
        background-position: 106px 172px;
      }
      
      .quick-help li.my-account.open .sign-in{
        display: block;           
      }
      
      .quick-help li.my-account.open,
      .quick-help li.my-account .sign-in{
        box-shadow: 2px 2px 2px rgba(0,0,0,.25);
      }
      
      .quick-help li.my-account .sign-in h2{
        font-size: 1.5em;
        color: #191919;
        line-height: 1;
      }
      
    .audience-chooser ul{ float: left; margin-left: 5px; }
    
    .audience-chooser, .audience-chooser a{ color: #666; }
    .utility .audience-chooser li{ margin-left: 0; }
    div.audience-chooser li:after{ content: "|"; margin-left: 5px; }    
    .ie7 div.audience-chooser li{border-right: 1px solid #666; padding-right: 5px; line-height: 1; margin-top: .25em;}
    
    div.audience-chooser li.last{border-right: 0;}
    
    div.audience-chooser li:last-child:after{ content: ""; }
    div.audience-chooser li.last:after{ content: ""; }
    
    .audience-chooser em{ float: left; font-weight: bold; font-style: normal; margin-right: 5px; }
    .audience-chooser span{ float: left; }
    
    .global.audience-chooser{
      font-size: 1.8333em;
    }
    
    .global.audience-chooser ul{
      margin-left: 0;
    }
    
    .global.audience-chooser li{
      border-right: 1px solid #B9C2BF;
    }
    .audience-chooser li:last-child,
    .audience-chooser li.last{ border-right: 0; }
    
    
    .global.audience-chooser a{
      padding: 0 20px;
    }

    .global.audience-chooser a:hover,
    .global.audience-chooser a:focus,
    .global.audience-chooser a:active{
      color: #00A054;
    }

/*** mega menu ***/
header nav>ul>li{
  display: block;
  float: left;
  z-index: 25;
  border-right: 1px dotted #B7D1F0;
  border-left: 1px solid #fff;
}

header nav>ul>li.first{
  border-left: 0;
}

/*header nav>ul>li.first h3 a{
  border-radius: 3px;
  }*/

header nav>ul>li.last{
  border-right: 0;
}

header nav li{
  position: relative;
}

header nav h3{
  margin: 0;
}

header nav h3 a, 
header nav h3 a:visited {
  display: block;
  color: #3B3B3B;
  background-color: #EEECE6;
  padding: 12px 11px;
  font-size: 16px; /* TODO font sizing in em */
}

header nav .global h3 a{
  padding: 12px 8px;
}

header nav li.active h3 a{
  color: #00A256;
  padding-bottom: 9px;
  border-bottom: 3px solid #00A256;
}

.no-js header nav li:hover h3 a,
header nav li.open h3 a,
header nav li h3 a:focus,
header nav li h3 a:active{
  background-color: #fff;
  border-color: #fff;
  color: #3B3B3B;
}

  .no-js header nav li:hover .menu,
  header nav li.open .menu{
    display: block;
  }
  
header .menu{
  position: absolute;
  z-index: 5;
  border: #EAE8E2 solid 10px;
  border-width: 10px 8px 9px 8px;
  border-radius: 4px 4px;
  background-color: #fff;
  width: 860px; /* TODO widths are different for each menu! */
  display: none;
  padding: 13px;
}

/* MEMBERS */
.members .menu.wellness_treatment { left: -40px; width: 645px; }
.members .menu.use_your_benefits { left: -225px; width: 718px; }
.members .menu.rxcorner { left: -256px; width: 425px; } /*changed from 450 to 425 to hide 3rd callout*/
.members .menu.health_plans { left: -258px; width: 635px; }
.members .menu.medicare { left: -88px; width: 208px; }
.members .menu.classes_events { left: -380px; width: 525px; }


/* EMPLOYERS */
.employers .menu.our_health_plans { left: -132px; width: 619px; }
.employers .menu.get_your_job_done { left: -70px; width: 477px; }
.employers .menu.wellness_solutions { left: -338px; width: 717px; }

/* PROVIDERS */
.providers .menu.programs { left: 0px; width: 184px; }
.providers .menu.support_your_cdphp_patients { left: 0px; width: 208px; }
.providers .menu.rxcorner { left: 0px; width: 170px; } /* repeat */
.providers .menu.get_your_job_done { left: -464px; width: 780px; } /* repeat */


/* BROKERS - repeats of employers */
.brokers .menu.our_health_plans { left: -196px; width: 619px; }
.brokers .menu.get_your_job_done { left: -360px; width: 894px; }
.brokers .menu.wellness_solutions { left: -336px; width: 678px; }

/* GLOBAL */
.global .menu.about_us { left: -8px; width: 345px; }
.global .menu.healthcare_reform { left: -8px; width: 195px; }
.global .menu.customer_support { left: -70px; width: 190px; }

.menu a{
  font-size: 1em;
  line-height: 1.5;
}

.menu h4 a{
  color: #222;
  line-height: 1.1;
}

.menu h4 a:hover, 
.menu h4 a:focus, 
.menu h4 a:active{
  /*border-bottom: 1px solid #222;*/
  font-weight: normal;
  text-decoration: underline;
}

.menu a.pdf{
  background: url(../img/icon-pdf.png) no-repeat left center;
  padding-left: 15px;
}

.menu ul + h4{
  margin-top: 20px;
}

.menu h4{
  font-size: 15.4px; /* underline will be 2px thick if font any larger */
  font-weight: normal;
  margin: 0 0 .25em 0;
}

.menu .direct-action{
  clear: left;
  border-top: 1px dotted #999;
  padding: 13px 0 0 0;
  position: relative;
}

  .direct-action a.medicare-choices{
    position: absolute;
    right: 10px;
    color: #333;
    font-size: 1.0833em;
    background: url(../img/icon-medicare-meeting.png) no-repeat left center;
    padding-left: 22px;
    padding-top: 2px;
  }

  .direct-action .button{
    margin-right: 5px;
  }

.menu .col{

  padding: 6px 16px;
  border-left: 1px dotted #ccc;
  margin-right: 0;
  position: relative;
}

.menu .col:first-child{
  padding-left: 3px;  
}

.menu .col.featured,
.menu .col.image-cta,
.menu .col.featured-event{
  width: 170px; 
  padding: 9px 16px 15px 16px;
}  

.menu .col:first-child, 
.col.featured + .col, 
.col.image-cta + .col,
.col.featured-event + .col
{
  border-left: 0;
}

.menu .col.continues, .menu .col.last{ float: left; width: 161px;} /* TODO get rid of last? */
.menu .col.continued{ padding-top: 29px; border-left: 0; width: 183px; }

.menu .col.featured{
  width: 180px;
}

.menu .col.featured-event{
  width: 290px;
}

.menu .col.x-narrow{ width: 100px; }
.menu .col.narrow{ width: 140px; }
.menu .col.wide{ width: 210px; }
.menu .col.x-wide{ width: 240px; }

.menu .col.featured,
.menu .col.featured-event,
.menu .col.image-cta {
  background-color: #eaf2f4;
  border-radius: 4px;
  border-left: none;
}

.menu .col.image-cta{
    width: 358px;
    padding-top: 12px; 
}

.menu .col.image-cta h4{
  margin-bottom: .25em;
  
}

.menu .col.image-cta h4 a{
    color: #0C7DB2;
}

.menu .col.image-cta img{
  width: 120px; /* TODO these are temporary */
  height: 90px;
  float: left;
  margin-right: 16px;
  border-radius: 4px;
  margin-top: 0;
}
  
.menu .col.image-cta div{
  float: right;
  width: 196px;
  margin-right: 26px;
}

.menu .col.image-cta p{
  margin: 0;
}

.menu .col.image-rxcorner {

  border-radius: 15px;
  border-left: none;
}

.menu .col.image-rxcorner{
    width: 150px;
    padding-top: 12px; 
	float: right;
}

.menu .col.image-rxcorner h4{
  margin-bottom: .25em;
  
}

.menu .col.image-rxcorner h4 a{
    color: #0C7DB2;
}

.menu .col.image-rxcorner div{

  width: 168px;
  margin-right: 26px;
}

.menu .col.image-rxcorner p{
  margin: 0px;
}

.menu .col.featured-event{
  position: relative;
  padding-top: 35px;
  padding-left: 36px;
  width: 270px;
}

  .col.featured-event h4{
    margin-left: -26px;
    padding-left: 26px;
    background: url("../img/icon-event-category.png") no-repeat left top;
  }
    

  .col.featured-event .time-range{
    position: absolute;
    top: 16px;
    left: 36px;
  }

  .col.featured-event .day{
    position: absolute;
    top: 16px;
    right: 15px;
  }

.menu .col.link-grid{
  width: 220px;
  margin-right: -10px;
  padding-right: 0;
  padding-bottom: 0;
  }

.menu .col.link-grid ul li{
  display: block;
  float: left;
  margin: 0 10px 10px 0;
}

.menu .col.link-grid ul li a{
  width: 99px;
  height: 75px;
  position: relative;
  border-radius: 4px;
  background-color: #ebf3f6;
  display: block;
  
}

.menu .col.link-grid ul li a span{
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: block;
  margin: 0 16px;
  width: 67px;
}

/*** MAIN CONTENT **/

/*** content header ***/
.content-header{
  height: 93px;
  margin: 14px 0;
  padding: 0 0 16px 0;
  position: relative;
  background: url(../img/bg-full-width-shadow.jpg) no-repeat center bottom;
}

  .content-header ol.breadcrumbs{
    margin: 0;
    padding-left: 0;
    list-style-type: none;  
  }
  
    .breadcrumbs li{
      display: block;
      float: left;
    }
    
    .breadcrumbs li a{
      display: block;
      padding-right: 4px;
    }
    
    /*.breadcrumbs li a:after{
      content: ">";
      padding-left: 4px;
    }*/
    
    .breadcrumbs .active a{
      color: #5E5E5E;
    }
    
    .breadcrumbs .active a:after{
      content: none;
    }
      
  
  .content-header h1, .content-header .page-controls{
    position: absolute;
    bottom: 16px;
    margin: 0;
  }
  
    .content-header .page-controls{
      bottom: 10px;
    }

  .content-header .page-controls{
    right: 0;
  }
  
  .content-header h1{
    font-size: 32px;
    color: #008C4C;
    left: 0;
  }
  
/*** page controls in content-header ***/
.page-controls .widget{
  float: left;
}

.widget h3{
  font-size: .833em;
  color: #999;
  text-transform: uppercase;
  float: left;
  margin: 0 10px 0 20px;
}

.widget ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
}

.widget li{
  float: left;
  display: block;
  width: 15px;
  margin-right: 2px;
}

.widget.share li{
  margin-right: 10px;
}

.widget.share ul{
  position: relative;
  bottom: 4px;
}

.widget.resize li{
  margin-right: 8px;
  position: relative;
  bottom: 6px
}

.widget.resize li a{
  border: 1px solid #ccc;
  color: #666;
  font-weight: bold;
  width: 16px;
  height: 15px;
  display: block;
  box-shadow: 1px 1px 1px rgba(0,0,0,.2);
  background-color: white;
  text-align: center;
  
}

.widget.resize li.active a{
  background-color: #ccc;
  box-shadow: 0;  
}

.widget.resize li a:hover{
  border-color: #666;
  color: White;
  background-color: #666;
}

.widget.resize .small a{
  font-size: 10px;
  line-height: 2;
  }
.widget.resize .medium a{
  font-size: 13px;
  padding-top: 7px;  
  line-height: 1.4;
}
.widget.resize .medium{ bottom: 13px; }
.widget.resize .large a{
  font-size: 17px;
  padding-top: 12px;  
  line-height: 1;
}
.widget.resize .large{ bottom: 18px; }
  
  
/*** local nav (left column) ***/
.local-nav{
  width: 140px;
  margin-right: 20px;
  float: left;      
}

  .local-nav h3{
    color: #393939;
    font-size: 16px;
    margin-bottom: 1em;
	font-weight: bold;
  }
  
  .local-nav h3 a{
	color: #393939;
  }

  .local-nav ul{
    border-top: 1px dotted #C7C7C5;
    margin-bottom: 32px;
  }

  .local-nav li{
      border-bottom: 1px dotted #C7C7C5;
  }
  
  .local-nav li.expanded{
    background-color: #F3F1EB;
  }
  
  .local-nav li ul{
    border-top: none; 
    display: none;
    margin-bottom: 0;
  }
  
  .local-nav li.expanded ul{
    display: block;
  } 
  
  .local-nav li li{
    border-bottom: none;
    margin-left: 12px;
  }
  
  .local-nav li a{ 
    display: block;
    color: #000;
    line-height: 1.3;
    padding: 4px 5px;
    font-size: 12px;
  }
  
  .local-nav .active a{
    background-color: #e8e4d9;
  }
  .local-nav li .active a{
    background-color: #e8e4d9;
    border: 1px dotted #ccc;
    border-width: 1px 0;
  }
  
  
  .local-nav .active.expanded li a{
    background-color: transparent;
    border: none;
  }
  
  .local-nav select{
    width: 100%;
  }

  /*  shares some styling with footer links */
  
/*** container div for use with local-nav ***/
/* TODO always wrap this around MAIN body content - we will use it for text resize - define width with WF class as well */
/* .content is the hook for text resizing, so it must wrap the main content on every page */
.content{
  width: 810px;
  float: left;
  }
  
  .ie7 .wireframe-15 .content{
    cursor: default; /* text-selection cursor is showing over blank space */
  }

.wireframe-1 .content, /* WF 1+2 don't have content-header and therefore no resize widget */
.wireframe-2 .content,
.wireframe-8 .content,
.wireframe-10 .content,
.wireframe-11 .content,
.wireframe-15 .content,
.wireframe-16 .content, 
.wireframe-17 .content, 
.wireframe-18 .content, 
.wireframe-19 .content, 
.wireframe-20 .content, 
.wireframe-21 .content, 
.wireframe-22 .content,  
.wireframe-24 .content,
.wireframe-26 .content,
.wireframe-sitemap .content,
.wireframe-error .content
{
  width: 100%;
  float: none;
}

.wireframe-11 .content
{
background-color:#fff;
}
  
.content iframe{
  border: 0;
  margin: 1em 0;
}
  
/*** Custom select elements wrapped in div.selectmenu-container ***/
.selectmenu-container{
  display: inline;
}
  
/*** article should be wrapped around any main text content on a page (?) this is actually not true - where is it used currently? ***/
.article p, .article li{
  font-size: 1.08333em;
  color: #393939;
  line-height: 1.538;
}

.article p li, .article li li, .article li p{
  font-size: 1em; /* prevent font sizes from multiplying */
}

.article ul{
  margin-left: 9px;
  padding-left: 9px;
}

.article .fine-print{
  padding-right: 120px;
}

.article .fine-print p, /* WF 9 */
.article .fine-print li{
  clear: both;
  color: #999;
  
}

.article h2{
  font-size: 1.833em;
  color: #191919;
  margin: 30px 0 16px 0;
}

.wireframe-7 .article h2,
.wireframe-7 .article h3,
.wireframe-7 .article h4{
  color: #008C4C;
}

.article h2.color-bar{
  border-radius: 4px;
  background: #6FB16F url(../img/bg-color-bar.jpg) repeat-y left top; /* TODO need gradient slice */
  padding: 54px 18px 18px 18px;
  margin: 0 0 1em 0;
  color: #fff;
  font-size: 2.333em;
}

.article h3{
  font-size: 1.333em;
  color: #191919;
  margin: 28px 0 21px 0;
}
  
.article .col{
  margin-left: 60px;
}

.article table{
  border: 0;
}

.article table tr{
  border-bottom: 1px dotted #ccc;
}

.article table td{
  border: 0;
  padding-right: 10px;
}
  
  
  
 /*** descriptive text for the whole page - WF 3,5 ***/
.description h2{
  font-size: 2.333em;
  color: #333;
}

.description p{
  font-size: 1.25em;
  line-height: 1.2; 
  color: #393939; /* TODO should we keep changing the color on every page? pick one and stick with it? */
}
  
/* TODO featured-link and page-link should be broken up - one IS a link, one HAS links - and then style based on semantic usage? */
/*** in-body page links (full-block links) ***/
.featured-link{
  float: left;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
  background-repeat:  no-repeat;
  background-position: right bottom;
  border-radius: 4px;
}

.wireframe-1 .featured-link:nth-of-type(2n),
.wireframe-2 .featured-link:nth-of-type(2n)
{
  margin-right: 0;
}

.featured-link a{
  color: Black;
  width: 200px;
  display: block;
  border: 1px solid #D6D6D6;
  border-radius: 4px;
  padding: 26px 14px;
  position: relative; /* set up possible absolute coords inside */
}

.col.nine .featured-link a{
  width: 320px;
  min-height: 188px;
}

/* intended for WF 2*/
.featured-link a div{
  margin-right: 90px;    
}

.featured-link.t50 a div,
.featured-link.t75 a div{margin-right: 0;}


.featured-link.t50 a div p{width: 50%;}
.featured-link.t75 a div p{width: 75%;}

.featured-link a p{
  position: relative;
  font-size: 1.25em;
  color: #393939;
  width: 190px;
  margin: 0;
  line-height: 1.2;
}

.featured-link.t50 a p, 
.featured-link.t75 a p{
  width: 100%;
}

  .wireframe-2 .featured-link a p{
    width: auto;
  }
 
.featured-link a h2{
  font-size: 2.1666em;
  color: #333;
  margin: 0 0 .25em 0;
  line-height: 1;
}

.featured-link .title{
  display: block;
}

/*** a variant of featured-link - this one has a solid BG that changes on hover ***/
.featured-link.solid,
.featured-link.image{
  width: 250px;
  margin-right: 10px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.gallery .featured-link.solid,
.gallery .featured-link.image{
	margin-top: 18px;
	margin-bottom: 0;
}

.featured-link.solid a,
.featured-link.image a{
  background-color: #E5E2DA;
  border: 0 none;
  padding: 20px 30px 32px 16px;
}

.featured-link.solid .title,
.featured-link.image .title{
  font-size: 1.5em;
  color: #008C4C;
  margin-bottom: .75em;
}

.featured-link.solid a:hover, 
.featured-link.solid a:focus, 
.featured-link.solid a:active{
  background-color: #009F55;
  color: #fff;
  } 
  
  .featured-link.solid a:hover .title,
  .featured-link.solid a:focus .title,
  .featured-link.solid a:active .title{
    color: #fff;  
  }
  
/*** another variant of featured link - this one shows a full-size BG image when rolled over ***/
.featured-link.image{
  /* TODO use BG image or abs positioned <img>? which one works better with rounded corners? expanding length? CMS integration? */
  /* neither is automatically clipped - go with <img> */
  overflow: hidden;
}

.featured-link.image span{
  z-index: 2;
}

.featured-link.image img{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: no-repeat left top;
  border-radius: 4px;
  width: 100%;
  height: auto;
}

.featured-link.image a:hover span,
.featured-link.image a:focus span,
.featured-link.image a:active span{
  color: #fff;
}

.featured-link.image a:hover img,
.featured-link.image a:focus img,
.featured-link.image a:active img{
  display: block;
}


/*** in-body page links (inline links) ***/
.page-link{
  float: left;
  width: 260px;
  position: relative;
  margin: 18px 10px 32px 0;
}

  

  .wireframe-23 .thirds .page-link{
    width: 32%;  
    margin-right: 1%;
  }
  
  .wireframe-23 .halves .page-link{
    width: 49%;
    margin-right: 1%;
  }

.page-link h3,
.wireframe-sitemap h3{
  font-size: 18px;
}
/*lauren changed to -30 to deal with wireframe 4 issues*/
  .wireframe-4 .page-link h3{
    margin-top: -30px;
  }
  
   .wireframe-23 .page-link h3{
    margin-top: 0px;
  }

.page-link h3 a, 
.wireframe-23 .page-link h3, 
.wireframe-sitemap h3 a,
.wireframe-error .suggested-links a{
  color: #008C4C;
  background-color: #edeae4;
  display: block;
  padding: 17px 15px 13px 15px;
  border-radius: 4px;
}

  .page-link h3 a:hover,
  .page-link h3 a:focus,
  .page-link h3 a:active,
  .wireframe-sitemap h3 a:hover,
  .wireframe-sitemap h3 a:focus,
  .wireframe-sitemap h3 a:active,
  .wireframe-error .suggested-links a:hover,
  .wireframe-error .suggested-links a:focus,
  .wireframe-error .suggested-links a:active {
    color: #fff;
    background-color: #00a156;
  }

/* maybe this is for .page-link.thumbnail? 
.page-link p{
  margin: 0;
  font-size: 1.0833em;
  color: #191919;
  line-height: 1.3846;
}*/

.page-link p{
  color: #393939;
  line-height: 1.5;
  margin: 0 11px 22px 15px;
}

  .wireframe-4 .page-link p,
  .wireframe-4 .page-link{
    margin-bottom: 0;
  }

.page-link ul{
  color: #85BED8; /* TODO this should only color the bullets - define a color for li content? */
  margin-left: 5px;
  padding-left: 10px;
}

.wireframe-4 .page-link ul a{
  font-weight: bold; 
}

/*lauren changed from 12px to 2px to make the page look better*/
.page-link li{
  margin-bottom: 2px; 
}

.page-link a.view-all:before{
    content: ''; /* TODO override global settings on WF 4 - apply selectively instead? where else is this used? */
}

.page-link a.view-all{
  margin-left: 15px;
}
  
/** used on WF3 **/
.page-link.thumbnail{
  width: 380px;
  margin: 0 10px 0 0;

}

.page-link.thumbnail div{
  float: left;
  margin-left: 10px;
  width: 244px;
}

.page-link.thumbnail h4{
  font-size: 1.5em;
  margin: 0;
}

.page-link.thumbnail p{
  margin: 0;
}

.page-link.thumbnail img{
  float: left;
  width: 120px;
  height: auto;
}

/** use on WF 23 **/
.wireframe-23 .column-container{
  border-top: 1px dotted #ccc;
  padding-top: 26px;
}

.wireframe-23 .column-container h2{
  margin: 0 0 14px 0;
  color: #191919;
  font-size: 1.8333em;
}

.wireframe-23 .column-container .seven h2.indent{
  margin-left: 110px;
}

.wireframe-23 .column-container .col.three{
  margin-top: 2px;
}

.wireframe-23 .page-link.thumbnail{
  width: 100%;
  border-bottom: 1px dotted #ccc;
  padding: 16px 0 18px 0;
  }
  
.wireframe-23 .page-link.thumbnail img{
  width: 100px;
  margin-right: 10px;
}
  
.wireframe-23 .page-link.thumbnail div{
  width: 440px;
  float: left;
  margin-left: 0;
}
  
/*** this contains link blocks like .featured-links - WF 11 (split off because of the # of possible configs) ***/
.detail-grid .content div{
  width: 276px;
  margin-right: 10px;
  margin-bottom: 15px;
  float: left;
  border-radius: 4px;
  padding: 20px 16px;
  min-height: 150px; 
}

.detail-grid div a{
  height: 100%;
  display: block;
  cursor: pointer;
}

.detail-grid .content div:nth-child(3n+1){
  clear: left;
}

.detail-grid div.solid.green a{
  color: #fff;
}

.detail-grid div.solid.gray a,
.detail-grid div.solid.white a,
.detail-grid div.image a{
  color: #222;
}

.detail-grid div.solid{ /* .white */
  background-color: #fff;
  border: 1px solid #ccc;
}

.detail-grid div.solid.green{
  background-color: #00924E;
  margin: 1px 11px 16px 1px; /* account for width of border on image divs */
  border: 0 none;
  color: #fff;
}

.detail-grid div.solid.gray{
  background-color: #eeece5;
  margin: 1px 11px 16px 1px; /* account for width of border on image divs */
  border: 0 none;
}


.detail-grid div.image{
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-position: left top;
}

/* class describes where the IMAGE goes */
.detail-grid div.image.bottom,
.detail-grid div.image.right{ background-position: right bottom; }

.detail-grid div.image.right h3, 
.detail-grid div.image.right p{ 
  width: 135px;
}

.detail-grid h3{
  font-size: 1.5em;
  margin: 0;
}

.detail-grid a h3{
  color: #008C4C;
}

.detail-grid .green a h3{
  color: #fff;
}

.detail-grid p{
  font-size: 1.0833em;
}
  
/*** topical hub link list - list of links with a description <p> ***/
/* TODO on WF 23, this is shown with small text/narrow spacing. where is it shown with large links? */
/* shown on WF 12 with large links */

.seven .link-details{ /* WF 12 */
  padding: 0 20px;
}

.link-details h2{
  font-size: 1.833em;
  color: #191919;
  margin: 25px 0 20px 0;
}

.three .link-details h2{
  font-size: 1.333em;
  color: #393939;
  margin: 0 0 10px 0;
}

.link-details ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.link-details li{
  margin-bottom: 1.833em; /* WF 12 */
}

.three .link-details li{
  margin-bottom: 1em;
}

.link-details a{
  display: block;
  font-size: 16px;
}

.three .link-details a{
  font-size: 1em;
}

.link-details p{
  margin: 0;
}

.link-details a.view-all{
  font-size: 14px;
}

.three .link-details a.view-all{
  font-size: 1em;
  font-family: Arial; /* TODO full stack here */
}

/* shared with .team-profile */
a.view-all:before{
  content: "›";
  vertical-align: 2px;
  padding-right: 2px;
  
}

/*** Vertical tab layout - WF 8 ***/
.tabs ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tabs a{
  display: block;
}

.tabs a,
.tabs a:active,
.tabs a:focus
{
  outline: 0;
}

.tabs.col{
  width: 165px; /* TODO make this match local-nav? */
  background-color: #E5E2DA;
  border-radius: 3px;
  margin-right: 15px;
}

.tabs.col ul{
  width: 160px;
  margin: 12px 0 12px 5px;
  overflow: hidden;
}

.tabs.col li{
  display: block;
  padding: 14px 10px 14px 0;
  margin-left: 5px;
  border-bottom: 1px #ccc dotted;
  border-top: 1px solid #fff;
}

.tabs.col li:first-child,
.tabs.col li.first{
  border-top: 0;
  padding-top: 15px;
}

.tabs.col li:last-child,
.tabs.col li.last{
  border-bottom: 0;
  padding-bottom: 15px;
}

.tabs.col li.active{
  background-color: #fff;
  border-radius: 4px 0 0 4px;
  margin-left: 0;
  padding: 15px 10px 15px 5px;
  border: 0 none;
  box-shadow: 1px 1px 4px rgba(0,0,0,.25);
}

.tabs.col a .title{
  font-size: 1.25em;
}

.tabs.col .active a .title{
  color: #3b3b3b;
}

.tabs.col a .subtitle{
  color: #393939;
  display: block;
}

.panes.col{
  width: 540px;  /* TODO width of text may actually be narrower than this - is that common to .article? if so, wrap inner divs in article and make this full width, use article to pad text */
}

/*** horizontal tabs - WF 9 ***/
.tabs.horizontal{
  margin-bottom: 12px;
  border-bottom: 1px solid #ccc;
}

.tabs.horizontal ul{
  width: 100%;
  overflow: auto;
  position: relative;
  margin-bottom: -1px
}

.ie7 .tabs.horizontal ul{
  height: 40px;
  font-size: 12px;
  overflow: visible;
  }

.tabs.horizontal li{
  background-color: #E5E2DA;
  display: block;
  float: left;
  margin-right: 4px;
  border-radius: 4px 4px 0 0;
}

.tabs.horizontal a{
  font-size: 1.3333em;
  color: #393939;
  padding: 12px 30px 12px 30px;
  line-height: 1; 
}

.tabs.horizontal li.active{
    border: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    background-color: #fff;
  }

.tabs.horizontal li.active a{
  color: #008C4C;
  padding-top: 11px
}




  

/*** find-a-doc link block ***/
.find-a-doc{
  border-radius: 3px;
  background: url(../img/bg-find-a-doc-solid.png) no-repeat left top;
  position: relative;
  height: 110px;
  width: 100%;
}

.find-a-doc a{
  color: #fff;
  padding: 21px 73px 47px 10px;
  display: block;
  position: absolute;
  width: 165px;
  background: url(../img/bg-find-a-doc.png) no-repeat 133px 11px;
}

.find-a-doc h2 {
  height: 26px;
  margin: 0;
  background: url(../img/icon-find-a-doc.png) no-repeat right top;
  padding: 3px 36px 0px 0;
  font-weight: bold;
  display: inline-block;
}

.find-a-doc p{
  margin: 7px 0 0 0;
}

/*** frequently visited links ***/
.frequently-visited h2{
  font-weight: bold;
  font-size: 1.5em;
}

.frequently-visited ul{
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.frequently-visited li{
  margin-bottom: 1em;
}
 
.frequently-visited a{
  font-weight: bold;
}
  
.frequently-visited p{
  margin: 0;
}  

/*** news feed ***/
.news-feed h2{
  font-size: 1.33em;
  font-weight: bold;
}

.news-feed ul{
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.news-feed li{
  margin-bottom: 1em;
  background: url(../img/icon-social-links.png) no-repeat left top;
}

  .news-feed li.facebook{background-position: left -143px;}
  .news-feed li.rss{background-position: left -386px;}

.news-feed .time{
  font-size: 10px;
  color: #999;
  padding-left: 18px;
}

.news-feed p{
  margin: 4px 0 0 0;
  
}


/*** login form box ***/
.sign-in{
  width: 218px;
  padding: 20px 6px 16px 6px;
  background-color: #ece9e2;
  border-radius: 4px;
  margin-bottom: 1em;
}

  .sign-in h2{
    font-size: 16px; /* TODO need measurements from editable text */
    margin: 0 0 12px 0;
    float: left;
  }
  
  .sign-in a{
    margin: 1em 0;
    display: block;
  }
  
  .sign-in a.register{
    float: right;
    margin: 3px 0 0 0;
  }

  .sign-in input[placeholder]{
    padding: 3px 2px;
    margin: 5px 0;
    display: block;
    width: 214px;
    clear: both;
  }
  
  .sign-in input[type="submit"], 
  .filter input[type="submit"], 
  .event .button, 
  .class-signup input[type="submit"],
  .scfForm input[type="submit"]{
    padding: 6px 23px;
    border: 0 none;
    margin: 1em 0 0 2px;
    display: block;
    line-height: 1;
  }
  
  
  /* image sprites for buttons - strip out css3 button styles when replaced, add hover styles */
  .sign-in input[type="submit"]{
    background: transparent url(../img/bg-buttons.png) no-repeat left top;
    text-indent: -9999em;
    width: 92px;
    height: 34px;
  }
  
.sign-in input[type="submit"]:hover,
.sign-in input[type="submit"]:focus,
.sign-in input[type="submit"]:active{background-position: -177px top; }
.sign-in .om-register-button{
	TEXT-INDENT: -9999em; WIDTH: 92px; BACKGROUND: url(../img/bg-buttons.png) no-repeat -329px top; HEIGHT: 34px; float: left;
}
.sign-in .om-register-button:hover{
	background-position: -329px -48px;
}
  
  .filter input[type="submit"],
  .scfForm input[type="submit"]
  {
    background: transparent url(../img/bg-buttons.png) no-repeat left -83px;
    text-indent: -9999em;
    width: 92px;
    height: 34px;
    }
    
      .filter input[type="submit"]:hover,
      .filter input[type="submit"]:focus,
      .filter input[type="submit"]:active,
      .scfForm input[type="submit"]:hover,
      .scfForm input[type="submit"]:focus,
      .scfForm input[type="submit"]:active{
          background-position: -177px -83px;
      }
      
  .wireframe-20 .filter input[type="submit"]{
    background: transparent url(../img/bg-buttons.png) no-repeat left -139px;
    text-indent: -9999em;
    width: 32px;
    height: 30px;
    display: inline-block;
    padding-left: 0;
    padding-right: 0;
  }
  
    .wireframe-20 .filter input[type="submit"]:hover,
    .wireframe-20 .filter input[type="submit"]:focus,
    .wireframe-20 .filter input[type="submit"]:active{background-position: -177px -139px;}
  
  .pagination .button.next{
    background: transparent url(../img/bg-buttons.png) no-repeat left -249px;
    text-indent: -9999em;
    width: 94px;
    height: 28px;
    padding: 0;
    }
    
    .pagination .button.next:hover,
    .pagination .button.next:focus,
    .pagination .button.next:active{background-position: -177px -249px;}
    
  .pagination .button.prev{
    background: transparent url(../img/bg-buttons.png) no-repeat left -304px;
    text-indent: -9999em;
    width: 94px;
    height: 28px;
    padding: 0;
    }
    
    .pagination .button.prev:hover,
    .pagination .button.prev:focus,
    .pagination .button.prev:active{background-position: -177px -304px;}
    
  .newsletter-bar input[type="submit"]{
    background: transparent url(../img/bg-buttons.png) no-repeat left -197px;
    text-indent: -9999em;
    width: 162px;
    height: 28px;
    padding: 0;
    text-transform: capitalize; /* hides text in ie7 */
  }
  
  .newsletter-bar input[type="submit"]:hover,
  .newsletter-bar input[type="submit"]:focus,
  .newsletter-bar input[type="submit"]:active{
    background-position: -177px -197px;
  }
  
  .button.feedback{
    background: transparent url(../img/bg-buttons.png) no-repeat left -361px;
    text-indent: -9999em;
    width: 94px;
    height: 30px;
    padding: 0;
    display: block;
  }
  
  .button.feedback:hover,
  .button.feedback:focus,
  .button.feedback:active{
    background-position: -177px -361px;
  }
  
  .faq-pair .button,
  .video-player .button{
    color: #191919;
    background: transparent url(../img/bg-buttons.png) no-repeat left -786px;
    width: 28px;
    height: 24px;
    padding: 8px 0 0 32px;
    margin-right: 10px;
  }
  
  .video-player .button{ float: right; }
  .faq-pair .button{ padding-left: 37px; /*normally 25px */ }
  

  .video-player .button:hover, .faq-pair .button:hover, 
  .video-player .button:focus, .faq-pair .button:focus, 
  .video-player .button:active, .faq-pair .button:active {  
    background-position: -177px -786px;
  }
  
  
.video-player .button.upvote,
.faq-pair .button.upvote{
  background-position: left -818px;
}

.video-player .button.upvote:hover, .faq-pair .button.upvote:hover,
.video-player .button.upvote:focus, .faq-pair .button.upvote:focus,
.video-player .button.upvote:active, .faq-pair .button.upvote:active{
  background-position: -177px -818px;
}

  
  
  .recent-news-list .button.next{
    /* more news */
    background: transparent url(../img/bg-buttons.png) no-repeat left -432px;
    text-indent: -9999em;
    width: 102px;
    height: 30px; 
    padding: 0;
    display: block;
  }
  
  
    .recent-news-list .button.next:hover,
    .recent-news-list .button.next:focus,
    .recent-news-list .button.next:active{background-position: -177px -432px;}
  
  .news-release .button.prev{
    /* return to newsroom */
    background: transparent url(../img/bg-buttons.png) no-repeat left -490px;
    text-indent: -9999em;
    width: 150px;
    height: 30px; 
    padding: 0;
    display: block;
  }
  
   .news-release .button.prev:hover,
   .news-release .button.prev:focus,
   .news-release .button.prev:active{
     background-position: -177px -490px;
   }
   
   .button.get-details{
      background: transparent url(../img/bg-buttons.png) no-repeat left -542px;
      text-indent: -9999em;
      width: 90px;
      height: 28px; 
      padding: 0;
      display: block;
   }
   
   .button.get-details:hover,
   .button.get-details:focus,
   .button.get-details:active{
      background-position: -177px -542px; 
    }
    
    .button.b-sign-in{
      background: transparent url(../img/bg-buttons.png) no-repeat left -704px;
      text-indent: -9999em;
      width: 70px;
      height: 28px; 
      padding: 6px 0 0 0;
   }
   
   .button.b-sign-in:hover,
   .button.b-sign-in:focus,
   .button.b-sign-in:active{
      background-position: -177px -704px; 
    }
   
  
   .button.find-a-drug{
      background: transparent url(../img/bg-buttons.png) no-repeat left -631px;
      text-indent: -9999em;
      width: 92px;
      height: 28px; 
      padding: 6px 0 0 0;
   }
   
   .button.find-a-drug:hover,
   .button.find-a-drug:focus,
   .button.find-a-drug:active{
      background-position: -177px -631px; 
    }
    
    .button.enroll-online{
      background: transparent url(../img/bg-buttons.png) no-repeat left -592px;
      text-indent: -9999em;
      width: 106px;
      height: 28px; 
      padding: 6px 0 0 0;
   }
   
   .button.enroll-online:hover,
   .button.enroll-online:focus,
   .button.enroll-online:active{
      background-position: -177px -592px; 
    }
    
    .button.get-a-quote{
      background: transparent url(../img/bg-buttons.png) no-repeat left -668px;
      text-indent: -9999em;
      width: 128px;
      height: 28px; 
      padding: 6px 0 0 0;
   }
   
   .button.get-a-quote:hover,
   .button.get-a-quote:focus,
   .button.get-a-quote:active{
      background-position: -177px -668px; 
    }
    
  .event-list .event .button{
    width: 112px;
    height: 32px;
    text-indent: -9999em;
    background: transparent url(../img/bg-buttons.png) no-repeat left -742px;
    position: absolute;
    top: 22px;
    right: 10px;
    display: block;
    padding: 0;
  }
  
  .ie7 .menu a.button{
    padding: 12px 0 0 0;
    height: 20px;
  }
  
  .wireframe-16 .filter input[type="submit"],
  .wireframe-20 .filter input[type="submit"],
  .wireframe-17 .filter input[type="submit"] {
    margin-top: 0;  
  }
  
  .wireframe-16 .filter input,
  .wireframe-17 .filter input{
    display: inline;
  }
  
/*** Class registration box ***/
.class-signup{
  border-radius: 4px;
  background-color: #ece9e2;  
  padding: 20px 7px 15px 7px;
}

.class-signup h2{
  font-size: 1.5em;
  margin: 0;
  color: #191919;
  margin-bottom: 14px;
}

.class-signup label{
  display: block;
  color: #191919;
  font-weight: bold; 
  margin-top: 16px;
  margin-bottom: 2px;
}

.class-signup select{
  width: 80px;
}

.class-signup input[type="text"]{
  width: 210px;
}
  

  
  
/*** Video List - WF 13 ***/
.video-list h2{
  font-size: 1.833em;
  color: #191919;
  margin: 21px 0 11px 0;
}

.video-list ol{
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 100%;
  overflow: auto;
  border-bottom: 1px dotted #ccc;
  padding-bottom: 20px;
}

.video-list li{
  display: block;
  float: left;
  margin-right: 10px;
  margin-bottom: 28px;
}

.video-list a{
  display: block;
  padding: 10px;
  border-radius: 4px;
  width: 240px;
  position: relative;
}

.video-list a span, .video-list a img{
  display: block;
}

.video-list a img{
  border-radius: 4px;
}

.video-list .category{
  padding-bottom: 6px;
  color: #5e5e5e;
}

.video-list .title{
  font-size: 1.333em;
  padding: 14px 0 4px 0;
}

.video-list .play-button{
  display: none;
  position: absolute;
  text-indent: -9999em;
  background: url(../img/icon-play-video.png) no-repeat center center;
  top: 62px;
  left: 0;
  height: 54px;
  z-index: 3;
  width: 100%;
}

.video-list a:hover,
.video-list a:focus,
.video-list a:active{
  background-color:   #e9e7df;
}
  
.video-list a:hover .play-button,
.video-list a:focus .play-button,
.video-list a:active .play-button{
  display:block;
}  


/*** Video Detail - WF 14 ***/
.video-container{
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 22px 10px 27px 10px;
}

.video-container h2{
  font-size: 1.833em;
  color: #191919;
  margin: 5px 0 10px 0;
}

.video-container .category{
  font-size: 1.333em;
  color: #393939;
}

.video-player{
  width: 404px;
  float: left;
}

.video-player .transcript{
  display: block;
  width: 150px;
  padding: 8px;
  float: left;
}






.video-frame{
  width: 380px;
  height: 284px;
  border: 10px solid #191919; 
  margin-bottom: 10px;
}

.video-topic-list{
  width:  332px;
  float: left;
  margin-left: 32px;
}

.video-topic-list h2{
  font-size:  1.33em;
}

.video-topic-list ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-top: 1px dotted #ccc;
  width: 310px;
}

.video-topic-list li{
  border-bottom: 1px dotted #ccc;

}

.video-topic-list li a{
  display: block;
  overflow: auto;
  padding: 14px 5px 16px 5px;
  width: 300px;
}

.video-topic-list li.active a{
  background-color:   #F3F1EB;
}

.video-topic-list li img{
  float: left;
  display: block;
}

.video-topic-list li span{
  display: block;
  width: 206px;
  float: left;
  margin-left: 10px;
}

.video-topic-list .title{
  font-size: 1.0833em;
  font-weight: bold;
}

.video-topic-list .running-time{
  color:   #3a3a3a;
}

.video-topic-list .now-playing{
  color: #d17c0f;
}


/*** Disclaimer - WF 14 ***/
.disclaimer{
  width: 500px;
  color: #999;
  font-size: 1.08333em;
  line-height: 1.538;
}

.disclaimer h2{
  font-weight: bold;
  font-family: Arial; /* TODO full stack here*/
  margin-bottom: 0;
  font-size: 1em;
}  
  
 
/* TODO this is currently only used on WF 16 - test with real content */ 
.loading{
  background: url(../img/bg-ajax-loader.gif) no-repeat center center;
  min-height: 100px;
}


/*** FAQ - WF 16 ***/
.faq-list h2{
  border-bottom: 1px dotted #ccc;
  color: #191919;
  font-size: 1.8333em;
  padding-bottom: 12px;
}


    
.faq-pair{
  border-bottom: 1px dotted #ccc;
  padding-bottom: 25px;
}

.faq-pair h3{
  padding: 12px 0 8px 44px;
  color: #191919;
  font-size: 1.33em;
  background: url(../img/icon-faq.png) no-repeat left top;
  margin-bottom: 8px;
}

.faq-pair .answer{
  padding-left: 55px;
  background: url(../img/icon-faq.png) no-repeat left -400px;
  
}

.faq-pair .answer div{
  background-color: #F8F7F4;
  border-radius: 4px;
  padding: 16px 18px 16px 12px;
}


  
/*** Search/Filter form - WF 16 ***/
.filter input[type="search"],
.filter input[type="text"],
.filter select{
  padding: 7px 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-right: 8px;
 }
 
  .filter select{
    width: 180px;
  }

.filter input[type="search"]{
  width: 260px;
  font-size: 15px; /* don't expand when body text does */ 
}

.filter{
  border-bottom: 1px dotted #ccc;
  padding-bottom: 1em;
}

.filter>span{
  text-transform: uppercase;
  padding-left: 8px;
}

.filter .selectmenu-container{
  top: 9px;
  margin-left: 8px;
}
 
.filter .checkboxes{ /* this should only apply to the checkbox div on WF 20 - need a class? */
   margin-top: 1em;
}

.filter .checkboxes label{
  margin-right: 16px;
}

.filter label input[type="checkbox"]{
  position: relative;
  top: 2px;
}

.ie6 .filter label input[type="checkbox"],
.ie7 .filter label input[type="checkbox"]{
  top: 0;
}


/*** Document List - WF 17 ***/
.document-list h2, .document-list h3{
  border-bottom: 1px #ccc dotted;
  font-size: 1.833em;
  color: #191919;
  line-height: 1;
  padding: 14px 0 18px 0;
  margin: 0 0 12px 0;
}

.document-list h3{
  padding: 40px 0 16px 0;
}

.document-list .document{
  padding: 20px 11px 7px 46px;
  border-bottom: 1px #ccc dotted;
}

.document-list .document.page{
  padding-left: 11px; 
  }

.document.pdf{ background: url(../img/icon-document-type.png) no-repeat 7px 15px; }
.document.newsroom{ background: url(../img/icon-document-type.png) no-repeat 7px -264px; }
.document.event{ background: url(../img/icon-document-type.png) no-repeat 7px -127px; }
.document.doc{ background: url(../img/icon-document-type.png) no-repeat 7px -458px; }

.document.featured{
  background-color: #F4F3EF;
  position: relative;
  margin-top: 5px;
}

.document.featured h4{
  padding-right: 65px; /* avoid overlap with "key match */
}

.featured .featured-match{
  position: absolute;
  top: 15px;
  right: 11px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: .9166em;
  color: #666;
}

.document h4{
  font-size: 1.333em;
  line-height: 1;
  margin-top: 0;
  margin-bottom: .7272em;
}

.document .timestamp, .document .source{
  color: #5e5e5e;
}
  
  
  /*** Results List - WF 18 ***/
  ul.results{
    border-top: 1px #ccc dotted;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    margin-top: 0;
  }
  
  .results li{
    border-bottom: 1px #ccc dotted;
    padding: 24px 0 12px 0;
  }
  
  .results h3{
    line-height: 1;
    font-size: 1.333em;
    margin: 12px 0 0 0;
  }
  
  .dateline{
    color: #5e5e5e;
  }
    
/*** Event List / Calendar - WF 21 ***/
.calendar.filter, .wireframe-21 .wellness-classes{
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 255px;
  padding: 10px; /* 10px 70px 10px;*/
  position: relative;
}

.wireframe-21 .col.eight h2{
  font-size: 1.833em;
  color: #191919;
}

.wireframe-21 .wellness-classes{
  padding: 10px;
  margin-top: 20px;  
}

  .wireframe-21 .col.four .wellness-classes img{
    max-width: 100%;  
  }

  .calendar.filter h2{
    color: #191919;
    font-size: 1.5em;
    margin: 6px 0;
  }
  
  .calendar.filter ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 1.0833em;
    line-height: 1.6;
  }
  
  .calendar.filter li.active{
    font-weight: bold;
  }

  .calendar.filter .selectmenu-container{
    top: 0;
    margin-left: 0;  
  }

  .calendar.filter label, .calendar.filter fieldset legend{
    display: block;
    font-weight: bold;
    color: #191919;
    font-size: 1.0833em;

  }
  
  .calendar.filter fieldset, .calendar.filter label{
    margin-top: 1em;
  }
  
  .calendar.filter fieldset label{
    font-weight: normal;
    margin: 0;
    /*background: url(../img/icon-event-category.png) no-repeat 14px top;*/
    padding: 2px 4px 5px 0;
  }
  
  .calendar.filter fieldset input{
    position: relative;
    top: 1px;   
  }
  
  .calendar.filter fieldset label.active{
    font-weight: bold;  
  }
  
    .calendar.filter fieldset label[for="event_category_2"]{background-position: 14px -98px;}
    .calendar.filter fieldset label[for="event_category_3"]{background-position: 14px -198px;}
    .calendar.filter fieldset label[for="event_category_4"]{background-position: 14px -298px;}
    .calendar.filter fieldset label[for="event_category_5"]{background-position: 14px -398px;}
    .calendar.filter fieldset label[for="event_category_6"]{background-position: 14px -498px;}
  
  .calendar.filter input[type="text"]{
    width: 210px;  
  }
  
  .calendar.filter label input{
    margin-right: 4px;
  }
  
  .calendar.filter select{
    width: 180px;
  }
  
  .calendar.filter .submit-container{
    background-color: #f3f2ee;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  
  .calendar.filter input[type="submit"]{
    margin: 10px;
  }
  
.event-list h3{
  font-size: 1.5em;
  margin: 0;
  line-height: 1;
}

.event-list .event{

  margin-bottom: 44px;
} 

.event-list .event-description{
  background-color: #f4f2ef;
  border-radius: 4px;
  padding: 20px 25px 12px 15px;
}

.event-list .event li a,
.event-list .event li .event-wrapper{
  display: block;
  position: relative;
  /*adding: 40px 20px 12px 34px;*/
  padding-bottom: 5px;
  padding-top: 5px;
  width: 100%;
  overflow: auto;
    color: #393939;
  padding: 28px 0 26px 0;
}



.event-list .event.featured a{
  background-color: #f4f3ef;
}

.event-list .event li a:hover,
.event-list .event li a:focus,
.event-list .event li a:active {
  background-color: #FEFEE9;
}

.event-list .event li a:hover .button,
.event-list .event li a:focus .button,
.event-list .event li a:active .button{
  display: block;
}

.event-list .event ol{
  margin: 0;
  padding: 0;
  list-style-type: none;

}

.event-list .event li{
  display: block;
  position: relative;
  width: 100%;
  overflow: auto;
  border-bottom: 1px dotted #ccc;  
}


.event-list .event li a .time, 
.event-list .event li .event-wrapper .time{
  color: #5e5e5e;
}

.event-list .event span.date{
  display: block;
  float: left;
  width: 72px;
  margin-left: 10px;
}

.event-list .event .vcard{
  float: left;
  margin-left: 15px;
  width: 400px;
}

.event h4{
  font-size: 1.333em;
  color: #393939;
  border-bottom: 1px #ccc dotted;
  margin-bottom: 0;
  padding-bottom: 15px;
}

  .event.category_2 h4, .featured-event.category_2 h4{ background-position: left -98px; }
  .event.category_3 h4, .featured-event.category_3 h4{ background-position: left -198px; }
  .event.category_4 h4, .featured-event.category_4 h4{ background-position: left -298px; }
  .event.category_5 h4, .featured-event.category_5 h4{ background-position: left -398px; }
  .event.category_6 h4, .featured-event.category_6 h4{ background-position: left -498px; }
  
.event .time-range, .event .day{
  position: absolute;
  top: 18px;  
  color: #5E5E5E;
}

.event .day{
  right: 21px;
}

.event .vcard .fn{
  font-weight: bold;
}
  
/*** Calendar detail - WF 22 ***/
.calendar-detail h2{
  color: #191919;
  font-size: 1.833em;
  padding-bottom: 14px;
  border-bottom: 1px #ccc dotted;
}

.calendar-detail h3{
  font-size: 1.333em;
  color: #191919;
  padding-top: 18px;
  margin-bottom: 20px;
}

.calendar-detail h4{
  font-weight: bold;
  font-family: Arial; /* TODO full default stack here? */
  margin-bottom: 0;
  border-top: 1px #ccc dotted;
  padding-top: 12px;
  margin-top: 12px;
  font-size: 1em;
}

.calendar-detail h4:nth-of-type(1){
  border-top: 0;
  padding-top: 0;
}

.calendar-detail p{
  margin-top: 0;
}

.calendar-detail .organizer h4{
  border-top: 0 none;
}

.calendar-detail .organizer{
  width: 470px;
  border-bottom: 1px dotted #ccc;
}

.calendar-detail .organizer:last-child{
  border-bottom: 0 none;
}

.calendar-detail .event-outline, 
.calendar-detail .event-organizers, 
.calendar-detail .event-sessions{
  padding-right: 160px;
  position: relative;
  border-bottom: 1px dotted #ccc; 
}
  
  .calendar-detail .event-outline .date-and-time{
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
  }
  
  .calendar-detail .event-outline .date-and-time .day{
    background: url(../img/bg-calendar-frame.png) no-repeat center top;
    width: 78px;
    height: 60px;
    padding-top: 19px;
    text-align: center;  
    color: #5e5e5e;
    font-size: 4em;
    font-weight: bold;
    margin: 0 auto 4px auto;
  }
  
  .calendar-detail .date-and-time .month,
  .calendar-detail .date-and-time .time {
    font-size: 1.333em;
    color: #191919;
    text-align: center;
  }
  
/*** In-body social widgets ***/
.content .addthis_toolbox{
  margin-top: 1em;
}

.wireframe-22 .content .addthis_toolbox{
  margin-top: 28px;
}
  
    
  /*** Pagination - WF 18, 16 ***/
  div.pagination{
    position: relative;
    padding-top: 12px;
  }
  
  .pagination p{
    text-align: center;
  }
  
  .pagination .button{
    position: absolute;
    top: 16px;
    left: 0;
    outline: none;
    /*box-shadow: 1px 1px 5px rgba(0,0,0,.25);*/ /* 5px spread to make visible on light bg */
  }
  
  .pagination .button.disabled{
    display: none;
  }
  
  .pagination .button.next{
    left: auto;
    right: 0;
  }
  
  /*** Results header - sorting - WF 18, WF 16 ***/
  .results-header{
    position: relative;
    padding: 24px 0 16px 0;
    width: 100%;
    /*overflow: auto;*/
  }
  
  .results-header .number-of-results{
    float: right;
    margin: 0;
  }
  
  .wireframe-13 .results-header{
    border-bottom: 1px dotted #ccc;
    padding: 20px 0 8px 0;
  }
  
  .wireframe-16 .results-header{
    padding: 18px 0 6px 0;
  }
  
  .wireframe-18 .results-header{
    padding: 6px 0 12px 0;
  }
    
  
  .results-header label{
    display: block;
    float: left;
    padding-right: 10px;
  }
  
  .results-header select{
    width: 150px;
  }
  
  .results-header .selectmenu-container{
    position: relative;
    bottom: 5px;
    float: left;  
  }
  
  .results-header h2{
    float: left;
    margin: 0;
    font-size: 1.333em;
  }
  
  .wireframe-21 .results-header .number-of-results{
    margin-top: 4px;
  }
  
  .wireframe-21 .results-header{
    padding: 14px 0 0 0;
  }

  /*** News release - WF 19 ***/
  .news-release h2{
    color: #191919;
    font-size: 1.8333em;
  }
  
  .news-release .button.prev{
    margin: 1em 0 34px 0;
  }
  
  .news-release .dateline{
    display: block;
  }
  
  
  
  /*** Other Recent News List - WF 19 ***/
.recent-news-list{
	margin-top: 2em;
}
  
  .recent-news-list h2{
    margin: 0;
    font-size: 1.333em;
  }
  
  .recent-news-list ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  .recent-news-list li{
    border-bottom: 1px solid #ccc;
    padding: 16px 0;
  }
  
  .recent-news-list .dateline{
    display: block;
  }
  
  .recent-news-list li a{
    font-size: 1.08333em;
  }
  
  .recent-news-list .button{
    margin: 26px 0 1em 0;
  } 
    
/*** Team list - WF 24 ***/
.team-list{
  position: relative;
}

.team-list select{
  position: absolute;
  right: 0;
  top: 34px;
  width: 150px;
}

.team-list h2{
  border-bottom: 1px dotted #ccc;
  color: #191919;
  font-size: 1.833em;
  line-height: 1;
  padding: 26px 0;
  margin: 0;
}
  
.team-list .team-member{
  border-bottom: 1px dotted #ccc; 
  width: 100%;
  overflow: auto;
  padding: 26px 0;
}

.team-member div{
  float: right;
  width: 500px;
}

.team-member h3{
  color: #191919;
  font-size: 1.333em;
  line-height: 1;
  margin-top: .4375em;
  margin-bottom: .8125em;
}

.team-member .title{
  display: block;
  color: #5E5E5E;
}

.team-member img{
  width: 114px;
  height: auto;
  float: left;
}
  
  
  /*** Full-Page Promo - WF 10 ***/
  .image-promo{
    position: relative;
    min-height: 310px;
  }
  
  .image-promo div{
   z-index: 2; 
   position: absolute;
   color: #333;
   width: 370px;
   left: 90px;
   top: 80px;
  }
  
  .image-promo h2{
    font-size: 3em;
    margin: 0;
    line-height: 1;
  }
  
  .image-promo p{
    color: #393939;
    font-size: 1.25em;
    line-height: 1.2;
  } 
  
  .image-promo a{
    font-size: 1.1666em;
    font-weight: bold;
  }
  
  .image-promo img{
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
  }
  
  
  /*** Promo blocks - WF 10 ***/
  .three-col-promo div{
    width: 310px;
    float: left;
    margin: 0 10px 18px 0;
  }
  
  .three-col-promo div:nth-of-type(3n+1){
    margin-left: 10px;
    clear: left;
  }
  
  .three-col-promo h2{
    font-size: 1.833em;
    color: #191919;
	padding-left: 1em;
  }
  
  .three-col-promo h3{
    margin: 0;
    /*font-size: 1.5em;*/
    font-size: 18px;
    background: #009550 no-repeat right top;
    border-radius: 4px;
	  margin-bottom: 12px;
  }
  
  .three-col-promo h3 a{
    /*background-color: #00924E;*/
    border-radius: 4px;
    display: block;
    color: #fff;
    padding: 20px 140px 20px 18px;
    /*min-height: 86px;*/
  }
  
  .three-col-promo div p{
    padding: 0 18px;
  }
  
/*** generic columns 
  columns are 70px wide with 10 px gutters 
  column width = numCols * 70 + (numCols - 1) * 10
***/

.col{
   float: left;
   margin-right: 10px;
}

.col img{
  height: auto;
}

.col.ten{ width: 790px; }
.col.ten img{ max-width: 790px; }

.col.nine{ width: 710px; }
.col.nine img{ max-width: 710px; }

.col.eight{ width: 630px; }
.col.eight img{ max-width: 630px; }

.col.seven{ width: 550px; }
.col.seven img{ max-width: 550px; }

.col.six{ width: 470px; }
.col.six img{ max-width: 470px; }

.col.four{ width: 310px; }
.col.four img{ max-width: 310px; }

.col.three{ width: 230px; }
.col.three img{ max-width: 230px; }

.col.three>div{ /* TODO does this work in all browsers? */
  /*margin-bottom: 30px;*/
  
}

.oldie .wireframe-1 .col.nine{
  width: 720px;
  margin-right: 0;
}

.wireframe-1 #tweets,
.wireframe-2 #tweets{
	margin-bottom: 0;
}

.col.last{
  float: right;
  margin-right: 0;
}

.wireframe-1 .col.nine{
  margin-right: 0;
  width: 710px;
}

.wireframe-2 .col.six{
  width: 480px;
  margin-right: 0;
}

/*** static banner - related to carousel
  variation: action-links (wireframe 12)
  variation: detail (wireframe 6)

 ***/

.banner{
  background-color: #00A156;
  border-radius: 4px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}

.banner h4{
  font-size: 28px;
  margin: 0;
}

.banner p{
  font-size: 1.25em;
  line-height: 1.2;
  margin-top: 12px;
}

.banner img{
  position: absolute; /* only when it is a BG image! */
  z-index: 1;
}

.banner.detail img{
  position: relative;
  float: left;
}

.banner div.info{
  padding: 36px;
  z-index: 2;
  position: relative;
  /* this is for positioning the inner content around the image */
  font-size: 12px; /* prevent JS text resizing */
}

  /* TODO find a better long-term solution */
  .seven .banner .info{
    padding-left: 212px;
  }
  .wireframe-8 .banner .info{
    padding-left: 180px;
    padding-right: 320px;
  }
  
  .wireframe-8 .banner img{
    border-radius: 4px;
  }

  .wireframe-8 .find-out-more{
    width: 300px;
  }

.banner.action-links, .banner.detail{
  padding: 0;
  width: 100%;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
}

.banner.detail h4{
  padding-top: 32px;
}

.banner.action-links h4{
  padding-top: 26px;  
  width: 300px;
}

.banner.action-links div, .banner.detail div{
  float: left;
  padding: 0 24px 0 0;
}

.banner.action-links div{
  float: right;
}

.banner.detail div{
  width: 382px;
  padding-left: 10px;
}

.banner.action-links img, .banner.detail div{
  float: left;
  display: block;
  position: relative;
}

.banner.action-links img{
  width: 206px;
  height: auto;
  border-radius: 4px 0 0 4px;
}

.banner.action-links ul{
  list-style-type: none;
  padding-left: 0;
  width: 300px;
  margin: 4px 0 32px 0;
}

.banner.action-links li{
  border-bottom: 1px dotted #ccc;
  font-size: 14px;
  color: #191919;
  padding: 8px 0;
}

.banner.action-links li p{
  font-size: 1em;
  line-height: inherit; 
  margin: 0;
}
  

.banner.detail p{
  font-size: 15px;
}


/*** carousel - rotating banner ***/

.carousel{
  position: relative;
  height: 366px; /* TODO this may be a problem for resizing! */
  width: 100%;
  overflow: auto;
}

.wireframe-1 .carousel,
.wireframe-2 .carousel,
.wireframe-23 .carousel{
	margin-bottom: 22px;
}

.wireframe-4 .carousel,
.wireframe-23 .carousel{
  height: 270px;
  color: #fff;
}
  
.carousel .slide{
  position: absolute;
  top: 0;
  left: 0;
  cursor:pointer;
  display: none;
}

  .carousel .slide:first-child{
    display: block;
  }

.carousel .slide div.info{
  width: 265px;
  top: 220px;
  position: absolute;
  left: 10px;
  font-size: 12px; /* resizing breaks layout - lock this area down for JS resizing */
}

.wireframe-4 .carousel .slide div.info,
.wireframe-23 .carousel .slide div.info{
  top: 32px;
}

.carousel .slide h4{
  color: #5E5E5E;
 /* font-size: 34px;*/
  line-height: 1.2;
  margin: 0;
}

.wireframe-4 .carousel .slide h4,
.wireframe-23 .carousel .slide h4{
  font-size: 2.33em;
  color: #fff;
}

.carousel .slide p{
  font-size: 1.25em;
}



/* also used in some banners */
div.find-out-more{
  border-top: 1px dotted #fff;
  padding-top: 8px;
}

  .find-out-more a{
    padding-left: 20px;
  }
  
  div.find-out-more a{
    color: #0D7DB2; 
    font-weight: bold; 
    font-size: 1.166em;
    background: url(../img/icon-find-out-more-dark.png) no-repeat left center;
	/*background: url(../img/icon-find-out-more.png) no-repeat left center; */
  }
  
  li.find-out-more a{
    background: url(../img/icon-find-out-more-dark.png) no-repeat left center;
  }  
  


.carousel .controls{
  position: absolute;
  bottom: 8px;
  left: 10px;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;  
}

.no-js .carousel .controls{
  display: none;
  }

.carousel .controls li{
  display: block;
  float: left;  
  margin: 0 4px;
}

.carousel .controls a{ /* TODO use images to make these bigger click targets */
  display: block;
  /* border-radius: 4px; */
  text-indent: -9999em;
  height: 10px;
  width: 10px;
  outline:none;
  background: url(../img/btn-slide-nav.png) no-repeat top left;
}

.carousel .controls a.active{
    background: url(../img/btn-slide-nav.png) no-repeat top right;
}

.wireframe-4 .slide h4{
  font-size: 2.33em;
}

.wireframe-4  .controls li a,
.wireframe-24  .controls li a{
  /*background-color: #fff;
  border-color: #fff;*/
}

.wireframe-4 .controls a.active,
.wireframe-23 .controls a.active,
.wireframe-24 .controls a.active{
  border-color: #33b478;
}
/*** team profile list ***/
.team-profile h2{
  color: #3a3a3a;
  font-size: 1.333em;
}

.team-profile h3{
  margin: 0; 
  font-weight: bold;
}

.team-profile h3 .job-role{
  display: block;
}

.team-profile .profile{
  width: 100%;
  overflow: auto;
  margin-bottom: 1em;
}

.team-profile .profile div{
  width: 148px;
  float: left;
}

.team-profile .profile p{
  margin: 0;
}

.team-profile .profile img{
  float: left;
  margin-left: 5px;
  width: 76px;
  height: 76px;
}

/*** link list (variation: video) ***/
.link-list h2{
  color: #393939;
  font-size: 1.333em;
  margin-top: 26px;
  margin-bottom: 12px;
}

.link-list ul,
.wireframe-sitemap ul{
  margin: 0 0 0 12px;
  padding: 0;
  color: #0C7DB2; /* colors bullets */
}

.link-list li,
.wireframe-sitemap li{
  margin-bottom: 1em;
}
  
.link-list.video h2{
  display: inline-block; /* TODO what happens in IE? */
  padding-right: 32px;
  background: url("../img/icon-video-list.png") no-repeat right bottom;
  margin-top: 0;
}

/*** row container ***/
.row{
  width: 100%;
  overflow: auto;
  padding: 22px 0 14px 0;
  border-top: 1px #ccc dotted;
}

/*** .gallery - WF 5 ***/
.gallery{
  width: 100%;
  border-top: 1px #ccc dotted;
  clear: both;
}

.gallery h2{
  font-size: 1.8333em;
  margin: 28px 0 0 0;
  color: #191919;
}

/*** Wireframe 25 - Portal ***/
.wireframe-25 h2{
  font-size: 1.833em;
  color: #181818;
}

.fourths .col{
  width: 24%;
  margin-right: 1%;
}

.wireframe-25 .fourths ul{
  color: #0C7DB2;
  margin-left: 9px;
  padding-left: 9px;
  font-size: 1.0833em;
}

.wireframe-25 .fourths li{
  margin-bottom: 8px;
}

.wireframe-25 .fourths h2{
  color: #393939;
  font-size: 1.333em;   
  margin-top: 10px;
  margin-left: 18px;
}
  
.topic-block{
  float: left;
  margin-right: 15px;
}

.topic-block a{
  position: relative;
  width: 390px;
  min-height: 180px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

.topic-block div{ /* TODO define bottom border-radius here? */
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background-color: rgba(0,0,0, .3);
  color: White;
  font-size: 1.5em;
  line-height: 2.5;
  left: 0;
}

.no-rgba .topic-block div{
  background: #000;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
  }

.wireframe-25 .view-all{
  clear: both;
  float: right;
  font-size: 1.0833em;
  margin-top: 20px;
}

  .wireframe-25 .view-all:before{
    content: '';
  }
  
  .wireframe-25 .view-all:after{
    content: '›';
    padding-left: 2px;
  }

.mixed-links ul{
  float: left;
  width: 495px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.mixed-links li{
  display: block;
  float: left;
  margin: 0 10px 10px 0;
}

.mixed-links li a{
  display: block;
  width: 145px;
  height: 88px;
  position: relative;
  background-color: #E5E2DA;
  border-radius: 4px;
  font-size: 1.333em;
  color: #393939;
  
}



.mixed-links li a span{
  position: absolute;
  bottom: 0;
  padding: 10px;
}



.mixed-links .link-block-with-description{
  float: left;
  margin-right: 10px;
}

.mixed-links .link-block-with-description .topic-block{
  float: none;
  margin-right: 0; 
}

.mixed-links .link-block-with-description .topic-block a{
  width: 305px;
  height: 180px;
}

.mixed-links .link-block-with-description .topic-block div{
  font-size: 1.33em;
  text-align: left;
  text-indent: 7px;  
  line-height: 3;
}

.mixed-links .link-block-with-description p{
  margin-left: 7px;
  width: 290px;
}

.mixed-links ul li{
  margin-left: 15px;
  margin-right: 0;
}

.mixed-links li a:hover,
.mixed-links li a:focus,
.mixed-links li a:active{
  background-color: #d4d2cc;
}


.link-gallery ul{
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  width: 100%;
  overflow: auto;
}

.link-gallery ul li{
  float: left;
  display: block;
  margin: 0 26px 15px 2px;
  }
  
.link-gallery ul li a{
  width: 240px;
  height: 108px;  
  display: block;
  border-radius: 4px;
  background-color: #fcfcfc;
  box-shadow: -1px 1px 1px rgba(0,0,0,.25); /* TODO this is going to fail in many browsers - other indication of hover? */
}

.link-gallery ul li a:hover,
.link-gallery ul li a:focus,
.link-gallery ul li a:active{
  box-shadow: 0 0 4px rgba(0,0,0,.5);
}

.ie7 .link-gallery ul li{
  margin-right: 22px;
  margin-bottom: 11px;
  
  /*border: 1px solid red;*/
}

.ie7 .link-gallery ul li a{
  border: 2px solid #fff;
  
  }

.ie7 .link-gallery ul li a:hover,
.ie7 .link-gallery ul li a:focus,
.ie7 .link-gallery ul li a:active{
  border: 2px solid #d2d0c7;
}

.link-gallery img{
  border-radius: 4px;
  max-width: 240px;
  height: 108px;
}

/*** SITEMAP ***/
.wireframe-sitemap h2{
  border-bottom: 1px solid #dbdbdb; 
}

.wireframe-sitemap h2 a{
  color: #222;
  font-size: 1.4em;
}


.wireframe-sitemap h3{
  margin-bottom: 0;
}

.wireframe-sitemap h4{
  border-top: 1px dotted #ccc;
  padding: 15px 0 15px 14px;
  margin: 0;
  font-size: 1.3em;
}

.wireframe-sitemap h4 a{
  color: #222;

}

.wireframe-sitemap h3 + h4{
  border-top: 0 none;
}

.wireframe-sitemap ul{
  margin-left: 22px;  
}

/*** ERROR (404) PAGE ***/

.wireframe-error .content{
  font-size: 1.1em;
}

.wireframe-error h2{
  font-size: 2.2em;
  margin-top: .25em;
}

.wireframe-error h3{
  font-size: 1.6em;
}

.wireframe-error .suggested-links{
  border-top: 1px dotted #ccc;  
}

.wireframe-error .suggested-links ul{
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
}

.wireframe-error .suggested-links li{
  float: left;
  width: 232px;
  margin: 0 10px 8px 0;
}

.wireframe-error .suggested-links li a{
  font-size: 1.25em;
}


/*** newsletter signup ***/
.newsletter-bar{
  position: relative;
  box-shadow: 0 0 2px rgba(0,0,0,.25);
  border-radius: 5px;
  margin-bottom: 30px;
  overflow: auto;
  background-color: #EFEDE6;
  margin-top: 50px;
 }
 
.newsletter-bar p, .newsletter-bar input{

}
  
.newsletter-bar p{
  width: 460px;
  float: left;
  margin: 0;
  
  background: #fff url(../img/bg-newsletter-arrow.gif) no-repeat right top;
  padding: 14px 0 15px 30px;
}

.newsletter-bar input{
  margin: 7px 0;
  padding: 6px;
}


.newsletter-bar input[name]{  /*[type="email"]{*/
  margin-left: 30px;
  width: 240px;
  background-color: #F7F7F7;
  border: 1px solid #ccc;
  border-color: #ccc #E5E5E5 #E5E5E5 #ccc;
  border-radius: 3px;
}


.newsletter-bar input[type="submit"], a.button{ /* TODO reuse for all buttons? */
  border: 0 none;
  padding: 6px 25px;
  display: inline-block;
}

a.next:after{
  content: ">";
  padding-left: 4px;
}
  
a.prev:before{
  content: "<";
  padding-right: 4px;
}


/*** FOOTER ***/
footer{
  background-color: #F7F5F1;
  width: 100%;
  margin-top: 1em;
  padding-bottom: 3em;
  color: #666;
}

footer div{
  width: 220px;
  margin-left: 10px;
  float: left;
  padding-right: 10px;
}

footer h2{
  font-size: 1.333em;
  color: #3b3b3b;
  margin: 32px 0 16px 0;
  line-height: 1;
}

footer h2 a:link, footer h2 a:visited{
  color: #3A3A3A;
}

footer ul{
  border-top: 1px dotted #C7C7C5;
  width: 210px;
}

footer li{
  border-bottom: 1px dotted #C7C7C5;
  line-height: 2.2;
}

footer .support-phone{
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.777;
  margin: .667em 0;
}

footer li span{
  font-weight: bold;
}

a.twitter, a.facebook, a.linkedin, a.youtube, a.press-releases, a.pinterest{
  background: url("../img/icon-social-links.png") no-repeat left top;
  padding-left: 18px;
}

  a.facebook{ background-position: left -143px; }
  a.youtube{ background-position: left -195px; }
  a.linkedin{ background-position: left -286px; }
  a.pinterest{ background-position: left -58px; }
  a.press-releases{ background-position: left -386px; }

a.blog {
  background: url("../img/icon-news-feed-source.png") no-repeat left top;
  padding-left: 18px;
  background-position: left -485px;
}

/*** LEGAL (Copyright + Privacy) ***/

.legal{
  text-align: center;
}

.legal ul{
  display: inline-block;
  margin-bottom: 0;
}

.ie6 .legal ul,
.ie7 .legal ul{
  display: inline;
}

.legal li{
  float: left;
  display: block;
  margin: 0 10px;
}

.legal li a{
  color: #ECF1F0;
  font-weight: bold;
}

.legal p{
  font-size: .9166em;
  color: #393939;
  margin-top: 1.364em;
  margin-bottom: 32px;
}

 /*Need to set the width and height of embeded map, otherwise goMap() wont render */
.embeded_map { 
    width:260px; 
    height:260px; 
} 

/*Form-jQueryUI form issue*/
.ui-selectmenu-dropdown {
    z-index:1;
}

/* Copay First Module */
.copay-first {
    height: 300px !important;
    font-size: 12px;
}

.copay-first > div.copay-first-gauge-ctr {
    float: left;
    position: relative;
    top: 20px;
    width: 60%;
}

.copay-first > div.copay-first-gauge-ctr > div > canvas {
    width: 400px !important;
    height: 200px !important;
}

.copay-first > div.copay-first-gauge-ctr > .copay-first-legend {
    text-align: center;
    font-size: 10px;
}

.copay-first > div.copay-first-gauge-ctr > .copay-first-legend > div > span > i.bullet {
    border-radius: 100%;
}

.copay-first > div.copay-first-gauge-ctr > .copay-first-legend > div > span > i.bullet.first {
    background-color: #1dd251;
    box-shadow: 0 0 0 1pt darkgreen;
}

.copay-first > div.copay-first-gauge-ctr > .copay-first-legend > div > span > i.bullet.deductible {
    background-color: #ffd543;
    box-shadow: 0 0 0 1pt goldenrod;
}

.copay-first > div.copay-first-gauge-ctr > .copay-first-legend > div > span > i.bullet.second {
    background-color: #a737bf;
    box-shadow: 0 0 0 1pt indigo;
}

.copay-first > .copay-first-info {
    float: right;
    width: 40%;
}

.copay-first > .copay-first-info > .copay-first-info-title > p.lead {
    text-align: center;
    margin-bottom: 0;
    font-weight: bold;
}

.copay-first > .copay-first-info > .copay-first-info-title > h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 200%;
}

.copay-first > .copay-first-info > .copay-first-info-title > p.slug {
    text-align: center;
    margin-top: 0;
}

.copay-first > .copay-first-info > .copay-first-info-body > .phase > p.phase-title {
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0px;
}

.copay-first > .copay-first-info > .copay-first-info-body > .phase > div {
    margin-left: 1em;
}

.copay-first > .copay-first-info > .copay-first-info-body > .phase > .phase-item {
    float: left;
}

.copay-first > .copay-first-info > .copay-first-info-body > .phase > .phase-amount {
    text-align: right;
}

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

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

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.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: h5bp.com/p */
.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; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after, .results-header:before, .results-header:after { content: ""; display: table; }
.clearfix:after, .results-header:after { clear: both; }
.clearfix, .results-header { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  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; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}