/*
This file should only contain things specific to Freespoke and should be loaded AFTER kstoerz.css

CSS that could be universally useful on the site should go in kstoerz.css
*/





div#header {
  /*width: 1070px;
  height: 62px;
  margin-left: auto;
  margin-right: auto;*/
  background-image: url('freespoke_logo.png');
  background-repeat: no-repeat;
}



div#content {
  margin-top: 23px    /* (outside of border) 23px on the top leaves the right amount of room for the tab bar */
  padding-top: 5px;   /* (inside of border) 25 lately!!   20px or so on top leaves enough room for the secondary tab links (changed to 5px 11/1/18 when subtabs were changed to div instead of ul */
}





/* used in edithub.php, etc. for warnings on form submit validation fail */
div.validatewarning {
  border: 1px solid black;
  background: #ffbf00;
  padding: 3px;
  margin: 5px;
  text-align: left;
  width: 500px;
}

div.validatewarning h3, div.validatewarning p {
  margin: 3px;
}



/*  https://www.designcise.com/web/tutorial/how-to-force-html-elements-to-stay-on-the-same-line  */



/* cell width 1 = narrower text inputs used in full calc form*/
input.cw1
{
  width: 33px;
}

/* cell width 2 = wider text inputs used in full calc form*/
input.cw2
{
  width: 78px;
}











/*some input field widths to play with in the editrim and edithub forms...*/
input.w1, select.w1 { width: 25px; }
input.w2, select.w2 { width: 50px; }
input.w3, select.w3 { width: 75px; }
input.w4, select.w4 { width: 100px; }
input.w5, select.w5 { width: 150px; }
input.w6, select.w6 { width: 200px; }
input.w7, select.w7 { width: 250px; }
input.w8, select.w8 { width: 300px; }

select.rimhubselect { width: 200px; max-width: 200px; }

/*for testing and fixing layout...*/
/*td.fcif { border: 1px solid gray; }*/

/* let the text boxes fit into the table as tightly as we can */
td.fcif input { margin: 0; }

td.inputmargins { margin: 0; padding: 2px 0; text-align: right;}

/*full calc input form left margin (to enforce aesthetic spacing between L/R input box pairs)*/
td.fcif input.fciflm { margin-left: 4px; }

/*full calc input form center text in input boxes*/
/*td.fcif input { text-align: center; }*/









/* only used in techinfo thread engagement article, best I can tell from a quick skim with height set to 100px */
hr {
  border: 0;
  width: 80%;
  color: #000;
  background-color: #000;
  height: 1px;
}









td, th {
  vertical-align: top;
}

td.right, th.right {
  text-align: right;
}



table.inv {
  padding: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;

  margin: 0;
  spacing: 0;
}

table.inv td {
  vertical-align: top;
}



table.input {
  width: 730px;
}

table.input th {
  width: 30%;
  text-align: right;
  padding: 5px;
  font-weight: bold;
}

table.input td {
  text-align: left;
  padding: 5px;
}


table.fullwidthcontent {
  width: 730px;
}

table.fullwidthsidebar {
  width: 115px;
}

table.grid {
  margin: 0px;
  border: 1px solid gray;
  border-spacing: 2px;
  border-collapse: collapse;
}

table.grid th {
  padding: 2px 4px;
  border: 1px solid gray;
  font-weight: bold;
  background: #e5e5e5;
}

table.grid th.sortasc
{
  background-image: url('sort_asc_16.png');
  background-repeat: no-repeat;
  padding-left: 20px;  /* width of the image plus a little extra padding */  
}

table.grid th.sortdesc
{
  background-image: url('sort_desc_16.png');
  background-repeat: no-repeat;
  padding-left: 20px;  /* width of the image plus a little extra padding */  
}

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

/*-  
table.grid tr:nth-child(odd) {
    background-color: #e6e6e6;
}
*/

tr.footer td {
  background-color: #e5e5e5;

}










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

li {
  padding: .1em .5em .1em .5em;
  margin: 0;
}



/* ul.pages = result page numbering */
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 */
}



/*contrib page big boxes*/
ul.contribbox
{
  width: 250px;
}

ul.contribbox li 
{
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
}














div.error1 {
  border: 1px solid black; 
  background-image:url(error_stripes.png); 
  background-repeat: repeat;
  padding:5px; 
  margin:10px;
}

div.error2 {
  border: 1px solid black; 
  background-image:url(error_icon.png); 
  background-repeat: no-repeat; 
  min-height: 19px; 
  background-color:#eeeeee; 
  padding: 4px 3px 1px 26px; 
  font-weight: bold;
}




div.error {
  background-image: url('important.png');
  background-repeat: no-repeat;
  border: 2px dashed yellow;
  min-height: 22px;
  padding: 3px 3px 3px 22px;
  margin: 8px;
}


div.benchitem
{
  border: 1px solid black; 
  border-radius: 5px;
  padding: 5px; 
  margin: 5px;
}

div.benchthumb
{
  float: left;
  width: 200px;

  padding-right: 5px;
}

div.benchdata
{
  padding: 0px;
  max-width: 300px;
  float:left;
/*  border: 1px solid black;*/
}

div.benchdata h2
{
  margin-top: 0;
}
  

div.partnotesbox
{
  border: 1px solid black;
  margin-top: 10px;
  padding: 5px;
}

div.partmodnotesbox
{
  border: 1px solid black;
  margin-top: 10px;
  padding: 5px;
}







/*    moved to kstoerz.css on 11/20/20 for consistent use in chainline and cass 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;
}
*/




.calcresulttable {
  width: 325px;
  margin-bottom: 0px;
  border: 1px solid #000;
}

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

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

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









.rightalign {
  text-align: right;
}

.leftalign {
  text-align: left;
}








/*links that should be emphasized strongly by appearing to be a bit like a button. Mainly intended for "add to bench" links. 11/14/18*/
/*Best practice is to nest the linkbutton A tag inside a tight class P tag as follows:*/
/*<p class="tight"><a class="linkbutton" href="somewhere">label</a></p>*/
a.linkbutton
{
  /*display: block;*/  /*this fixes the weird rendering of a linkbutton not nested inside a p/etc tag, but makes it fill to the width of the container. */
  /*margin-top: 10px;*/  /*margins (esp top/bottom) don't work as expected unless this is a block element, but that has other bad side-effects.*/
  color: #000; 
  background-color: #eee; /*#039be5;*/ 
  border: 1px solid #666;
  border-radius: 2px; 
  padding: 2px 8px; 
  /*box-shadow:0 2px 5px 0 rgba(0,0,0,.26);*/
}

a.linkbutton:hover
{
  border-color: #000;
  background-color: #ddd; /*#0388ca;*/
  text-decoration: none;
  
}a.linkbutton:active
{
  background-color: #d4d4d4; /*#0277bd; */
  text-decoration: none;
}

p.linkbutton {margin: 0px 0px 10px 0px; padding: 0;}

p.tight, table.tight td {margin: 0; padding: 0;}


/*buttonrow is a table used to split buttons at top of detail and filter pages into left/right sides of page.
It needs to span the full width to not collapse to the width of contents. margin and padding zeroed on data cells 
to make them take up as little space as possible.  added 11/24/18*/
table.buttonrow {
  width: 100%;
}
table.buttonrow td {
  margin: 0;
  padding: 0;
}