* { padding:0px; margin:0px; font-family:Tahoma, Verdana; }

html { height:100%; }
body { height:100%;
    padding-left:10px;
    color:#2A2A2A;
    overflow-y:scroll;
    /*
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    */
}

a { color:#727272; text-decoration:underline; }
a:hover { text-decoration:none; }

#maintbl {
    padding:35px;
    padding-right:5px;
    padding-top:15px;
    
    margin-right:10px;

    background-color:white;
    border:1px silver solid;
    border-top:0px;
    border-bottom:3px #737373 solid;

    -webkit-border-bottom-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-bottomleft:8px;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
}


#linevert {
    width:16px;
    border-left:1px gray dotted;
}

.selinput {
    height:30px; width:100%; padding:0px; margin:0px;

    padding-top:4px;
    padding-bottom:4px;
    padding-left:4px;

    margin-top:2px;
    margin-bottom:2px;

    border:1px solid silver;
    background-color:#F0F0F0;
}

.txtinput, .txtinput_acc, .minput_3, .minput_4 , .minput_5 {
    width:100%;
    height:16px;

    padding:0px;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:4px;

    margin:-2px;
    margin-top:2px;
    margin-bottom:2px;
    margin-left:-6px;

    border:1px solid silver;
    background-color:#F0F0F0;
    -webkit-appearance: none;
}

.selinput, .txtinput, .txtinput_acc, .minput_3, .minput_4, .minput_5 {
    border-left:3px silver solid;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    -webkit-appearance: none;
}

