@charset "utf-8";
/* CSS Document
crummyButtonsStyles.css
11/14/19
updating the styles to integrate into technovice

*/

form fieldset img {
    float: right;
    width: 40%;
    margin-top: -10px;
}

main{
    min-height: 800px;
}

form fieldset{
    padding: 7px;
}

form fieldset input[type=number] {
    width: 60%;
}

form fieldset input#charSet{
    width: 100%;
}

div#controls{
    float: left;
    width: 30%;
/*    background-color: pink;*/
    margin-left: 0px;
}

div#codeOutput{
    float:right;
    width: 70%;
/*    background-color: yellow;*/
    padding-left: 10px;
/*    margin-left: -40px;*/
}

div.scroll table{
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

div.scroll{
    background-color: #FFF5BC;
    height: 300px;
    overflow: scroll;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: right;
/*    align-content: center;*/
}

aside.scroll {
    background-color: #FFF5BC;
    height: 300px;
    overflow: scroll;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: right;
}

aside.scroll table tr td {
    margin-top: 2px;
    font-size: 9px;
    margin-bottom: 2px;
/*    background-color: lawngreen;*/
}

form aside h5{
    font-size: 10px;
    text-align: center;
}

aside {
    float: left;
    margin-right: 10px;
    font-size: 10px;
}

form aside table#scodes{
    color: gray;
}

aside table tr td{
    padding-right: 4px;
}

.rjustify {
    text-align: right;
}

.reduced{
    font-size: 8px;
}

.monospaced{
    font-family: monospace;
}

.warning {
    font-style: normal;
    font-variant: normal;
}

div#output{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
/*    background-color: coral;*/
}

.new {
    background-color: #B8EBA9;
}

.used {
    background-color: #F4AABE;
}

table#pcodes td {
    padding-left: 20px;
}

h4#theoreticalStmt {
    width: 90%;
    color: #660;
}

h2#simHeading{
    text-align: center;
    background-color: #FFF5BC;
    margin-bottom: 2px;
}


@media (min-width: 600px) {

    /*red*/
    form label{
        font-size: 14px;
        margin-bottom: 2px;
    }
    div#codeOutput{
        padding-left: 15px;
    }
    
    aside.scroll table tr td {
        font-size: 13px;
    }
    
    form aside h5{
        font-size: 15px;
    }
        
    div#output{
        width: 50%;
/*        background-color: pink;*/
    }
}