/*Created by Karthik Natarajan and Pat Virtue at Carnegie Mellon University.*/

/*This stylesheet is used for the index.html page for the likelihood weighted sampling demo. This is imported in
the header of the web application. All of the positioning should be relative to allow for proper view when resizing.
On top of that the min-widths are used to keep the boxes a specific size even when the browser window changes size.
These can be changed if necessary. Tried to actually take all of the colors from a color palette to see what would
work.*/

/*Default style for the body, mostly just to make sure font shows up.*/
body {
    font: 14px helvetica neue, helvetica, arial, sans-serif;
}

/*Style for the main view container. Mostly positional stuff and min-width keeps
it from looking bad when the page is resized.*/
#container {
    height: 100%;
    width: 100%;
    min-width: 1250px;
    min-height: 610px;
    left: 0;
}

/*This is the container for the graph made using cytoscape.js. Again mostly positional stuff
make sure to keep the positioning relative as it will mess up positioning if it is changed to
absolute positioning.*/
#cy {
    height: 60%;
    width: 20%;
    position: relative;
    left: 14%;
    top: 0;
}

/*This is the style used with the probability tables on the page.
This style is mostly related to positioning and the color of the border.*/
.probTable {
    border-collapse: collapse;
    position: relative;
    top: 10%;
}

/*These next 3 are purely used to position different probability tables to make the page look better.
The !important is necessary to override some default style stuff. */
#PC {
    left: 1% !important;
}

#PRC {
    top: -4% !important;
    left: 1% !important;
}

#PSC {
    top: -4% !important;
    left: -0.1% !important;
    width: 15%;
    min-width: 189.5px;
    text-align: center;
}

/*Helps center the probability table.*/
#b {
    display: inline-block;
}

#PWSR {
    width: 15%;
    min-width: 189.5px;
    text-align: center;
}

/*Helps center the probability table.*/
#d {
    display: inline-block;
}

/*This style element affects all of the probEntry elements inside a probContainer using the regexp shown in the
first line. This also affects border and padding. */
.probContainer td[class*='probEntry'] {
    border: solid 1px black;
    padding: 2px 15px 2px 15px;
}

/*This is used to center all of the headers used on the page.*/
h3 {
    text-align: center;
}

/*Font and border used on the code snippet box.*/
#code {
    font: 16px Inconsolata;
    border: 2px solid #FF851B;
}

/*Positioning for the code snippet box.*/
#codePlusHeader {
    position: relative;
    width: 38.34%;
    left: 57%;
    bottom: 60%;
    min-width: 475px;
}

/*Positioning the abridged data table on the page.*/
#dataTableCont {
    position: relative;
    width: 45%;
    left: 52%;
    bottom: 55%;
}

/*Positioning the local data table on the page.*/
#localTableCont {
    position: relative;
    left: 33.5%;
    width: 16%;
    top: -88%;
}

/*Adds some extra space between the lines of code.*/
.codeline {
    margin: 1px;
}

/*This is the full style for all of the code buttons. The float left property works
in all of the browsers except for Safari and this is a bug that might need to be fixed.*/
.codeButton {
    color: #494949 !important;
    background: #ffffff;
    padding: 7px;
    border-bottom: 1px solid #FF851B !important;
    border-right: 1px solid #FF851B !important;
    border-left: 1px solid #FF851B !important;
    border-top: none;
    display: block;
    float: left;
}

/*These set up all of the widths and the borders for the code buttons.*/
#thousandButton {
    border-right: 2px solid #FF851B !important;
    min-width: 103.270px;
    width: 25.575%;
}

#hundredButton {
    min-width: 101.65px;
    width: 25.1%;
}

#resetButton {
    min-width: 49.04px;
    width: 12.11%
}

#stopButton {
    min-width: 41.3px;
    width: 10.2%;
}

#contButton {
    min-width: 67.23px;
    width: 16.6%;
}

#stepButton {
    border-left: 2px solid #FF851B !important;
    width: 10.42%;
    min-width: 42.2px;
}

/*This sets up the hover effect that you can see when you place the cursor over the button.*/
.codeButton:hover {
    color: #ffffff !important;
    background: #FF851B;
    border-color: #FF851B !important;
    transition: all 0.4s ease 0s;
}

/*Div that contains all of the buttons underneath the code snippet.*/
#buttonContainer {
    float: left;
    min-width: 405px;
    width: 100%;
    display: block;
}

/*Font and border styling for the abridged data table.*/
#dataTable {
    color: #333; /* Lighten up font color */
    font-family: Helvetica, Arial, sans-serif; /* Nicer font */
    width: 600px;
    border: 1px solid #CCC;
    border-collapse: collapse;
    border-spacing: 0;
}