.txtinput_acc { border-left:3px #57B62D solid; }

.txtinput:focus, .txtinput_acc:focus, .minput_3:focus, .minput_4:focus, .minput_5:focus {
    background-color:white;
}

/* maare-editori */
.minput_1, .minput_2 {
    /*width:100%;*/
    padding:0px; margin:-2px;

    padding-top:4px;
    padding-bottom:4px;
    padding-left:4px;

    margin-top:2px;
    margin-bottom:2px;
    margin-left:-5px;

    border:1px solid white;
    background-color:white;
    -webkit-appearance: none;
}

.btninput, .btninput_acc, .btninput_red, .btninput_or, .btninput_bl, .btninput_bright {
    padding:6px;
    margin-top:12px;
    margin-left:3px;
    
    background-color:#ECECEC;
    border:1px #C0C0C0 solid;
    color:#2A2A2A;

    -webkit-box-shadow:-1px -1px 1px #9C9C9C inset;
    -moz-box-shadow:-1px -1px 1px #9C9C9C inset;
    box-shadow:-1px -1px 1px #9C9C9C inset;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    -webkit-appearance: none;
    cursor:pointer;
}

.btninput, .btninput_bright { border-left:4px #737373 solid; }
.btninput_acc { border-left:4px #57B62D solid; }
.btninput_red { border-left:4px #AE2222 solid; }
.btninput_or { border-left:4px #E68B2C solid; }
.btninput_bl { border-left:4px #3E62C4 solid; }
.btninput_bright { background-color:#F9F9F9; }

#plus {
    padding:2px;
    padding-left:10px;
    padding-right:10px;
    margin-top:6px;

    background-color:#ECECEC;
    border:1px #C0C0C0 solid;
    border-left:4px #57B62D solid;
    color:#2A2A2A;
    font-size:18px;
    line-height:20px;
    font-weight:bold;

    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;

    -webkit-appearance: none;
    cursor:pointer;
}

.btninput:hover, .btninput_acc:hover, .btninput_red:hover, .btninput_or:hover, .btninput_bl:hover, .btninput_bright:hover, #plus:hover { background-color:white; }
/*
#3E62C4 sin.
#E68B2C or.
*/

.cbox {
    padding:0px; margin:0px; border:0px;
    position:relative; top:1px;
    outline:0px;
    opacity:0.4;
}
.cbox:checked { opacity:1.0; }

label { text-decoration:none; }
label:hover { text-decoration:underline; }

#mat_1, #mat_2, #mat_3, #mat_4, #mat_5, #mat_6, #mat_7, #mat_8, #mat_9, #mat_10 {
    padding:10px;
    padding-bottom:20px;
    margin-bottom:14px;
    border-top:2px #737373 solid;
}

.delete, .close {
    width:16px; height:16px;
    border:0px;
    background:url(../img/delete.png) no-repeat center;

    cursor:pointer;
    -webkit-appearance: none;
}

.close {
    width:24px; height:24px;
    margin-bottom:5px;
    border:1px silver solid;
    background:url(../img/close.png) no-repeat center;

    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}
.close:hover { border:1px #2A2A2A solid; }

#kuva, #avaa {
    width:28px; height:28px;
    margin-bottom:5px;
    border:1px silver solid;
    background:url(../img/kuva.png) no-repeat center;

    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;

    cursor:pointer;
    -webkit-appearance: none;
}

#kuva { background:url(../img/kuva.png) no-repeat center; }
#avaa { background:url(../img/kansio.png) no-repeat center; }

#kuva:hover, #avaa:hover { border:1px #2A2A2A solid; }

.delete {
    position:absolute;
    float:right;
    margin-left:292px;
    margin-top:11px;
    background:url(../img/delete.png) no-repeat center;
}
.remove_line {
    width:24px; height:24px;
    position:relative; top:3px;
    margin-left:5px;

    background:white url(../img/delete.png) no-repeat center;
    border:1px silver solid;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    cursor:pointer;
}

.add_opt, .del_opt {
    width:24px; height:24px;
    padding:0px;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:4px;

    margin:-2px;
    margin-top:4px;
    margin-bottom:2px;
    margin-left:5px;
    
    position:relative;
    top:5px;

    border:1px silver solid;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    cursor:pointer;
}

.add_opt { background:white url(../img/plus.png) no-repeat center; }
.del_opt { background:white url(../img/close.png) no-repeat center; }

.plus, #mopokaava, #kaavaeditori, #kentat_L2 {
    height:16px;
    line-height:14px;
    vertical-align:middle;
    margin-top:10px;
    margin-bottom:10px;
    
    border:0;
    padding-left:22px;
    cursor:pointer;
}

.plus { background:white url(../img/plus.png) no-repeat left; }
#mopokaava { background:white url(../img/favicon.png) no-repeat left; }
#kaavaeditori { background:white url(../img/kolmioviivain.png) no-repeat left; }
#kentat_L2 { background:white url(../img/kentat.png) no-repeat left; float:right; }

.plus:hover, #mopokaava:hover, #kaavaeditori:hover, #kentat_L2:hover { text-decoration:underline; }
.remove_line:hover { background:#F0F0F0 url(../img/delete.png) no-repeat center; }

h1 {
    padding:0px; margin:0px;
    margin-bottom:5px;
    color:#727272;
}

h2 {
    padding:0px; margin:0px;
    margin-top:4px;
    margin-bottom:4px;
    color:#AAAA99;
    font-size:20px;
}
h3 {
    padding:0px; margin:0px;
    margin-top:4px;
    margin-bottom:5px;
}
h4 {
    font-size:112px;
    font-weight:normal;
    letter-spacing:5px;
    color:#AAAA99;
    text-align:center;
}
h5 {
    font-size:22px;
    font-weight:normal;
    /* font-style:italic; */
    color:#525252;
    text-align:center;
    margin-bottom:8px;
}

h6 {
    font-size:20px;
    font-weight:normal;

    padding:0px; margin:0px;
    margin-top:4px;
    margin-bottom:5px;    
}

small { color:gray; }

.hinta, .valisumma {
    /* , #yhteensa */
    padding-top:3px;
    padding-bottom:2px;
    border-bottom:1px gray dotted;
}

#yhteensa { font-weight:bold; }

.hinta { display:none; }

.valisumma {
    padding-top:4px;
    padding-bottom:5px;
    color:#2A2A2A;
    font-weight:bold;
}

.txtpadd { padding-top:4px; }

td {
    text-align:left;
    vertical-align:top;
}

.nowrp {
    white-space:nowrap;
    text-overflow:ellipsis;
    padding-top:5px;
    padding-bottom:-5px;
}

#help {
    height:1px;
    text-align:center;
    font-weight:bold;
    font-size:11px;

    background:url("../img/help.png") no-repeat top;
    cursor:pointer;
    display:none;
}

#help_title {
    text-align:center;
    margin-top:2px;
    font-weight:bold;
    font-size:12px;

    display:none;
    cursor:pointer;
}

/* hintaerittely & yksikkö */
.e { width:220px; }
.h, .h_valisumma { width:90px; }
.x { width:40px; }
.ala {
    padding:4px;
    padding-left:0px;
    font-weight:bold;
    color:#727272;
}

.tip {
    position:absolute;
    left:50%;
    
    background:#252525;
    color:#F0F0DD;
    border:0;
    padding:12px;
    padding-top:10px;
    
    z-index:1;
    display:none;
}
.tip .arr_r {
    position:absolute;
    margin-top:-25px;
    margin-left:340px;
}
.tip .arr_l {
    position:absolute;
    margin-top:-29px;
    margin-left:-10px;
}

#tip_1 {
    width:350px;
    margin-left:-175px;
    top:40px;
}

#tip_2 { margin-left:-360px; top:35px; }
#tip_3 { left:6px; top:62px; }

#kaavatippi { top:125px; margin-left:-60px; text-align:left; }

#dbg {
    position:fixed;
    right:16px;
    top:16px;
    font-size:18px;
    padding:10px;

    white-space:nowrap;
    text-overflow:ellipsis;
}
#dbg span {
    background:white;
    padding:10px;
    padding-left:15px;
    padding-right:20px;
    
    border:1px silver solid;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

#mnu {
    position:absolute;
    left:4px;
    top:4px;
    padding-top:5px;
    padding-right:30px;
    padding-left:48px;
    padding-bottom:28px;

    display:none;
    background:#F9F9F9;
    border:1px silver solid;
    border-right:1px #727272 solid;
    border-bottom:1px #727272 solid;

    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    
    z-index:1;
}

