/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
  border-style: none;
}







/* set font size for body in %, then use em forever after for browser friendliness!*/
/* Remember that em is a relative unit based on the size in the parent object.  see  http://pxtoem.com/  for conversions! */
body{
  background: #abc;
  font: 80% "Trebuchet MS", Helvetica, sans-serif;
  text-align: left;
}



/*fixes weird behavior where table cell content adds in weird padding unpredictably because this was set to baseline by reset   4/15/18*/
td{ vertical-align: top; }



/*below is what remains from the original file */



/*
LINKS:
  a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
  a:active MUST come after a:hover in the CSS definition in order to be effective.
  Logical order is therefore: link, visited, hover, active (aka "LoVe HAte"; LOL)
  
a:link    = #03F (subdued blue, #0d5cab back in the day)
a:visited = #609 (red-shifted blue)
a:hover   = #00F (full-on blue)
a:active  = #F00 (red) 

#36c?? (hover??)
*/




.btn-link{
  border:none;
  outline:none;
  background:none;
  cursor:pointer;
  padding:0;
  font-family:inherit;
  font-size:inherit;
}




a:link, .btn-link {
  color: #03F; /* subdued blue (#0d5cab = my own pick at some point, #06F = nearest web-safe color. darker #03F shows a little better on the slightly blue page background) */
  text-decoration: none;
}

a:visited, .btn-link:visited {
  color: #609; /* red-shifted blue (google-style) */
  text-decoration: none;
}

a.nofade:visited {
  color: #03F; /* SAME AS NON-VISITED LINK! (used where a faded link looks tacky, like login/header stuff) */
  text-decoration: none;
}

a:hover, .btn-link:hover {
  color: #00F; /* blue */
  text-decoration: underline;
}

a:active, .btn-link:active {
  color: #F00;  /* red */
  text-decoration: none;
}












img { border-style: none; }

h1, h2, h3 { margin: 0; }
h1 { font-size: 2.0em; margin-bottom: 0.2em; }
h2 { font-size: 1.5em; margin-bottom: 0.3em; }
h3 { font-size: 1.2em; margin-bottom: 0; }

p { line-height: 140%; margin: 0 0 1.2em 0; }
p.small, span.small, input.small { font-size: .7em; margin: 0 0 0 0;}  /* 11/8/18  input.small doesn't seem to work!!!  argh!! */







/* deprecated!  use p.small instead.  Size/color is obnoxious to make it easy to spot any remaining instances */
.smalltext {
  font-size: 6em;
  color: red;
}











/*These are swiped from Freespoke and generified slightly.  (Freespoke overrides with local CSS)*/

div#header {
  width: 1080px;  /*1080 is 20px wider than the content, which has 10px left and 10pd right padding that increases effective width to 1080px*/
  height: 62px;
  margin-left: auto;
  margin-right: auto;
  /*background-image: url('freespoke_logo.png'); background-repeat: no-repeat;*/
}

/*used for user/login/logout/etc links (presented as UL) in header*/
div#header ul { text-align: right; margin: 0; padding: 0; list-style-type: none; }
div#header li, a { display: inline; }  /* keeps list items in one horizontal line */


div#container {
  text-align:center;
}


div#content {
  width: 1060px;
  min-height: 400px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  background:#f5f5f5;
  margin-top: 15px
  margin-bottom: 10px;
  padding: 5px 10px 5px 10px;
  text-align:left;

  box-shadow: 3px 3px 6px #666;
}


div#footer {
  width: 1070px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

div#footer p {
  margin: 5px;  /* for the footer, go away from paragraph style bottom-only margins used elsewhere by default */
}


div#debug {
  border: 2px solid black;
  background: #ffbf00;
  padding: 3px;
  margin: 5px;
  text-align: left;
  width: 400px;
}











div.ksbox
{
  margin: 10px 0px 0px 10px;
  border: 1px solid #000;
  background: #FFF;
  padding: 10px;
}

div.ctrbox
{
  margin-left: auto;
  margin-right: auto;
}

div.homebox
{
  width:600px;
}

div.loginbox
{
  width:400px;
}



div.box {
  width: 400px;
  border: 1px solid #555;
  padding: 10px;
  background: #333;
  margin: 10px auto;
}


