/*
 *  all.css
 * CSS stylesheet for KnotInfo
 * Created 01/09/2019
 * Allison Moore
 *
 * note: some of this code is no longer active and
 * can be removed and will be cleaned up after the
 * end of phase two development and testing.
*/

/*
@import "mobile.css" only screen
and (max-width : 550px)
and (min-width : 40px);


/********************* Color reference chart *************
************************ comment ********* colour ********

background color          bg              #B2D1D1 
background color accent   bg2             #

accent color bright       acb             #FFEE77  #lemon
accent color light        acl             #FFF8CA   #white yellow

dark neutral              dn              #555555
medium neutral            mn              #bbbbbb
light neutral             ln              #dddddd

row other                 ro              #bbbbbb
*/  


* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  padding: 1px;
  margin: 0px;
}

a {
  color: black;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 25px;
  margin: 1px;
  background-color: #B2D1D1; /*bg*/
}

.wrapper {
  margin-right: auto;
  margin-left:  auto;
/*  max-width: 970px; */
  display: block;
}


/* Style the content */

/* new settings */
#content {
  background-color:  #dddddd; /*ln*/
  margin: 0px 1px;
  padding: 0px;
  display: block;
}

#content a {
    color: black;
}

#content a:visited {
    color: black;
}

#mytitle {
    font-size: 3em;
    text-align: center;
    margin-top: 0em;
}

#mytitle2 {
    font-size: 2em;
    text-align: center;
    margin-top: 0em;
}

/*
#dodesktop {
    background-color: #555555;/*dn*/
/*    float: right;
    margin-top: 0em;
    margin-right: 1em;
}

#dodesktop a {
    color: #FCD900; /*acb*/ 
/*} */

/* Top naviation bar */

#topnav {
    margin: 0;
}

#topnav tr {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #555555; /*dn*/
}

#topnav td {
    list-style-type: none;
    background-color: #555555; /*dn*/
    display: table-cell;
    /*height: 3.5em;*/
}

#topnav td a {
  color: white;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 1em 0;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

#topnav td:hover {
    background-color: #111;
}

/* code to handle nesting and citation color */
td #cite {
    color: #FFEE77; /*acb*/ 
}

#tablenav tr td:nth-child(1) {
    width: 7%;
}

#tablenav tr td:nth-child(2) {
    width: 12%;
}

#tablenav tr td:nth-child(3) {
    width: 11%;
}

#tablenav tr td:nth-child(4) {
    width: 9%;
}

#tablenav tr td:nth-child(5) {
    width: 46%;
}

#tablenav tr td:nth-child(5):hover {
    background-color: #555555; /*dn*/
}

#tablenav tr td:nth-child(6) {
    width: 15%;
}

/* Little search box */
#littlesearch {
  margin: 20px 20px;
  padding: 20px 20px;
}

#welcome {
  margin: 1px 1px;
  padding: 6px 5px;   
}

#singleknot {
  margin: 1px 1px;
  padding: 6px 5px;   
}

#singleknothdr {
    padding: 0.1em;
    margin: 0.1em;
}

#singleknotimg {
    vertical-align: middle;
}

#selectknots td {
  padding: 1px 5px;
  padding-right: 10px;
}

#category td {
    padding-left: 10px;
}

#category input {
    margin-right: 10px;
}

#selectinvariants a {
    padding-left: 5px;
}

#selectinvariants td {
    padding: 1px 10px;
    display: table-cell;
}

#advancedsearch {
  margin: 1px 1px;
  padding: 6px 5px;
}

/* div that contains the three search options */
#searchoptions {
    display: block;
    /*margin: 1px 1px;*/
    margin-left: 0px;
    padding: 6px 5px;
    clear: both;
    background-color: #dddddd; /*ln*/
/*    background-color: white; */
    text-align: center;
}

/* Style the button bars */

.modes {
  /*border: 1px solid #555555; /*dn*/
  overflow: hidden;
  background-color: #dddddd; /*ln*/
  color: white;
}

.modes p {
  display: block;
  background-color: #dddddd; /*ln*/
  color: white;
  text-align: center;
  padding: 5px 0px;
  text-decoration: none;
}

/*
div.csv {
  position: absolute;
  right: 28px;
  border: 0px;
}
*/

div.evenrow {
    background-color: #dddddd; /*ln*/
}

.result.evenrow {
    background-color: #dddddd; /*ln*/
}

#resultsheadline {
    background-color: #bbbbbb; /*ro*/
}

ul {
    display: flex;
    list-style: none;
}

li {
    display: flex;
    list-style: none;
}

