main.css

/*
 Organization:
 - Global classes at top in alphabetical order
 - IDs in alphabetical order with sections indented (4 spaces)
*/

body {
    color:#bdbdbd;
    background:#efefef;
}

html {
    -webkit-tap-highlight-color:transparent;
}

input {
    height:20px;
    background:#eea;
    margin:5px 0px;
}

select {
    border:1px solid #ccc;
}

@font-face {
    font-family: "chalkduster";
    src: url(Chalkduster.ttf) format("truetype");
}

a:link, a:visited {
    text-decoration:none;
    color:#ccc;
}

.button {
    cursor:pointer;
    text-align:center;
}

.button:active {
    background-color:#A00;
    color:#fff;
}

.switch-off {
    cursor:pointer;
    width:100px;
    padding:5px 0px;
    text-align:center;
    margin-bottom:10px;
    border:2px outset #efefef;
}

.switch-on {
    cursor:pointer;
    width:100px;
    padding:5px 0px;
    text-align:center;
    margin-bottom:10px;
    border:2px inset #efefef;
    background:#eee;
    color:#999;
}

#add-another {
    position:absolute;
    top:120px;
    left:147px;
}

#button-add {
    position:absolute;
    top:-26px;
    left:1px;
}

#button-delete {
    position:absolute;
    top:-26px;
    right:1px;
}

#button-edit {
    position:absolute;
    top:-26px;
    left:29px;
}

#button-exim {
    position:absolute;
    bottom:0px;
    left:1px;
}

#button-next {
    position:absolute;
    top:107px;
    right:13px;
    width:50px;
    height:80px;
    background:url('img/next.png') 6px 25px no-repeat;   
}

#button-prev {
    position:absolute;
    top:107px;
    left:13px;
    width:50px;
    height:80px;
    background:url('img/prev.png') 6px 25px no-repeat;
}

#button-save {
    position:absolute;
    bottom:0px;
    right:39px;
    border:1px solid #bdbdbd;
    width:40px;
}

#button-shuffle {
    width:32px;
    height:32px;
    background:url('buttons.png') -8px -8px;
}

#button-settings {
    width:24px;
}

#bottom-panel {
    position:absolute;
    bottom:3px;
    left:11px;
    width:450px;
    height:51px;
}

    #bottom-panel div {
        width:24%;
        float:left;
        padding:14px 0px;
        background-color:#ddd;
        border-bottom:1px solid #000;
        border-left:1px solid #000;
        border-top:1px solid #000;
    }
    
    #bottom-panel .last {
        border-right:1px solid #000;
    }

#button-reset {
    position:absolute;
    bottom:5px;
    right:5px;
}

#card-container {
    cursor:pointer;
    overflow:auto;
    font-size:30px;
    text-align:center;
    color:#000;
    font-family:'chalkduster', sans-serif;
}

#card-options {
    position:absolute;
    top:21px;
    left:9px;
    width:151px;
    height:21px;
}

#conf {
    position:absolute;
    top:54px;
    left:27px;
    width:400px;
}

#container {
    position:relative;
    width:460px;
    height:280px;
    margin:auto;
    border:1px outset;
    background:url('background.png') repeat-x;
}

#credits {
    position:absolute;
    bottom:-10px;
    left:0px;
    font-size:9px;
    color:#ccc;
}

#deck-add {
    position:absolute;
    top:25px;
    left:6px;
}

#deck-container {
    position:absolute;
    top:72px;
    left:16px;
    width:200px;
    height:160px;
}

    #deck-container .button {
        margin-right:18px;
    }

#deck-choices {
    position:absolute;
    top:-2px;
    left:40px;
    width:95%;
}

#deck-form {
    position:absolute;
    top:0px;
    left:40px;
}

    #deck-form input {
        height:14px;
        background:#fff;
        margin:0px;
        border:1px dashed #ccc;
    }

#deck-form-options {
    position:absolute;
    top:32px;
    left:0px;    
}

#deck-options {
    position:absolute;
    top:32px;
    left:0px;
}

#exim-container {
    position:absolute;
    bottom:0px;
    left:0px;
}

#import-cancel {
    float:right;
}

#import-file {
    width:204px;
}

#label-view {
    position:absolute;
    top:75px;
    left:36px;
}

#main {
    width:100%;
    height:37%;
    padding:35px 0px;
}

#main-alt {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:37%;
    padding:35px 0px;
    color:#5b78f1;
}

#main-container {
    position:absolute;
    top:91px;
    left:62px;
    margin:auto;
    width:334px;
    height:116px;
    font-size:12px;
}

    #main-container .button {
        padding:5px;
        border-left:1px solid #000;
        border-top:1px solid #000;
        border-right:1px solid #000;
    }
    
    #main-container .last {
        border-left:0px solid #000;
    }
    
#modal-container {
    position:absolute;
    top:5px;
    left:5px;
    z-index:100;
    color:#000;
    width:450px;
    height:270px;
    border:1px outset;
    background-color:rgba(255,255,255,.98);
    font-size:14px;
    color:#bdbdbd;
}

    #modal-container div.button {
        border:1px solid #bdbdbd;
        padding:0px 5px;
    }

#modal-container-close {
    position:absolute;
    top:2px;
    right:2px;
    width:24px;
    height:24px;
    background-image:url('close.png');
}

#meter {
    position:absolute;
    bottom:2px;
    right:2px;
    font-size:12px;
}

#msg {
    background-color:#eee;
    text-align:center;
    cursor:pointer;
    display:block;
}

#msg-container {
    position:absolute;
    top:56px;
    left:56px;
    width:350px;
}

    #msg-container button {
        float:right;
    }

#options {
    position:absolute;
    top:8px;
    left:105px;
    width:352px;
    padding-bottom:5px;
}
    #options div {
        font-size:14px;
        padding:3px;
        margin-left:10px;
        float:right;
    }

#options-container.on {
    background-color:#eee;
}

#options-container.off {
    background-color:#fff;
}

#option-container {
    position:absolute;
    top:26px;
    left:1px;
    width:448px;
    height:234px;
    background:#fff;
}

    #option-container div{
        float:left;
    }

#option-container-left {
    position:absolute;
    top:1px;
    left:1px;
    width:224px;
    height:100%;
}

#option-container-right {
    position:absolute;
    top:1px;
    left:224px;
    width:224px;
    height:100%;
    border-left:1px dashed #efefef;
}

#option-crud {
    position:absolute;
    top:21px;
    left:36px;
}

    #option-crud div {
        cursor:pointer;
        float:left;
        margin-right:10px;
    }

#option-buttons {
    position:absolute;
    bottom:38px;
    left:52px;
    width:115px;
    height:100px;
}

/*#option-animation {
    position:absolute;
    bottom:0px;
    left:0px;
}

#option-reverse {
    position:absolute;
    bottom:0px;
    right:0px;
}*/

#phrase-form {
    position:absolute;
    top:96px;
    left:119px;
    width:230px;
}

#reset {
    position:absolute;
    top:2px;
    right:-53px;
    font-size:10px;
    border:1px solid #000;
    padding:3px;
}

#version {
    position:absolute;
    bottom:-10px;
    right:0px;
    font-size:9px;
    color:#ccc;
}