div.toolbar {
  margin: 0px;
  padding: 1px;
  border-left: none;
  border-right: none;
/*  border-bottom: 1px solid #555;*/
}

div.toolbar ul {
  border: 0px solid red;
  display: inline;
  margin: 0;
  padding: 0;
}

div.toolbar li {
  border: 0px solid green;
  display: inline;
  margin: 5px;
}

div.toolbarleft {
  padding: 0px;
  float: left;
}

div.toolbarright {
  float: right;
}



div.ctr {
  text-align: center;
}

div.oidbox {
  padding: 10px;
  margin: 10px auto;
  width: 400px;
  background: #333;
  border: 1px solid #555;
}






th, td { 
  padding: 2px 4px;
}

th {
  font-weight: bold;
  background: #e5e5e5;
}



/*table.grid is mainly used for Freespoke (and chainline) result listing. defined a background color and :hover bg color 11/10/18 */
/*also used for form layout on editing/contrib pages.  Might not want row highlighting there???*/
table.grid {
  margin: 5px;
}

table.grid th, table.grid td {
  border: 1px solid gray;
  padding: 2px 4px;
}

table.grid th {
  font-weight: bold;
  background: #e5e5e5;
}


table.grid tr {
  background-color: #F5F5F5;  /* normal bg color for table rows */
}

table.grid tr:hover {
  background-color: #FFFF99;  /* :hover bg color for table rows */
}







.text-strikethru {
    position: relative;
    text-align: center;
}

.text-strikethru .line {
    height: 1px;
    background-color: #F1EEEA;
    width: 90%;
    margin-left: 5%;
}

.text-strikethru .text {
    display: inline-block;
    background-color: #FFFFFF;
    padding: 5px 10px;
    font-size: 14px;
    top: -16px;
    position: relative;
    color: #3D3D66;
}

















/* fbox = DIVs used for filter param boxes in freespoke and chainline tools*/
div.fbox {
  padding: 0px;
  border: 1px solid #000;
  border-radius: 4px;
  float: left;
  width: auto;
  margin: 3px;
  
    box-shadow: 2px 2px 4px #666;
}

div.fbox h3
{
  margin: 1px 5px 0px 5px;
}

div.fbox a 
{
  margin-right: 5px;  /* keep count numbers from jamming tight against the longest link in a list (or the only link) */
}

div.fbox p.sel
{
  margin: 5px;
  font-weight: bold;
}

div.fbox p
{
  margin: 5px;
}



div.sel
{
  background: #fff;
  border: 2px solid black;
}

table.fcol {
  float: left;
  width: auto;  /* was 10em */
  margin: 5px;   /* no right padding for single column OR rightmost of multi column */
  margin-top: 0;
}

div.fbox ul {
  margin: 0px;
}

div.fbox td {
  white-space:nowrap;
  /*border: 1px solid black;*/
}

div.fbox td.r {
  text-align:right;
}

br.clear {
  width: 100%;
  height: 1px;
  margin: 0 0 -1px;
  clear: both;
}

/* end of fbox stuff  */














/* TABS TABS TABS!  (freespoke, chainline, etc.)*/


#content {
	position: relative;   /*this applies to the parent container, and causes the tab positions to be relative to the top edge of the parent container*/
	/*width: 100%;*/
	/*height: 3em;*/
	/*width: 45em;*/     /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

ul#tab {
	margin: 0px;
	padding: 0px;
	position: absolute;  /*this allows the tabs to be shifted above the content div border instead of being inside it */
	top: -23px;          /* shifts the tab div above the top of the content div */
        left: 8px;
	width: 1050px;       /* (too small and the tabs wrap to more lines) */
}

ul#tab a {
	color: #333;
	text-decoration: none;  /* don't underline tabs on hover */
}

ul#tab li  {
	display: inline;
	list-style: none;
}




ul#tab li.current {
	/*text-decoration: overline;*/  /* testing */
}







