/* style.scss */
/* in the command line cd to directory that uses this css file then:
 * sass --watch style.scss:style.css --debug-info
 * the "--debug-info" portion is used with FireSass and Firebug for Firefox to monitor the css in scss files 
 * to watch a directory or sass files: sass --watch app/sass:public/stylesheets 
 * Use sass --help for full documentation. */
/* dark gray */
/* off white */
/* light gray */
/* teal used for links and navigation menu */
/* soft black */
/* used on a couple of rows on the waves table */
/* for main nav and footer backgrounds */
body {
  background-image: url("../img/bg-pattern.gif");
  padding: 0; }

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

#headerWrapper {
  position: fixed;
  background-image: url("../img/head-bg-pattern.gif");
  height: 70px;
  padding-top: 20px;
  width: 100%;
  z-index: 100;
  left: 0;
  top: 0; }

#pageHead {
  position: relative; }

header h1, header h2 {
  display: inline; }

#ccapLogo {
  padding-bottom: 20px;
  padding-left: 10px; }

header h1 {
  position: absolute;
  top: 28px;
  left: 285px;
  color: #f2f2f2;
  text-shadow: 2px 2px 1px #3f4443;
  font-size: 142%;
  letter-spacing: .04em; }

.ie7 header h1,
.ie8 header h1,
.ie9 header h1 {
  font-size: 118%;
  letter-spacing: 0;
  top: 32px;
  left: 262px; }

#yearRibbon {
  position: absolute;
  top: -21px;
  right: 190px; }

.ie7 #yearRibbon {
  top: -21px; }

#twitterHeadWrapper {
  position: relative;
  float: right;
  top: 33px;
  right: 10px;
  width: 80px;
  height: 22px; }

.ie7 #twitterHeadWrapper {
  top: -38px; }

.ie8 #twitterHeadWrapper,
.ie9 #twitterHeadWrapper {
  top: 33px; }

#twitterHeadWrapper .twitterBtn {
  float: left;
  position: absolute;
  left: 0;
  margin-left: 50px;
  background: url(../img/twitter-sprite-28x41.png) 0 0 no-repeat;
  height: 22px;
  width: 28px;
  display: block; }

#twitterHeadWrapper .twitterBtn:hover {
  background: url(../img/twitter-sprite-28x41.png) 0 -21px no-repeat; }

#twitterHeadWrapper .twitterBtn .a-btn-slide-text {
  position: absolute;
  left: -38px;
  top: 2px;
  opacity: 0;
  font-size: 70%;
  font-style: italic;
  text-shadow: 1px 1px 1px #252525;
  font-weight: 700;
  cursor: pointer; }

#twitterHeadWrapper .twitterBtn:hover .a-btn-slide-text {
  opacity: 1;
  color: #75c9de; }

a.twitterBtn {
  text-decoration: none; }

/* Headers */
h1, h2 {
  font-family: "PT Sans Narrow", Arial, sans-serif; }
  h1 h3, h1 h4, h1 h5, h1 h6, h2 h3, h2 h4, h2 h5, h2 h6 {
    font-family: "PT Sans", Arial, sans-serif; }

h1, h2 {
  text-transform: uppercase;
  font-weigth: bold;
  font-weight: 700; }

h2 {
  font-size: 160%;
  text-shadow: 1px 1px 0px #f2f2f2, 1px 2px 0px #a2a7a5;
  color: #3f4443;
  padding: 20px 20px 10px 20px;
  margin-bottom: 0; }

.ie7 h2, .ie8 h2, .ie9 h2 {
  font-size: 140%; }

h3 {
  color: #505657;
  font-size: 87%; }

h4 {
  color: #505657;
  font-size: 65%;
  font-weight: 400; }

.ie7 h4 {
  padding-bottom: 20px; }

.italic {
  font-style: italic; }

p,
address,
#participate ul,
#participate li {
  font: 100%/1.4em "PT Sans" sans-serif;
  font-weight: 400;
  color: #505657; }