div.searchitem {
    margin: 0;
    padding: 0;
}

div.opj {
    margin: 0;
    padding: 0;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  font-size: 18px;
  border: 1px solid #555555; /*dn*/
  cursor:pointer;
  /* two lines below make button rounded */
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.csvbtn { 
    float: right;
    text-align: center;
    font-size: 100%;
    background-color: #FFF8CA; /*acl*/
    border: 1px solid #555555; /*dn*/
   cursor:pointer; 
    margin: 0;
    padding: 7px 5px;
  /* two lines below make button rounded */
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.linkbtn { 
    float: left;
    text-align: center;
    font-size: 100%;
    background-color: #FFF8CA; /*acl*/
    border: 1px solid #555555; /*dn*/
    cursor:pointer;
    margin: 0;
    padding: 7px 5px;
  /* two lines below make button rounded */
  -webkit-border-radius: 4px;
  border-radius: 4px;
}


/* Style the clear all buttons */
.spansubmit {
    float: right;
    padding-right: 0.1em;
}


.clearbtn {
    float: right;
    text-align: center;
    font-size: 100%;
    background-color: #FFF8CA; /*acl*/
    border: 1px solid #555555; /*dn*/
    cursor:pointer;
    margin: 0;
    padding: 7px 5px;
    font-size: 18px;
  /* two lines below make button rounded */
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.clearbtn:focus {
    outline: none;
}

.clearbtnlabel {
    padding: 10px 20px;
    cursor: pointer;
}

.clearbtnlabel:hover {
    padding: 10px 20px;
    color: #bbbbbb; 
    cursor: pointer;
}

/*
 * this is the background color of the 'clear all'
 * button that flashes temporarily when the button
 * is clicked.
 * the function that causes the button to flash is
 * named flashBackgroundColor and is found in
 * the .js file.
 */

.clearbtnflashcolor {
    background-color: #FCD900;
}

/* Option: set a hover for the buttons */
/*
.oclearbtn:hover {
//  background-color: #222;
  color: white;
  cursor: pointer;
}

.emptybtn {
    float: right;
    text-align: center;
//    padding: 3px 3px;
//    margin: 5px 2px;
    text-decoration: none;
    font-size: 100%;
//    background-color: #FCD900; 
    border: 1px solid;
    //    cursor:pointer;
//    margin: 0;
    padding: 10px 5px;
//  font-size: 18px;
  /* two lines below make button rounded */

/*
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.emptybtn:focus {
    outline: none;
}

.emptybtnlabel {
    padding: 10px 20px;
}

/* Style the active class */
.active {
  background-color: #FFEE77; /*acb*/ 
  color: white;
  cursor: pointer;
  border: 1px solid #555555; /*dn*/
  cursor:pointer;
  margin: 0;
  padding: 7px 5px;
  font-size: 18px;
}

/* label for button */
label.btnlabel {
  cursor: pointer;
/* this code causes overlap
   and needs to be reviewed/updated.    
  z-index: 1;
  padding: 2em;
  margin: -2em;
*/
}    

/* Option: set a hover for the buttons */
/*
.btn:hover {
  background-color: #222;
  color: white;
  cursor: pointer;
}
*/
/* extend the active/clickable area */
/*
.btn a {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 4em;
    margin: -2em;
}
*/

/* Input */

textarea[type=text] {
    font-size: 100%;    
    padding:2px; /* increase this for bigger boxes */
    background-color: #FFF8CA; /*acl*/
    border: 1px solid #555555; /*dn*/
    cursor:pointer;
    /* two lines below make text input box rounded */
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text] {
    font-size: 100%;    
    padding:2px; /* increase this for bigger boxes */
    background-color: #FFF8CA; /*acl*/
    border: 1px solid #555555; /*dn*/
    cursor:pointer;
    /* two lines below make text input box rounded */
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    background-color: #FFF8CA; /*acl*/
    border: 1px solid #555555; /*dn*/
    cursor:pointer;
}

input[type=submit] {
    font-size: 125%;
    padding:5px 5px; 
    background: #FFF8CA; /*acl*/
    border: 1px solid #555555; /*dn*/
    cursor:pointer;
    /* two lines below make submit button rounded */
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

input[type=submit].btn {
    font-size: 125%;
    padding:5px 5px; 
    background: white;
    color: black;
    /*background:#ccc; */
    /*   border:0 none; */
    border: 10;
    cursor: pointer;
    /* two lines below make submit button rounded */
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

input[type=submit].btn.active {
    font-size: 125;
    padding:5px 5px; 
    background: #ffee77; /*acb*/
    color: black;
    border: 10;
    cursor: default;
    /* two lines below make submit button rounded */
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

.spansubmit {
    float: right;
    padding-right: 0.1em;
}

.categorysubmit {
    float: right;
    text-align: center;
    padding: 3px 3px;
    margin: 1px 2px;
    /*text-decoration: none;*/
    font-size: 90%;
    background-color: #FFF8CA; /*#FFE8CA; /*acl*/ 
    border: 0px;
  cursor:pointer; 
    /* two lines below make submit button rounded */
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-image:none;
}

select {
    font-size: 100%;    
    padding:2px; /* increase this for bigger boxes */  
    border:1px solid #ccc; 
}


/* Tables */
table {
  /* per chuck, 20190513 */
  table-layout: fixed;		      
  width: 100%;
  border-spacing: 0 2px;
  margin-top: 0em;
  font-size: 90%;
}

table#results {
   table-layout: auto;
}

table#results td{
	padding: 2px;
}

table#results tr td:nth-child(1) {
    width: 5em;
}

table#vect-polynomial {
    table-layout: fixed;
    column-span: 4;
}

.hiddentable {
    background-color: #eeeeee;
}

.tablesubmithidden {
    display: none;
}

.tablesubmit {
  
}

/* Text styling */

.headline {
  background-color: #888;
  color: white;
  margin: 5px;
  padding: 5px 5px;
}

.bold {
  color: #900;
  font-weight: bold;
}

.emph {
  color: #900;
  resize: 2em;
}

.privacy {
  text-align: right;
  font size: "2";
  color: #FFEE77; /*acb*/
}

.privacy a {
  color: #FFEE77; /*acb*/
}


#bigtitle, #smalltitle {
  color: #900;
  text-align: center;
  padding-bottom: .4em;
}

#bigtitle {
  font-size: 3em;
}