/*every tab has a span! start with a level playing field...*/
ul#tab span {
	display: block;
	float: left;
	padding: 1px 10px 4px 10px;   /* top right bottom left.  padding INSIDE each tab. Changing top/bot will require adjusting negative top: value in ul#tab above... */
	margin: 1px 3px 0 0; /* second attribute adjusts horizontal spacing between neighboring tabs */
	font-family: tahoma, verdana, sans-serif;
	font-size: 1.1em;


	background: #E1E1E1;     /* background color of non-current primary tabs */
	border: 1px solid #000;
	border-bottom: none;
	height: 15px;    /*important for proper content div border overlap*/
	border-radius: 6px 6px 0px 0px  / 12px 12px 0px 0px;
}



/*tab being hovered over (same tall height and brighter background as selected tab, but without missing bottom border)*/
ul#tab span:hover {
	margin-top: 0;
	border-color: #000;
	
	background: #F5F5F5;    /* hover-over background color of non-current primary tabs */
	height: 16px;    /*important for proper content div border overlap*/
}



/*currently selected tab (taller, brighter background, no bottom border)*/
ul#tab li.current span {  /*ul#tab a, ul#tab span, ul#tab a.current {*/

	margin-top: 0px; /* allows selected tab to rise up higher than the rest */



	background: #F5F5F5;     /* background color of non-current primary tabs */

	border-bottom: none;
	height: 17px;    /*important for proper content div border overlap*/
}






/* subtab is the optional row of blue links beneath the actual tabs. 
they don't render with a border and are unaware which subtab is currently being displayed, unlike the primary which knows state. */


div#subtab {
  /*border: 1px solid orange;*/
  margin-top: -5px;
  color: #999;  /* this is overridden for A below; so it effectively only colors the pipes between subtab links. */
}

div#subtab a {
  color: #06C;
  font-size: 1.1em;
  
  color: #0d5cab;
  text-decoration: none;
}

div#subtab a:hover { text-decoration: underline; }


/*end of TABS css*/
 








ul {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;  /*was: 1em 0;*/
}

li {
  padding: .1em .5em .1em .5em;  /* affects log in, register links in header; probably other things */
  margin: 0;
}







/* ul.pages = result page numbering links for freespoke, chainline, cassette, etc.*/
ul.pages {
  text-align: center;
  list-style-type: none;
}

ul.pages a, ul.pages span {
  color: #000;
  border: 1px solid #000;
  padding: 2px 5px;
  text-decoration: none;
}

ul.pages li {
  display: inline;
  margin: 2px;
  padding: 0;
}

ul.pages li.current a, ul.pages li.current span {
  background: #ABC;
}

ul.pages a:hover {
  background: #FFF;    /* hover-over background color */
}
 
 
 





/* moved from freespoke.css on 11/20/20 for consistent use in chainline and cassette tools */
/*rim/hub detail page spec tables*/
.spectable {
  width: 500px;
  margin-bottom: 10px;
  border: 1px solid #000;
}

.spectable th {
  text-align: center;
  font-size: 1.2em;
  background-color: #c0c0c0;
}

/*rim/hub detail page spec table bulleted lists (currently multiple axle and drive types)*/
.spectable ul {
  margin: 0;
}

/*rim/hub detail page spec table bulleted lists (currently multiple axle and drive types)*/
.spectable li {
  list-style: inside disc;
}

.spechdrs {
  width: 35%;
  font-weight: bold;
  text-align: right;
  padding: 0;
  padding-right: 5px;
  font-size: 8pt;
  height: 20px;
  vertical-align: middle;
}

.specvals {
  width: 50%;
  text-align: left;
  padding: 0;
  padding-left: 5px;
  vertical-align: middle;
}

.specvouch {
  width: 15%;
  text-align: right;
  padding: 0;
  padding-right: 5px;
  vertical-align: middle;
}

.trgray {
  background-color: #ddd;
}







 
 /*tooltip added 10/27/18 based on this example https://www.w3schools.com/howto/howto_css_tooltip.asp */
 
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity .3s;
}

.tooltip .tooltiptext::after {
    content: ""; /* an empty box; we are simply using the border */
    position: absolute;
    top: 100%;   /*move 100% down (immediately below) the preceding object*/
    left: 50%;   /*move 50% across (midway) the preceding object*/
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; /*only the top border is opaque. since border width is 5px, it renders as an arrow*/
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}