#mnu_mat {
    position:absolute;
    right:50%;
    margin-right:-325px;

    padding:16px;
    padding-top:8px;
    padding-right:10px;
    padding-bottom:30px;

    display:none;
    background:white; /*#F9F9F9*/
    border:1px silver solid;
    border-right:1px #727272 solid;
    border-bottom:1px #727272 solid;

    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    
    z-index:1;
}

#navibar { position:absolute; }

#navi {
    background:white;
    padding-bottom:12px;
    padding-left:50px;
    padding-right:50px;

    position:fixed;
    left:50%;
    margin-left:-130px;

    -webkit-border-bottom-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-bottomleft:8px;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
}

th {
    padding-top:4px;
    padding-bottom:10px;

    text-align:left;
    font-size:12px;
    color:#727272;
    border-bottom:1px silver dotted;
}
.row {
    padding-top:2px;
    padding-bottom:2px;
    border-bottom:1px silver solid;
}

#devlog, #expired, #tallennetut {
    position:fixed;
    left:50%;
    top:50%;

    padding:40px;
    padding-top:25px;
    padding-right:30px;

    border:1px silver solid;
    border-left:6px #727272 solid; /* #57B62D */
    background:white;

    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;

    -moz-box-shadow:2px 2px 4px #727272;
    -webkit-box-shadow:2px 2px 4px #727272;
    box-shadow:2px 2px 4px #727272;
    
    display:none;
}

#devlog {
    width:690px;
    height:400px;
    margin-left:-380px;
    margin-top:-240px;
    display:none;
}
#expired, #tallennetut {
    margin-left:-280px;
    margin-top:-240px;
    width:500px;
    height:260px;
}

#devlog_txt {
    width:600px; height:360px;
    overflow-y:scroll;
}

#loginmnu {
    position:fixed;
    left:6px;
    top:6px;
    width:40px;
    height:40px;
    
    font-size:16px;
    font-weight:bold;
    line-height:0px;
    vertical-align:middle;
    text-align:center;

    border:1px #727272 solid;
    border-top:1px #727272 solid;
    border-left:4px #57B62D solid;
    background:#ECECEC;
    color:black;
    
    -webkit-appearance: none;
    cursor:pointer;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    z-index:2;
}

#loginmnu:hover { background:white; }

#login {
    position:fixed;
    left:50%;
    top:50%;
    
    width:350px;
    height:220px;
    margin-left:-200px;
    margin-top:-160px;

    padding:45px;
    padding-top:20px;
    padding-right:20px;

    border:1px silver solid;
    border-left:5px silver solid;
    background:white;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    -moz-box-shadow:2px 2px 4px #2A2A2A;
    -webkit-box-shadow:2px 2px 4px #2A2A2A;
    box-shadow:2px 2px 4px #2A2A2A;
    
    display:none;
}

#mask {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    background:black;
    opacity:0.5;
}