#smalltitle {
  margin-top: -.5em;
  font-size: 2.5em;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#sliderdiv {
    float: right;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color:  #FFE8CA; /*acl*/ 
}

input:focus + .slider {
    box-shadow: 0 0 1px  #FFE8CA; /*acl*/
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.slider.round {
    border-radius: 40px;
}

.slider.round:before {
    border-radius: 50%;
}

/*
:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*/

/* Mara additions for description pages*/



.mara {
 background-color: #fff8ca;  
 /* #ffffaa; (mara's color) */
 /* background-color: #dddddd; */
 font-family: Arial, Helvetica, sans-serif;
 margin: 20px;
 padding: 20px;
 line-height: 20px;
 max-width: 1200px; 
 display: block;
}

.mara h1 {
margin: 5px;
padding: 5px;
color: black
background-color: #a2d8b3;
}

.mara h2 {
margin: 5px;
padding: 5px;
color: black;
}

.mara h3 {
margin: 5px;
padding: 5px;
color: black;
size: 0.8em;
}

.mara p {
padding: 5px;
margin: 5px;
}

.mara br {
padding: 5 px;
margin: 5 px;
line-height: 20px;
}



/* some added stuff */

.mara2 {
 /* background-color:  #a1ced1; */
 background-color: #dddddd;
 font-family: Arial, Helvetica, sans-serif;
 margin: 20px;
 padding: 20px;
 line-height: 20px;
 max-width: 1200px; 
 display: block;
}

.mara2 h1 {
margin: 5px;
padding: 5px;
color: black
background-color: #a2d8b3;
}

.mara2 h2 {
margin: 5px;
padding: 5px;
color: black;
}

.mara2 h3 {
margin: 5px;
padding: 5px;
color: black;
size: 0.8em;
}

.mara2 ul {
padding: 0px;
margin: 0px;
text-indent: 20px;
}

.mara2 p {
padding: 5px;
margin: 5px;
}

.mara2 br {
padding: 5 px;
margin: 10 px;
line-height: 20px;
}




.mara3 {
 background-color: #333333;  
 /* #ffffaa; (mara's color) */
 /* background-color: #dddddd; */
 font-family: Arial, Helvetica, sans-serif;
 margin: 20px;
 padding: 20px;
 line-height: 20px;
 max-width: 1200px; 
 display: block;
}

.mara3 h1 {
margin: 5px;
padding: 5px;
color: black
background-color: #a2d8b3;
}

.mara3 h2 {
margin: 5px;
padding: 5px;
color: black;
}

.mar3 h3 {
margin: 5px;
padding: 5px;
color: black;
size: 0.8em;
}

.mara3 p {
padding: 5px;
margin: 5px;
}

.mara3 br {
padding: 5 px;
margin: 5 px;
line-height: 20px;
}