p, address {
  padding: 0px 20px 10px 20px;
  margin: 0; }

#participate ul, #participate li {
  list-style-type: disc;
  padding: 0px 20px 10px 20px;
  margin: 0; }

#participate li {
  margin-left: 20px;
  padding-left: 0px; }
  #participate li li {
    padding-top: 10px;
    padding-bottom: 0px;
    list-style-type: square; }

/* ===== weeks & teams table ===== */
table {
  font-family: "PT Sans Narrow", Arial, sans-serif;
  letter-spacing: .05em;
  margin: 0 20px 20px 20px;
  text-align: left;
  margin-top: 10px; }
  table td, table th {
    padding: 4px 4px;
    font-size: 88%;
    font-weight: 400;
    color: #505657; }
  table th {
    background-color: #32565e;
    color: white;
    font-family: "PT Sans Narrow";
    font-weight: 400;
    font-size: 89%;
    letter-spacing: .06em; }

.ie7 table, .ie8 table, .ie9 table {
  letter-spacing: 0; }
  .ie7 table td, .ie7 table th, .ie8 table td, .ie8 table th, .ie9 table td, .ie9 table th {
    font-size: 72%; }

/* jQuery zebra stripes and hover highlight on table */
.zebra {
  background-color: #f1f6f8; }

tr.zebraHover {
  background-color: #c7e9f2; }

.callout {
  background-color: #8ed3e4 !important; }

/* ===== main menu nav ===== */
#navBackground {
  position: fixed;
  top: 90px;
  left: 0;
  background-color: #2c302f;
  height: 36px;
  width: 100%;
  box-shadow: 0px 2px 6px 2px rgba(59, 67, 68, 0.5);
  -webkit-box-shadow: 0px 2px 6px 2px rgba(59, 67, 68, 0.5);
  z-index: 99; }

.ie7 #navBackground,
.ie8 #navBackground,
.ie9 #navBackground {
  height: 34px; }

nav {
  padding: 6px 10px; }

nav ul {
  padding-left: 10px; }
  nav ul li {
    float: left;
    margin-right: 4px;
    background-color: #3a4243;
    text-transform: uppercase;
    font-family: "PT Sans Caption", sans-serif;
    font-weight: 400;
    font-size: 84%;
    letter-spacing: .06em; }

.ie7 nav ul {
  font-size: 86%; }

.ie8 nav ul,
.ie9 nav ul {
  font-size: 90%; }

nav a:link,
nav a:visited {
  color: #75c9de;
  text-decoration: none; }

nav a:hover {
  color: #154b58; }

#mainMenu li a {
  display: block;
  padding: 3px 5px 2px 5px; }

#mainMenu a {
  background: url("../img/main-menu-bg.jpg") repeat 0 0; }

ul#mainMenu > li > a.active {
  color: #154b58;
  background-position: 0 -250px !important;
  cursor: default; }

/* ===== main content ===== */
article, aside {
  background: url("../img/top-border.gif") repeat-x top left;
  background-color: white;
  box-shadow: 0px 0px 6px 2px rgba(59, 67, 68, 0.4);
  -webkit-box-shadow: 0px 0px 6px 2px rgba(59, 67, 68, 0.4);
  overflow: hidden;
  margin: 20px 0; }

/* width needs to be defined for ie7 */
section#aboutCCAP article,
section#graph article,
section#participate article,
section#weeks article,
section#staff aside {
  width: 700px; }

#mainContent section {
  position: relative;
  padding: 130px 0 0 0; }

.ie7 #mainContent section#aboutCCAP,
.ie7 #mainContent section#contact {
  padding-top: 150px; }

#aboutCCAP .introCopy {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  -webkit-column-rule: 1px dotted #e1e1e1;
  -moz-column-rule: 1px dotted #e1e1e1;
  column-rule: 1px dotted #e1e1e1; }

#fig1 img {
  display: block;
  margin: 0 auto;
  padding: 6px 0 20px 0; }