.maare, .maare_calc {
    width:200px;
    padding:8px;
    padding-top:6px;
    margin-bottom:8px;
    margin-left:10px;

    color:#727272;
    border:1px silver solid;
    background:#F8F8F8;
    font-weight:bold;
    text-align:center;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    float:left;
    cursor:pointer;
}

.maare_calc {
    width:40px;
    font-size:18px;
    line-height:17px;
}
.maare:hover, .maare_calc:hover {
    border:1px #727272 solid;
    border-bottom:2px #727272 solid;
    margin-bottom:7px;
}
.maare hr { width:100px; margin-left:50px; }

#kaavaedit {
    padding:16px;
    padding-bottom:20px;

    background-color:white;
    border:1px silver solid;
    border-top:0px;
    border-bottom:4px #737373 solid;

    -webkit-border-bottom-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-bottomleft:8px;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
}

#sortable { padding:25px; }
#sortable div {
    padding:6px;
    padding-top:4px;
    padding-bottom:4px;
    
    margin-bottom:8px;
    margin-left:8px;

    background:white;
    border:1px white solid;

    float:left;
    cursor:pointer;
}
#sortable div:hover { border:1px #727272 dashed; }
#sortable hr { width:390px; }

#kopioi_edelliset {
    text-align:right;
    color:#0078CA;
    text-decoration:underline;
    cursor:pointer;
    display:none;
}

.colorbtn {
    float:left;
    width:24px;
    height:24px;
    margin-right:4px;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    cursor:pointer;
}

.cont { height: 320px; }

#alertcell {
    padding:2px;
    padding-left:0px;
    padding-right:0px;
    color:#2A2A2A;
}

#alertcell div {
    padding:4px;
    text-align:center;
    
    border:1px #AE2222 solid;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

.ctrlbox {
    float:left;
    margin-left:12px;
    margin-top:12px;
    /* background: #F8F8F8; */
    padding:16px;
    padding-right:14px;
    padding-top:8px;
    padding-bottom:12px;
    
    /* border:1px silver solid; */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
}

.muoto {
    float:left;
    padding:4px;
    margin-right:2px;
    border:1px white solid;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

}
.muoto:hover {
    border:1px silver solid;
    cursor:pointer;
}

.ipt {
    table-layout:fixed;
    width:335px;
    display:none;
}

#raakamitat {
    padding-left:10px;
    padding-right:10px;

    color:#2A2A2A;
    background:#F8F8F8;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    -webkit-box-shadow:0px 0px 1px #727272 inset;
    -moz-box-shadow:0px 0px 1px #727272 inset;
    box-shadow:0px 0px 1px #727272 inset;
}

.drg {
    width:100%;
    height:16px;

    padding:0px;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:4px;

    margin:-2px;
    margin-top:2px;
    margin-bottom:2px;
    margin-left:-6px;

    background:#F8F8F8 url(../img/drag.png) no-repeat center;
    border:1px solid silver;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    cursor:n-resize;
}

#cornr {
    position:absolute;
    top:0px;
    left:0px;

    width: 0; 
    height: 0; 
    border-top: 200px solid white;
    border-right: 200px solid transparent;
}
#cornr_txt {
    position:absolute;
    top:50px;
    left:-15px;

    text-align:center;
    font-size:20px;
    font-weight:bold;

    -ms-transform: rotate(-45deg); /* IE9+ */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    writing-mode: lr-tb;
    
    cursor:pointer;
}
#cornr_txt:hover { text-decoration:underline; }

#footr {
    padding-top:15px;
    margin-top:10px;
    border-top:1px silver solid;
}
.footrbox {
    margin-right:20px;
    margin-top:10px;
    float:left;
}
#footr div {
    color:#727272;
    margin-bottom:5px;
}
#footr span { font-size:20px; }

#kuva_mat {
    position:absolute;
    top:50px;
    right:0px;
    width:300px;
    height:300px;
    
    border:1px #727272 solid;
    border-right:0px;
    background-color:white;
    background-image: url(../img/kuva_dummy.png);
    background-repeat:no-repeat;
    background-position:center;

    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
}

.pt {
    width:330px;
    margin-right:20px;
    float:left;
}

#tilaus {
    position:absolute;
    width:325px;
    padding:20px;

    left:50%;
    top:50%;
    margin-left:-185px;
    margin-top:-140px;

    background:#F8F8F8;
    border:1px solid silver;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    
    display:none;
}

#ctrls {
    display:none;
}