/* css global styles for bioconductor */

/* looks like sass stylesheet is not used */

/* global styles defined at the topmost level.
   these will be overridden by subsequent selectors. */
 
/* reset the margins and padding of all elements so we can 
   specify them ourselves */
body,h1,h2,h3,h4,h5,h6,p,div,span { margin:0; padding:0; border:0;  } 

/* some general treatments up top */
body {
  margin:0; padding:0;
  background-color: #333333;
  background-image: url(../images/site_bg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
}
h1 {
  font-size: 250%;
  margin-bottom:1em;
  font-weight:normal;
  color:#87b13f;
  line-height:1.1em;
} /* use margin, not padding, due to the fader effect which uses padding */
h2 {
  font-size: 160%;
  margin-bottom:1em;
  margin-top:1em;
  font-weight:normal;
  line-height:1.1em;
}
h3 {
  font-size:130%;
  margin-bottom:1em;
  margin-top:1em;
  font-weight:bold;
}
h4,h5,h6 {
  font-size:115%;
  margin-bottom:1em;
  margin-top:1em;
  font-weight:bold;
} /* not expecting to dive deeper than four levels on a single page */
h1,h2,h3,h4,h5,h6 { font-family:Helvetica,Arial,Verdana,Sans-serif; }
/* we use a little padding below the h1 and h2 tags to get the 8px fading
   effect, which grows the entire width available to the element */
h1,h2 {
  padding-bottom: 8px;
  background-image: url(../images/hx_fader.gif);
  background-repeat:repeat-x;
  background-position:bottom left;
}
/* multiple lines (breaking text) won't work nicely with icons, but they
   are only used at top-level pages with short text */ 
h1 img, h2 img { padding-right:12px; vertical-align:middle; }

p, table { padding-bottom: 1em; } /* makes a nice separation between paragraphs */

.olive { color:#87b13f; } /* anything can be colored olive */
.blue  { color:#1a81c2; } /* anything can be colored blue (light blue) */

code { color:#87b13f; font-family: 'Lucida Console',monaco,monospace; }

/* SiteContainer is the single div containing every other element in the site.
   it floats center, with no vertical margins, and provides the overall
   width of the site. we provide both an id and a class name in order
   to allow more flexible cascading: id rules are highly ranked while
   class names play nicer with other rules. */
#SiteContainer {
  margin:0 auto; /* floats the design center */
  width:960px;   /* change the site design width here */
  position:relative;
  /*border:2px black solid;*/
}
.SiteContainer {
  background-color: #ffffff;
}


/* SiteMasthead contains the topmost logo and sitenav elements */
#SiteMasthead {
  height: 126px;
  white-space:nowrap;
  position:absolute;
  top:0;
  left:0;
  width:960px;
  /*border:1px green solid;*/
}
.SiteMasthead {
  font-family:Verdana,Arial,Helvetica,Sans-serif;
  font-size:70%;
  border-bottom: 1px #c9c5c5 solid;
}
.SiteMastheadRight {
  position:relative;
  z-index:1;
  height:125px;
  width:600px;
  padding-right:48px;
  float:right;
  background-color:#0092ac;
}
.SiteMastheadRightBackground {
  position:relative;
  z-index:2;
  height:100%;
  width:100%;
  background-image:url(../images/masthead_nav_fade.gif);
  background-position: top left;
  background-repeat: repeat;
}
.site_search {
  position:relative;
  z-index:3;
  height:52px;
  width:240px;
  margin-top:20px;
  padding:0;
  float:right;
  text-align:center;
  color:#ffffff;
}
ul.masthead_nav {
  position:relative;
  z-index:3;
  height:53px;
  width:600px;
  margin:0;
  padding:0;
  float:right;
  list-style-type:none;
} /* positioning in order to play nicely with the black vanity bar above
     the site logo (see logo_vanity_bar) */
li.masthead_nav_element {
  float:left;
  height:53px;
  text-align:center;
} /* note that padding-top + height = 53px, the height of the
     ul.masthead_nav. */
li.masthead_nav_element a {
  font-size:130%;
  color:#ffffff;
  text-decoration:none;
  font-weight:bold;
  }
li.masthead_nav_element a:hover { color:#c4d931; }
li.masthead_nav_element_selected a { color:#c4d931; }
/* used in the navigation auto-select. see global js file, checkNav(). */


.masthead_logo { border:0; padding: 24px 0 0 30px; float:left; }
.logo_vanity_bar {
  position:absolute;
  top:0;
  left:0;
  width:320px;
  background-color:black;
  height:1px;
  z-index:1;
} /* plays a bit with positioning and z-index in order to ride
     under the nav also w/in this element */
/* each masthead nav element is listed here from left to right, 
   so you can adjust the width of each (if necessary). total
   width all all elements should not exceed 648px */
#masthead_nav_element_1 { width:120px; }
#masthead_nav_element_2 { width:120px; }
#masthead_nav_element_3 { width:120px; }
#masthead_nav_element_4 { width:120px; }
#masthead_nav_element_5 { width:120px; }


/* PageContent is the main content on the page */
#PageContent { padding:140px 20px 0 20px;  /*border:1px red solid;*/ }
.PageContent {
  font-family:Verdana,Arial,Helvetica,Sans-serif;
  font-size:70%;
  line-height:1.3em;
}
/* when there is a right rail, apply these styles: */
/* width is 64% or 600px with a right rail. adjust in concert
   with width of RightRail. */
div#PageContent.WithRightRail { float:left; width:600px; }
/* links are simply blue, hovering slightly less blue */
.PageContent a { color:#1a81c2; }
.PageContent a:visited { color:#1a81c2; }
.PageContent a:hover { color:#4c94c2; }

 /* ul lists in main content area are generally pleasing */ 
.PageContent ul {
  list-style-type:none;
  margin:0;
  margin-bottom:1em;
  padding:0;
}
.PageContent ul li { 
  background-image:url(../images/list_bullet_bare.gif);
  background-position:0 .5em;
  background-repeat:no-repeat;
  padding-left:12px;
}


/* PageBreadcrumbs contains the page's breadcrumb trail. it lives
   nested within PageContent in order to flow correctly when
   breadcrumbs wrap to a second line. we use a background image
   in order to create the little arrows between elements. */
#PageBreadcrumbs { padding:0 0 2em 0; /*border:1px orange solid;*/ }
.PageBreadcrumbs {
  font-family:Helvetica,Arial,Verdana,Sans-serif;
  font-size:110%;
}
.PageBreadcrumbs ul { list-style-type:none; margin:0; padding:0; }
.PageBreadcrumbs ul li {
  display:inline;
  padding-left:.3em;
  background-image:none;
}
.PageBreadcrumbs a, .PageBreadcrumbs a:visited {
  color:#000000;
  padding-right:1em;
  background-image: url(../images/breadcrumb_arrow.gif);
  background-position:center right;
  background-repeat:no-repeat;
}
.PageBreadcrumbs a:hover { color:#888888;  }


/* PageInternalLinksMenu contains any links to intra-page anchors
   (i.e., jumps down this page)  */
.PageInternalLinksMenu ul {
  margin-left:.3em;
  padding-left:.3em;
  list-style-image:none;
}
.PageInternalLinksMenu ul li {
  display:inline;
  padding-left:8px;
  padding-right:1em;
  background-image: url(../images/list_bullet.gif);
  background-repeat:no-repeat;
  background-position:left 5px;
}
.PageInternalLinksMenu ul li a { white-space:nowrap; }


/* RightRail is the right-hand column on some pages. it is a sibling
   to PageContent. when used, you must add WithRightRail class to the
   PageContent div in order to save space for RightRail. */
#RightRail {
  /* width is 280px or 27%. adjust in concert with width of
     PageContent.WithRightRail */
  width:280px;
  padding:140px 20px 0 10px;
  float:right;
  background-image:url(../images/rightrail_fade.jpg);
  background-position:top left;
  background-repeat:no-repeat;
  /* fade ends at just under 560px, so make column at least that high
     to avoid an edge */
  min-height:560px;
  /*border:1px purple solid;*/
}
.RightRail {
  font-family:Verdana,Arial,Helvetica,Sans-serif;
  font-size:70%;
  line-height:1.3em;
} /* line-height matches that of .PageContent */
.RightRail a { color:#1a81c2; }
.RightRail a:visited { color:#1a81c2; }
.RightRail a:hover { color:#4c94c2; }
p.rightrail_header {
  font-size:130%;
  color:#87b13f;
  font-weight:bold;
  padding:0;
  margin-bottom:1em;
}

/* ul lists in right rail are generally pleasing using the
   background-image trick */ 
.RightRail ul {
    list-style-type:none;
    padding:0;
    margin-top:0em;
    margin-bottom:1em;
}
.RightRail ul li { 
 	background-image:url(../images/list_bullet_bare.gif);
	background-position:0 .5em;
	background-repeat:no-repeat;
	padding-left:12px;
}


/* "interior" navigation menu, usually within the RightRail,
   a simple ul-listing */
ul.section_nav { list-style-type:none; margin:0; padding:0; padding-left:1em; }
ul.section_nav li { 
  padding-bottom:1em; 
  font-size:120%;
 	background-image:url(../images/list_bullet_bare.gif);
	background-position:0 .5em;
	background-repeat:no-repeat;
	padding-left:12px;
}


/* SiteGlobalFooter is the olive box at page bottom which
   contains global site navigation elements, copyright and logos */
#SiteGlobalFooter {
  background-color: #345208; /* matches fade at bottom edge */
  padding: 24px;
  margin-top:30px;
  background-image: url(../images/global_footer_fade.gif);
  background-position: top left;
  background-repeat: repeat-x;
  clear:both;
  /* in case the right hand column and page body above me get squirrely */
}
.SiteGlobalFooter {
  color: #ffffff;
  font-family:Verdana,Arial,Helvetica,Sans-serif;
  font-size:70%;
}
/* slightly tighter spacing in the footer */
.SiteGlobalFooter p { padding-bottom:.4em }
.SiteGlobalFooter a { color:#ffffff; text-decoration:none; }
.SiteGlobalFooter a:hover { text-decoration:underline; }
.SiteGlobalFooter ul { list-style-type:none; }

ul.footer_nav_list {
  margin:0;
  line-height:1.2;
  margin-left:0;
  margin-top: 18px;
  padding-left:0;
}
/* the five main nav elements, not their contents */
li.footer_nav_list_element { float:left; }
/* boosts intra-element spacing */
.footer_nav_list_element li { padding-bottom:.5em; }
/* each footer nav element is listed here from left to right, 
   so you can adjust the width of each (if necessary). total
   width all all elements should not exceed 912px = the design
   width of 960px - 2 x 24px padding */
.footer_nav_list_element_0 { width:50px; }
.footer_nav_list_element_1 { width:220px; }
.footer_nav_list_element_2 { width:220px; }
.footer_nav_list_element_3 { width:200px; }
.footer_nav_list_element_4 { width:220px; }


/* little logos for fhcrc and bioconductor link back to their respective
   locations */
.global_footer_logo_bc { float:right; padding-left:70px; padding-right:30px; }
.global_footer_logo_bc img { border:0; width:154px; height:51px; }
.global_footer_logo_fhcrc { float:right; }
.global_footer_logo_fhcrc img { border:0; width:154px; height:51px; }

/* copyright and attribution portion of the global footer */
.attribution_copyright { padding-bottom:30px; border-bottom:1px #a8bf7c solid; }


/* here is the styling for shaded boxes. the content author should NOT
   use these classes directly... instead, create a div as follows:
   
      <div class='shaded_box'>
          content here
      </div>
      
   when the page loads, JS will check for all div's of class shaded_box
   and perform the correct HTML munging to create the shading effect. 
   
   because we use a table structure to get the effect, you'll see classes
   sb1 (top-left) through sb9 (bottom-right), reading left-to-right, then
   top-to-bottom. box sb5, center-center, contains actual content.
   */
.shaded_box {
  border:1px #d8dcdd solid;
  padding: 16px;
  margin:8px;
  background-color:#ffffff;
} /* will be removed after processing the shaded_box div */
.shaded_box .box_header { font-size:130%; font-weight:bold; }
.shaded_box .box_header a, 
.shaded_box .box_header a:visited { color:#000000; text-decoration:none; }
.shaded_box .box_header a:hover { color:#87b13f; text-decoration:underline; }

.sb { width:100%; height:100%; }
.sb .sb1 {
  width:8px;
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/tl.png);
  background-position:bottom right;
  background-repeat:no-repeat;
}
.sb .sb2 {
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/top.png);
  background-position:bottom left;
  background-repeat:repeat-x;
}
.sb .sb3 {
  width:8px;
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/tr.png);
  background-position:bottom left;
  background-repeat:no-repeat;
}
.sb .sb4 {
  width:8px;
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/left.png);
  background-position:top right;
  background-repeat:repeat-y;
}
.sb .sb5 {
  padding:16px;
  border:1px #d8dcdd solid;
  vertical-align:top;
  background-color:#ffffff;
}
.sb .sb6 {
  width:8px;
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/right.png);
  background-position:top left;
  background-repeat:repeat-y;
}
.sb .sb7 {
  width:8px;
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/bl.png);
  background-position:top right;
  background-repeat:no-repeat;
}
.sb .sb8 {
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/bottom.png);
  background-position:top left;
  background-repeat:repeat-x;
}
.sb .sb9 {
  width:8px;
  height:8px;
  padding:0px;
  background-image: url(../images/shadedbox/br.png);
  background-position:top left;
  background-repeat:no-repeat;
}

/* sb-style boxes can have special styles within them */
.sb .box_header { font-size:130%;  }
.sb .box_header a, 
.sb .box_header a:visited { color:#000000; text-decoration:none; }
.sb .box_header a:hover { color:#87b13f; text-decoration:underline; }


/* here is the styling for code boxes. grey background, code (tt) font,
   and overflow is scroll so long lines don't push the main content area
   too far out and destroying the design.
   
   use like this:
   
      <p class="code_box">
         text here
      </p> 
   
   */
.code_box { 
  background-color: #e3e3e3;
  padding:1em;
  border:1px #aaaaaa dashed;
  font-family:'Lucida Console',monaco,monospace;
  margin-top:1em;
  margin-bottom:1em;
  overflow-x: auto;
  white-space:pre;
}

.bioc_citation {
  padding-left: 1em;
}

pre {
  background-color: #e3e3e3;
  padding:1em;
  border:1px #aaaaaa dashed;
  font-family:'Lucida Console',monaco,monospace;
  margin-top:0;
  margin-bottom:1em;
  overflow-x: auto;
  white-space:pre;
}
pre code {
  color:#000000;
  font-family:'Lucida Console',monaco,monospace;
}


/* simple grey-backgrounded box has no border. use like this
   <div class='grey_box'>...</div> */
.grey_box {
  background-color: #e6e8e7;
  padding:1em;
}
/* and a white-backgrounded box to alternate with the grey_box above */
.white_box {
  padding:1em;
}

/* back to top div
   <p class='back_to_top'>[ <a href='#'>Back to top</a> ]</p> */
.back_to_top { text-align:right; }

/* here is some styling for the search box */
.search_box {
  font-family:'Lucida Console',monaco,monospace;
  border:1px #888888 solid;
  padding-left:4px;
  height:24px;
  width:160px;
  margin-right:5px;
}

/* here is a special style for lists with giant arrows as bullets */
ul.big_arrow_list {
  margin:0;
  margin-left:.1em;
  padding-top:.3em;
  padding-left:20px;
  list-style-image: url(../images/list_big_arrow.gif)
} /* home page uses a special, "big arrow" style list */ 
ul.big_arrow_list li {
  padding-bottom:1em;
  padding-left:3px;
  background-image: none;
}

/* an inline list with no marker */
ul.inline_list {
  list-style-type:none;
  padding-right:5px;
}
ul.inline_list li {
  display: inline;
  padding-right:5px;
}

/* home page has a few special styles */
.hp_alert_box {
  border-top:1px #d8dcdd solid;
  border-bottom:1px #d8dcdd solid;
  padding:1em;
  padding-left:0;
  margin:8px 8px 8px 8px;
}
.hp_options_box { margin:0 8px 0 8px; }

/* these selectors will invoke when printing or print previewing.
   this can be convenient to nicely-format the page for printing,
   including certain sizing and hiding of elements. */
@media print {
  /* for elements that you don't want to print, give them a class of noprint */
  .noprint { display:none; }
  #SiteContainer { margin:auto; }
  #SiteGlobalFooter { padding:0; padding-top:3em; border-top:1px black solid; }
  .attribution_copyright { padding:0; border:0; }
  /* move the logo to the bottom of the print-out */
  #SiteMasthead { height:auto; position:static; }
  .SiteMasthead { border-bottom:0; }
  .masthead_logo { padding:0; float:none; }
  /* shaded boxes don't need to be shaded on print. since they are
     background images, they won't usually be printed anyway so this
     rule tightens up the spacing. */
  .sb1,.sb2,.sb3,.sb4,.sb6,.sb7,.sb8,.sb9 { display:none; }
  #PageBreadcrumbs { display:none; }
  .PageContent h1, .PageContent h2 { border-bottom:1px black solid; }
  #PageContent { padding-left:0; padding-right:0; padding-top:0; }
  /* when printing these two divs (if present) */
  div#PageContent.WithRightRail { width:69%;float:left; }
  /*  need to display side-by-side w/o breaking */
  #RightRail { width:29%; padding:0 0 0 0; }
  .back_to_top { display:none; }
  #PageInternalLinksMenu { display:none; }
  .hp_alert_box, .hp_options_box { margin:24px 0 0 0; }
  
  /* this overrides the sneaky way we do bullets using background images.
     when printing, background images typically are omitted */
  ul {
    list-style-type: disc !important;
	 margin:auto !important;
	 margin-left:1.4em !important;
	 margin-bottom:1em !important;
  }
}

/* styles for displaying biocViews hierarchy */
.biocViewsTree {
 float:left;
 height:300px;
 width:100%;
 overflow:auto;
}

.biocViewsTreePadding {
/*    float:left; */
/*    width: 1%; */
}

.biocViewsPackages {
 float:right;
 width:66%;
}
.biocViewsBelowTree {
 clear:both;
}


/* styles for package detail pages: */

tr.row_odd
{
    background-color: #FFF;
}

tr.row_even
{
    background-color: #DDD;
}

td.docFixedWidth
{
    width: 56px;
}

/* tooltip styling */
.tooltip {
	display:none;
	background-color: white;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	height:250px;
	padding:40px 30px 10px 30px;
	width:250px;
	font-size:11px;
}

/* a .label element inside tooltip */
.tooltip .label {
	color:yellow;
	width:35px;
}

.tooltip a {
	color:#ad4;
	font-size:11px;
	font-weight:bold;
}

.tooltip2 {
  display:none;
  background-color: white;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  padding:40px 30px 10px 30px;
  font-size:11px;
}

/* limit image width to prevent oversized figures on workflow pages */
img {
  max-width: 100%;
}