img.sectionDivider {
  position: relative;
  top: -70px;
  left: 0;
  width: 700px; }

img.topArrow {
  position: relative;
  top: -90px;
  right: 0px;
  float: right; }

#dynamicGraph {
  width: 660px;
  height: 400px;
  margin: 6px auto 20px auto;
  box-shadow: 0px 0px 6px 2px rgba(59, 67, 68, 0.4) inset;
  -webkit-box-shadow: 0px 0px 6px 2px rgba(59, 67, 68, 0.4) inset;
  background-color: #eaeef0; }

/* ===== Extras ===== */
#tooltip {
  font-size: 76%;
  font-family: "PT Sans", Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  max-width: 250px;
  padding: .2em .3em;
  position: absolute;
  z-index: 2000;
  text-shadow: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: 0px 0px 6px 2px rgba(59, 67, 68, 0.4);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(59, 67, 68, 0.4);
  -moz-box-shadow: 1px 1px 4px 1px rgba(59, 67, 68, 0.4); }

/* ===== Principal Investigators & Staff ===== */
#staff div {
  float: left;
  margin: 0 24px 20px 0; }

#staff #photo1 {
  margin-left: 20px; }

.staffPhoto {
  display: block;
  border: 1px solid #a2a7a5;
  background-color: white;
  margin-bottom: 10px;
  padding: 5px;
  width: 100px;
  height: 100px; }

/* ===== Contact Us :: News ===== */
#contact aside {
  padding-bottom: 8px; }

#contact p,
#contact address,
#news p {
  font-size: 78%;
  /*	.articleCreditDate {
  		font-size: 75%;
  	}*/ }

.ie9 #contact p, .ie8 #contact p, .ie7 #contact p,
.ie9 #contact address, .ie8 #contact address, .ie7 #contact address,
.ie9 #news p, .ie8 #news p, .ie7 #news p {
  font-size: 77%; }

#contact a, #news a {
  color: #2ea2bf;
  /*cursor:pointer;*/ }

#news {
  /*p.mpArticle {
  	line-height: 1.3em;
  	a:before {
  		content: ":: ";
  		margin-left: -9px;
  	}
  }*/ }
  #news #mpLogo {
    padding: 4px 0; }
  #news p.readMore {
    float: right;
    margin-bottom: 8px; }
  #news #doubleArrow {
    padding-right: 4px; }

#news h4 {
  padding-left: 20px;
  padding-right: 8px;
  font-weight: 400;
  font-size: 78%; }
  #news h4 a:before {
    content: ":: ";
    margin-left: -9px; }

/* ===== Footer ===== */
#footer {
  background-color: #2c302f;
  height: 100%;
  /*100%;*/
  width: 100%; }

.ie7 #footer {
  height: 60px; }

#scientifResearchLogo {
  padding: 18px 0 13px 20px; }

.ie7 #scientificResearch Logo {
  padding-bottom: 0; }

#twitterFooterWrapper {
  position: relative;
  float: right;
  top: 16px;
  right: 10px;
  width: 80px;
  height: 22px; }

.ie7 #twitterFooterWrapper {
  top: -35px; }

#twitterFooterWrapper .twitterBtn {
  float: left;
  position: absolute;
  left: 0;
  margin-left: 50px;
  background: url(../img/twitter-sprite-28x41.png) 0 0 no-repeat;
  height: 22px;
  width: 28px;
  display: block; }

#twitterFooterWrapper .twitterBtn:hover {
  background: url(../img/twitter-sprite-28x41.png) 0 -21px no-repeat; }

#twitterFooterWrapper .twitterBtn .a-btn-slide-text {
  position: absolute;
  left: -38px;
  top: 2px;
  opacity: 0;
  font-size: 70%;
  font-style: italic;
  display: inline-block;
  text-shadow: 1px 1px 1px #252525;
  font-weight: 700; }

#twitterFooterWrapper .twitterBtn:hover .a-btn-slide-text {
  opacity: 1;
  color: #75c9de; }