/* stylesheet for Cancer Consortium */

/* general overall settings here */

body {
  margin:0;
  padding:0;
  background-image:url("../img/extranet_bg.gif");
  background-repeat:repeat-y;
  background-position:0 0;
}
body,td,th {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 12px;
}


/* main structural sections */

#BodyContainer {
  /* position:relative; */ /* not sure why having this in place messes up right-floating items in IE upon print (omits them) */
  padding-top:130px;
  width:612px;
  margin-left:194px; /* we don't specify the right margin, which is 50px of white space using background-image */
  z-index:1;
  background-color:#ffffff;
  
  /* here are the corrections for splash page, which you specify on that page itself
   padding-top:230px;
   width:730px;
   margin-left:50px; */
  
  /*border:1px red solid;*/   /* for debugging */
}

#BodyFooter { /* notice that BodyFooter is contained within BodyContainer, so some styles cascade from above */
  margin-top:20px;
  padding-top:25px;
  padding-bottom:5px;
  margin-bottom:5px;
  /*border:1px purple solid;*/ /* debugging */
}

/* breadcrumbs are the topmost navigation element showing the path back home.
   this is a div ENCLOSED WITHIN the BodyContainer, so some of the BodyContainer's
   settings cascade here. */
#Breadcrumbs {
    font-weight: normal;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #333333;
    margin-left: 5px;
    margin-top: 0px;
    margin-bottom:25px;
}


/* contains the top-part of each page, graphics, logo, utility nav, etc.
   and we only adjust its width here in the css. used on all content pages,
   plus the splash. */
#HeaderContainer {
  width:830px;
  position:absolute;
  top:0;left:0;
  z-index:2; /* lays on top of body layer's top margin */
}

/* contains the section navigation, on the left side of the interior pages. */
#NavContainer {
  position:absolute;
  left:0;
  top:120px;
  z-index:3; /* lays on top of body layer's top margin */
  vertical-align: middle;
  width: 180px;
  /*border:1px pink solid;*/
}


/* page content treatments */

.PageBody {
  line-height:16px;   
  /* border:1px green solid; */ /* for debugging only */
}

/* all lists in the body content should have standard bullets and spacing */
.PageBody ul li {
    list-style-image: url("../img/bullet_blue.gif");
    list-style-position: outside;
    /*line-height: 20px;*/
    /*margin-bottom: 10px;*/
}

/* the search feature on interior pages */
#SearchBox {
	height: 25px;
	vertical-align: middle;
	margin-top: 10px;
	float: right;
  padding-right:10px;
}




/* LINK TREATMENTS are tied to the content div in question.
   note that we use classes, not ids, so that you can use
   classes on your links within each block successfully. */

