.main-container {
    box-sizing: border-box;
    margin: 0;
    overflow-style:scrollbar;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 8px 0 8px 0;
    position: fixed; top: 140px; right: 0; bottom: 0; left: 0;
    white-space: nowrap;
    zzz_z-index: 1000;
}

.col-container {
    background-color: #ddd;
    border-radius: 0;
    box-sizing: border-box;
    display: inline-block;
    height: 100%;
    margin: 0 4px 0 4px;
    overflow: hidden;
    padding: 40px 0 5px 0;
    vertical-align: top;
}
.col-container h1 {
    box-sizing: border-box;
    color: #404040; 
    font-size: 15px;
    font-weight: 500;
    height: 40px;
    margin: -40px 0 0 0; 
    padding: 8px 0 0 10px;
    text-shadow: 1px 1px 1px #fff;
}

.col-container.Gray         { background-color: #eeeeee; }
.col-container.Yellow       { background-color: #FFFFC0; }
.col-container.Blue         { background-color: #C0C0FF; }
.col-container.Pink         { background-color: #FFC0C0; }
.col-container.Green        { background-color: #C0FFC0; }
.col-container.Purple       { background-color: #FFC0FF; }


.col-container h1 a         { font-size: 15px; color: #404040; font-weight: 500; text-decoration: none; text-shadow: 1px 1px 1px #fff; }
.col-container h1 a:hover   { text-decoration: underline; }

.col {
    box-sizing: border-box;
    display: inline-block;
    margin: 0 5px 10px 0;
    max-height: 100%; 
    overflow-style:scrollbar;
    overflow-y:auto;
    vertical-align: top; 
    width: 278px;
}
.item {
    margin: 2px 5px 1px 9px;
    height: 100px;
    line-height: 1.3;
    background-color: #fff;
    border-radius: 0; 
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    padding: 8px 8px; 
    box-sizing: border-box;
    font-size: 13px;
    white-space: pre-wrap;
}
.item:hover 
{ 
    border-top: 1px dotted #999;
    border-right: 1px dotted #999;
    border-bottom: 1px dotted #999;
    border-left: 1px dotted #999;
}
.item i             { color: #606060; font-size: 22px; margin-right: 10px; }
.item a             { font-size: 12px; text-decoration: none; }
.item a:hover       { text-decoration: underline; }
.item span          { display: inline-block; vertical-align: top; margin: 0; padding: 0; font-size: 12px; font-weight: 500; }
.item.White         { background-color: #FFFFFF; }
.item.Yellow        { background-color: #FFFFC0; }
.item.Blue          { background-color: #C0C0FF; }
.item.Pink          { background-color: #FFC0C0; }
.item.Green         { background-color: #C0FFC0; }
.item.Purple        { background-color: #FFC0FF; }

.itemdropzone       { height: 10px; border: none; background-color: transparent; margin: 0 5px 0 9px; }
.itemdropzoneOver   { height: 10px; border: none; background-color: #606060; margin: 0 5px 0 9px; border-radius: 0; }

.settings {
    margin: 7px 5px 7px 9px;
    background-color: #fff;
    border-radius: 0; 
    border-bottom: 1px solid #ccc;
    padding: 8px 6px; 
    box-sizing: border-box;
    font-size: 13px;
}


/* ITEMS */
.items-menu         { width: 500px; min-height:360px; border: 5px solid #ddd; background-color: transparent; margin: 0; padding: 0 0 0 4px; border-radius: 0; }
.items-menu i       { font-size: 70px; }

#MoveItemUp         { margin: 0; position:absolute; top: 10px; left: 80px; }
#MoveItemDown       { margin: 0; position:absolute; top: 90px; left: 80px; }
#CloseItemPopup     { margin: 0; position:absolute; top: 5px;  left: 465px; }
#CloseItemPopup i   { font-size: 34px; }

#MoveItemLeft       { margin: 0; position:absolute; top: 50px; left: 0; }
#MoveItemRight      { margin: 0; position:absolute; top: 50px; left: 160px; }

#Edit1              { margin: 0; position:absolute; top: 50px; left: 320px; display: inline-block; border-radius: 0; width: 60px; height: 60px; background-color: #404040; }
#Edit1 i            { color: #fff; font-size: 30px; }

#EditItem           { margin: 0; position:absolute; top: 50px; left: 320px; }
#EditItem span      { width: 80px; }
#ViewItem           { margin: 0; position:absolute; top: 50px; left: 240px; }
#RemoveItem         { margin: 0; position:absolute; top: 50px; left: 400px; }

#SetItemWhite       { margin: 0; position:absolute; top: 170px; left: 0; }
#SetItemWhite i     { color: #FFFFFF; }
#SetItemYellow      { margin: 0; position:absolute; top: 170px; left: 80px; }
#SetItemYellow i    { color: #FFFFC0; }
#SetItemBlue        { margin: 0; position:absolute; top: 170px; left: 160px; }
#SetItemBlue i      { color: #C0C0FF; }
#SetItemPink        { margin: 0; position:absolute; top: 170px; left: 240px; }
#SetItemPink i      { color: #FFC0C0; }
#SetItemGreen       { margin: 0; position:absolute; top: 170px; left: 320px; }
#SetItemGreen i     { color: #C0FFC0; }
#SetItemPurple      { margin: 0; position:absolute; top: 170px; left: 400px; }
#SetItemPurple i    { color: #FFC0FF; }

#ItemText           { margin: 0; position: absolute; top:260px; left:14px; width: 380px; padding: 8px; border: none; border-radius: 0; }
#SaveItemText       { margin: 0; position:absolute; top: 255px; left: 400px; }


/* STEPS */
.steps-menu         { width: 500px; min-height:230px; border: 5px solid #ddd; background-color: transparent; margin: 0; padding: 0 0 0 4px; border-radius: 0; }
.steps-menu i       { font-size: 70px; }

#CloseStepPopup     { margin: 0; position:absolute; top: 5px;  left: 465px; }
#CloseStepPopup i   { font-size: 34px; }

#MoveStepLeft       { margin: 0; position:absolute; top: 10px; left: 0; }
#MoveStepRight      { margin: 0; position:absolute; top: 10px; left: 80px; }
#RemoveStep         { margin: 0; position:absolute; top: 10px; left: 160px; }

#SetStepGray        { margin: 0; position:absolute; top: 90px; left: 0; }
#SetStepGray i      { color: #dddddd; }
#SetStepYellow      { margin: 0; position:absolute; top: 90px; left: 80px; }
#SetStepYellow i    { color: #FFFFC0; }
#SetStepBlue        { margin: 0; position:absolute; top: 90px; left: 160px; }
#SetStepBlue i      { color: #C0C0FF; }
#SetStepPink        { margin: 0; position:absolute; top: 90px; left: 240px; }
#SetStepPink i      { color: #FFC0C0; }
#SetStepGreen       { margin: 0; position:absolute; top: 90px; left: 320px; }
#SetStepGreen i     { color: #C0FFC0; }
#SetStepPurple      { margin: 0; position:absolute; top: 90px; left: 400px; }
#SetStepPurple i    { color: #FFC0FF; }

#StepName           { margin: 0; position: absolute; top:180px; left:14px; width: 380px; padding: 8px; border: none; border-radius: 0; }
#SaveStepName       { margin: 0; position:absolute; top: 172px; left: 414px; }
#SaveStepName i     { font-size: 50px; }