/*Font and border styling for the abridged data table.*/
#localTable {
    color: #333; /* Lighten up font color */
    font-family: Helvetica, Arial, sans-serif; /* Nicer font */
    width: 200px;
    border: 1px solid #CCC;
    border-collapse: collapse;
    border-spacing: 0;
}

/*Font and border styling and size modification for the abridged data table's head.*/
.dataTableHead {
    height: 20px;
    background: #F3F3F3;
    font-weight: bold;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    border-collapse: collapse;
}

/*Font and border styling and size modification for the abridged data table's entries.*/
.dataTableEntry {
    height: 15px;
    text-align: center;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    border-collapse: collapse;
}

/*This is used to give the grey shading over the elements in any of the tables on the page.*/
.dataTableRow:hover .dataTableEntry {
    background: #686868;
    color: white;
}

/*These are used for the animations of moving the page down when submitting the evidence variable changes.*/
@-webkit-keyframes invalid{
    50% { background-color: #606060; }
}
@-moz-keyframes invalid {
    50% { background-color: #606060; }
}
@-o-keyframes invalid {
    50% { background-color: #606060; }
}
@keyframes invalid {
    50%  { background-color: #606060; }
}

/*This is the actual animation class using the invalid keyframe made above. Simple CSS animation uses
the latest version of CSS.*/
.blink {
    -webkit-animation: invalid 0.5s 1; /* Safari 4+ */
    -moz-animation:    invalid 0.5s 1; /* Fx 5+ */
    -o-animation:      invalid 0.5s 1; /* Opera 12+ */
    animation:         invalid 0.5s 1; /* IE 10+ */
}

/*makes all of the elements in the local table a specific width*/
#localTable td[id *= 'local'] {
    width: 80px;
}

/*This is used to position the form container which includes the evidence variable option form and the submit button.*/
#condFormContainer {
    height: 48%;
    min-height: 292px;
    min-width: 1247px;
}

/*This reduces the space between each element of the form. Purely aesthetic changes.*/
#condFormContainer ul.items {
    margin: 0;
    border-top: none;
}

/*This is all of the style for the form rows including border, padding and size.*/
.condItem {
    list-style: none;
    height: 15px;
    width: 150px;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    border-collapse: collapse;
    padding: -40em !important;
}

/*This is the hover effect seen on the conditional form table to help students understand what they are picking.*/
#condFormContainer ul.items li:hover {
    background: #686868;
    color: white;
}

/*All of the style for the formTable that as at the top of the page. */
#formTable {
    color: #333; /* Lighten up font color */
    font-family: Helvetica, Arial, sans-serif; /* Nicer font */
    width: 400px;
    position: relative;
    left: 100px;
    border: 1px solid #CCC;
    border-collapse: collapse;
    border-spacing: 0;
}

/*This is the style used for the container that include the form
and the original probability tables.*/
#formContainer {
    float: left;
    width: 44%;
    height: 100%;
    min-height: 152px;
}

/*This is the style for the original probability tables div. Mostly for positioning.*/
#originalTables {
    float: left;
    width: 55%;
    min-width: 687px;
}

/*All of the style for the submit button that as at the top of the page. */
.submitButton {
    color: #494949;
    background: #ffffff;
    border: 1px solid #494949;
    position: relative;
    left: 100px;
    top: 10px;
    width: 400px;
}

/*Turns the submit button grey when you hover over it.*/
.submitButton:hover {
    color: #ffffff !important;
    background: #CCC;
    border-color: #CCC !important;
    transition: all 0.4s ease 0s;
}

/*This is used to style the extra table that appears at the bottom of the page.*/
#extraInfoTable {
    color: #333; /* Lighten up font color */
    font-family: Helvetica, Arial, sans-serif; /* Nicer font */
    width: 100%;
    min-width: 1246.67px;
    border: 1px solid #CCC;
    border-collapse: collapse;
    border-spacing: 0;
}

/*This is used to position the extra table.*/
#extraInfoContainer {
    position: relative;
    top: 5%;
}

/*These next 4 are used to position the probability tables in favorable positions.*/
#probC {
    float: left;
    padding-right: 5%;
}

#probSC {
    float: left;
    padding-right: 5%;
}

#probRC {
    float: left;
    padding-right: 5%;
}

#probWSR {
    float: left;
}

#originalHead {
    margin-top: 0;
}

/*Standard style to set the HTML page, and the body's height to be the full page size.*/
html,body {
    height: 100%;
}