.PageBody a, .PageBody a:visited { color: #000000; text-decoration: underline; }
.PageBody a:focus, .PageBody a:visited:focus { color: #739134; }
.PageBody a:hover, .PageBody a:visited:hover,
.PageBody a:active, .PageBody a:visited:active { color: #999999; }

.HeaderContainer a, .HeaderContainer a:visited { color: #333333; text-decoration: underline; }
.HeaderContainer a:hover, .HeaderContainer a:visited:hover,
.HeaderContainer a:focus, .HeaderContainer a:visited:focus,
.HeaderContainer a:active, .HeaderContainer a:visited:active { color: #888888; text-decoration: underline; }

.BodyFooter a, .BodyFooter a:visited { color: #739134; text-decoration: underline; }
.BodyFooter a:hover, .BodyFooter a:visited:hover,
.BodyFooter a:focus, .BodyFooter a:visited:focus,
.BodyFooter a:active, .BodyFooter a:visited:active { color: #000000; text-decoration: none; }

.Breadcrumbs a, .Breadcrumbs a:visited { color: #333333; text-decoration: underline; }
.Breadcrumbs a:hover, .Breadcrumbs a:visited:hover,
.Breadcrumbs a:focus, .Breadcrumbs a:visited:focus,
.Breadcrumbs a:active, .Breadcrumbs a:visited:active { color: #888888; text-decoration: underline; }

.NavContainer a, .NavContainer a:visited { color: #333333; text-decoration: none; }
.NavContainer a:hover, .NavContainer a:visited:hover,
.NavContainer a:focus, .NavContainer a:visited:focus,
.NavContainer a:active, .NavContainer a:visited:active { color: #888888; text-decoration: underline; }


/* headers */

h1 { /* page titles */
    font-size: 20px;
    margin-top: 0px; 
    padding-top:0px;
    padding-top: 0px;
    font-family: Helvetica, Arial, sans-serif;
    color:#739134;
}

h2 {
  font-size: 16px;
  margin-top: 0px;
  padding-top:0px;
  padding-bottom: 0px;
  color: #739134;
  font-family: Helvetica, Arial, sans-serif;
}
        
h3 {
    font-size: 11px;
    padding-bottom: 0px;
}

h4 {
    font-size: 11px;
    padding-bottom: 0px;
    margin-top: 0px; 
}  
            

/* navigation treatments (section nav) */

.navFadeBottom {
	width: 100%;
	color: #000000;
	font-weight: normal;
	font-size: 11px;
	display: block;
	background-image: url("../img/grey_fade_nav.jpg");
	background-repeat: repeat-x;
	height: 360px;
  border-right:1px white solid;
}

.NavContainer { font-size:11px; }
.NavContainer ul {   list-style-position:outside; }
.NavContainer ul li { list-style-type:square; } 

.Navon { background-color:#e7e3e3; } /* each general navon (div), before stitching, so this won't be carried into post-stitching */

.navLevel0 { } /* section title (not actually used) */
.navLevel1 {   padding-left:0; margin-left:0; margin-bottom:0; background-color:#e7e3e3; list-style-image:url("../img/transparent.gif");  } /* first level nav (top-level folder contents), padding-left:0 (ff) and margin-left:0 (ie) make this flush left with no bullet. margin-bottom:0 closes up space at this level */
.navLevel1 li {  padding-bottom:9px; padding-top:9px; padding-left:5px; border-bottom:1px white solid;  background-color:#e7e3e3; } /* this creates the padding at the topmost sections */

.navLevel2,
.navLevel3, 
.navLevel4,
.navLevel5, 
.navLevel6,
.navLevel7,
.navLevel8,
.navLevel9, 
.navLevel10,
.navLevel11,
.navLevel12 {  background-color: white; list-style-image: url("../img/navdash.gif"); padding-left:10px;margin-left:10px; margin-top:5px; }
/* surely 12-levels-deep will be enough */

.navLevel2 li,
.navLevel3 li,
.navLevel4 li,
.navLevel5 li,
.navLevel6 li,
.navLevel7 li,
.navLevel8 li,
.navLevel9 li,
.navLevel10 li,
.navLevel11 li,
.navLevel12 li { background-color:white; padding-bottom:0; padding-top:0; padding-left:0;margin-left:0; padding-bottom:6px; }




/* body content treatments/general classes */

/* used on splash page for major sections, links to same */
.greeninlineheader {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #739134;
  font-weight: bolder;
}
.greeninlineheader a, .greeninlineheader a:visited { color: #739134; text-decoration: underline; }
.greeninlineheader a:focus, .greeninlineheader a:visited:focus { color: #739134; }
.greeninlineheader a:hover, .greeninlineheader a:visited:hover,
.greeninlineheader a:active, .greeninlineheader a:visited:active { color: #000000; }


/* back to FHCRC link on interior pages needs to override BodyFooter link treatment */
.BodyFooter a.linkToFHCRC, .BodyFooter a.linkToFHCRC:visited { color: #000000; text-decoration: underline; }
.BodyFooter a.linkToFHCRC:hover, .BodyFooter a.linkToFHCRC:visited:hover,
.BodyFooter a.linkToFHCRC:focus, .BodyFooter a.linkToFHCRC:visited:focus,
.BodyFooter a.linkToFHCRC:active, .BodyFooter a.linkToFHCRC:visited:active { color: #999999; text-decoration: none; }


.caption {
  font-weight: normal;
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #666666;
  line-height: 14px;
}

.note {
  font-size: 11px;
}
.grey {
  color: #666666;
}
.teal {
  color: #008080;
}

/* this lines up the bullets along the left edge 
   http://www.alistapart.com/articles/taminglists/ */
ul.flush {
  padding-left:1em;
  margin-left:6px;
  margin-top:0;
}

img.photo {
  border-right: #999999 1px solid; 
  border-top: #999999 1px solid;
  border-top: #999999 1px solid; 
  border-left: #999999 1px solid; 
  border-bottom: #999999 1px solid
}

/* sometimes you just need plain links, not underlined links */
a.plain, a.plain:visited { text-decoration:none; }
a.plain:hover { text-decoration:underline; }

/* sometimes you need block elements not to render margin/padding below itself, e.g., H2s */
.notrailingspace {
  margin-bottom:0;
  padding-bottom:0;
}



/* classes to support global styles, etc. */
.PhotoCaption {
  font-size: 11px;
  color: #333333;
  margin-bottom: 0px;
  margin-top: 0px;
  line-height: 13px;
}
.PhotoCredit {
  font-size: 11px;
  margin-top: 1px;
  color: #333333;
  text-align: right;
  font-style: italic;
  margin-bottom: 0px;
}


/* general purpose border classes, usually used on tables and divs */

.bottomdotborder {
	border-bottom-style : dotted;
	border-bottom-width : thin;
	border-bottom-color : #cccccc;
}

.topdotborder {
	border-top-style : dotted;
	border-top-width : thin;
	border-top-color : #cccccc;
}

.rightdotborder {
	border-right-style : dotted;
	border-right-width : thin;
	border-right-color : #cccccc;
}

.leftdotborder {
	border-left-style : dotted;
	border-left-width : thin;
	border-left-color : #cccccc;
}


/* table styles for content snippets, etc. */

/* table style 1A :: purple gradient header with grey ruled rows */
.TableStyle1A {
  border:none;
}  
.TableStyle1A tr.tableheader td,
.TableStyle1A tr.tableheader th { /* header row, user may choose to use td or th so include both here */
  background-image: url("../img/table_header_greyfade.gif");
  background-repeat: repeat-x;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 16px;
  padding-top: 6px;
  padding-bottom: 8px;
  font-style: normal;
}
.TableStyle1A td { /* applies to all table cells */
  border:none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c6c4c4;
}

/* table style 1B :: purple gradient header with grey ruled rows */
.TableStyle1B {
  border:none;
} 
.TableStyle1B tr.tableheader td,
.TableStyle1B tr.tableheader th { /* header row, user may choose to use td or th so include both here */
  background-image: url("../img/table_header_brown.gif");
  background-repeat: repeat-x;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 16px;
  padding-top: 6px;
  padding-bottom: 8px;
  font-style: normal;
}
.TableStyle1B td { /* applies to all table cells */
  border:none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c6c4c4;
}


/* table style 2 :: simple grey header bar with grey rule on bottom row only */
.TableStyle2 {
  border:none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c6c4c4;
} 
.TableStyle2 tr.tableheader td,
.TableStyle2 tr.tableheader th { /* header row, user may choose to use td or th so include both here */
  background-color: #e8e8e8;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 16px;
  padding-top: 6px;
  padding-bottom: 8px;
  font-style: normal;
}
.TableStyle2 td { /* applies to all table cells */
  border:none;
}

/* table style 3A :: grey header bar with light grey & white alternating rows */
.TableStyle3A {
  border: 1px solid #333333;
} 
.TableStyle3A tr.tableheader td,
.TableStyle3A tr.tableheader th { /* header row, user may choose to use td or th so include both here */
  background-color: #e8e8e8;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 16px;
  padding-top: 6px;
  padding-bottom: 8px;
  font-style: normal;
}
.TableStyle3A td { /* applies to all table cells */
  border:none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c6c4c4;
}
.TableStyle3A tr.tablerowshaded {
  background-color:#fbfafa;
}


/* table style 3B :: grey header bar with light grey & white alternating rows */
.TableStyle3B {
  border: 1px solid #333333;
} 
.TableStyle3B tr.tableheader td,
.TableStyle3B tr.tableheader th { /* header row, user may choose to use td or th so include both here */
  background-color: #eaaf87;/*#dfd9ee;*/
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 16px;
  padding-top: 6px;
  padding-bottom: 8px;
  font-style: normal;
}
.TableStyle3B td { /* applies to all table cells */
  border:none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #dfd9ee;
}
.TableStyle3B tr.tablerowshaded {
  background-color:#faefe9;/*#f9f7fd;*/
}



/* table style 5 :: simple ruled table with grey header bar */
.TableStyle5 {
  border: 1px solid #333333;
}
.TableStyle5 tr.tableheader td,
.TableStyle5 tr.tableheader th { /* header row, user may choose to use td or th so include both here */
  background-color:#e0e0dd;
  font-family: Helvetica,Verdana,Arial,sans-serif;
  font-size: 14px;
  font-weight: bold; 
  color: #333333;
  line-height: 16px;
  margin-top: 6px;
  margin-bottom: 8px;
  font-style: normal;  
}
.TableStyle5 td {  /* applies to all table cells */
  text-align:left;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-left-style: solid;
  border-top-color: #dbd9d9;
  border-right-color: #999999;
  border-bottom-color: #dbd9d9;
  border-left-color: #999999;  
}

/* fix a problem with CMS and anchor tags, removes underlining */
.anchorGlyph { text-decoration:none !important; }
