/******************************************************************************
 * default css file for the toolbox
 */


/******************************************************************************
 * html tags defaults

    @TODO: to fill for all first befor implementing buisness stuff

 */
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: Arial,sans;
    background-color: #ccc;
}

pre,
noscript {
    font-family: "new courier", courier, sans;
    overflow: auto;
}

p {
    padding: 0px;
    margin: 8px 2px;
}

/******************************************************************************
 * Forms and fieldsets
 */
form {
    margin:0px;
    clear: both;
}

fieldset {
    overflow-x: auto;
    margin: 0 2px 16px 0;
    /*opacity: 0.7;*/
    /*border-color: #e6e6e6;*/
    border: 1px solid #efefef;
    border-radius: 6px;
}
fieldset:hover {
    /*opacity: 1;*/
    border-color: #ccc;
    background-color: #EFEFEF;
}

fieldset input, fieldset select {
    /*float: left;*/
    min-width: 230px;
    width: 79%;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 5px;
    background-color: #FFF;
    color: #444;
}
fieldset select {
    min-width: 240px;
    width: 80%;
    color: #444;
}

fieldset textarea {
    min-width: 230px;
    width: 95%;
    border-radius: 4px;
    border: 1px solid #aaa;
    padding: 4px;
}

fieldset button {}

fieldset legend {
    padding:0 4px;
}

fieldset label {
    /*float: left;*/
    margin: 4px 4px 4px 0px;
}
fieldset p.fs_info, .fs_info {
    margin: 0px;
    padding: 4px 0px;
}

fieldset div.errorlist {
    padding: 4px 14px 4px 14px;
}

fieldset#fs_captcha img {
    /*float: left;*/
}

.fs_desc {
    font-style: italic;
    /*float: left;*/
    margin: 4px;
    color: #999;
}

.btn_submit, fieldset button[type="reset"], fieldset button[type="submit"] {
    background-origin: padding-box;
    border-radius: 6px;
    border-style: double;
    padding: 4px 8px;
}
.btn_submit, fieldset button[type="submit"] {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn_reset, fieldset button[type="reset"] {
    color: #fff;
    background-color: #d43f3a;
    border-color: #d43f3a;
}

/******************************************************************************
 * misc settings global
 */
.error {
    font-family: "new courier", courier, sans;
    color: red;
}
.debug {
    color: deeppink;
}
.red {color: red;}
.green {color: #09cc30;}
.warn {color: #FC7D02;} /*FFC900*/

small, .tiny {font-size: 10px;}

/* the opposit of "current item" but to fill a class="" with something */
.none {}

/* clear floating points */
.clear {
    clear: both;
}


/******************************************************************************
 * based on core design, relevant
 */
div#page {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

div#header {
    background: #ccc none repeat scroll 0% 0%;
    border-radius: 0px 14px 14px 14px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    background: url("../images/mla-logo-trans.png") no-repeat;
    background-position: 20px 6px;
    background-color: #ccc;
    height: 50px;
    padding: 4px 0px 4px 0px;
    margin: 8px 8px 0px 4px;
}

div#header div#logo {
    float: left;
    height: 50px;
    width: 180px;
}

div#header div#id {
    float: right;
    padding: 4px;
    text-align: right;
    margin: 0px 8px;
    font-size: 12px;
    color: #fff
}
div#footer {
    background: #ccc none repeat scroll 0% 0%;
    border-radius: 14px 14px 14px 14px;
    border: 1px solid;
    border-color: #ccc #ddd;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    height: 50px;
    padding: 16px 4px 4px 4px;
    margin: 50px 6px 8px 6px;
    overflow-x: auto;
    text-align: center;
    font-size: 12px;
    clear: both;
}

div#footer .copyright, div#footer .copyright a {
    color: #8F8F8F;
}

/** default navigation */
div.navi {
    float: left;
    min-width: 150px !important;
    max-width: 200px !important;
    padding: 14px;
    margin: 6px;
    /*overflow: auto;*/
    background: #fff none repeat scroll 0% 0%;
    border-radius: 14px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
}

div.navi ul {list-style: none; padding: 0px 0px 4px 0px;}

div.navi ul li {padding: 2px 0px 2px 2px;}

/* marks items to be "current one" so eg: bold text */
div.navi .cur {
    font-weight: bold;
    background-color: yellow;
}


/* marks items to be "current one" so eg: bold text */
div.navi .cur {
    font-weight: bold;
    background-color: yellow;
}

div#content {
    margin: 2px 0 0px 0;
    padding: 4px;
    min-width:280px;
    overflow: auto;
}

div.textbox {
    min-width: 200px;
    margin: 0px 0px 8px 0px;
    border: 1px solid #EFEFEF;
    padding: 4px 4px 16px 8px;
    overflow: hidden;
    background: #fff none repeat scroll 0% 0%;
    border-radius: 14px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
}

/* textbox but no fill width floting left class="textbox minitextbox" */
div.minitextbox  {
    float: left;
    /*margin: 0px 0px 8px 0px;*/
    margin: 4px 4px 8px 4px;
    min-height: 130px;
}

div.textbox h2.title {
    font-size: 18px;
    padding: 0px 10px 0px 10px;
}
div.textbox div.content {
    padding: 0px 10px 0px 10px;
}

/* for several little informations boxes inside a textbox */
div.minibox {
    float: left;
    margin: 10px;
    min-height: 180px;
}

div.twoboxes {
    width: 50%;
}

/** Html_Table */
table.htmltable thead tr th {
    padding: 4px;
}
table.htmltable tbody tr td {
    padding: 2px;
}

/******************************************************************************
 * individual buttons sortation of table rows
 */

/* table-order/ sortations
 * list items eg in tables
 */
.sortable-table tr:hover, tr:hover {
    background-color: oldlace;
}

.sortable-div {
    -webkit-box-shadow: 4px 4px 15px 0px rgba(112, 112, 112, 0.7);
    -moz-box-shadow: 4px 4px 15px 0px rgba(112, 112, 112, 0.7);
    box-shadow: 4px 4px 15px 0px rgba(112, 112, 112, 0.7);
    padding: 10px;
}

.sortable-item, .sortable-item table {
    background-color: white;
}

.btn_itm_move,
div.sortable-table-link {
    width: 14px;
    height: 14px;
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    float: right;
    background-position: -130px 1px;
    background-repeat: no-repeat;
    cursor: move;
}

.btn_itm_delete {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -180px -96px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
    margin: 0 0 0 14px;
}

.btn_itm_edit {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -66px -112px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

.btn_itm_noedit {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -1px -128px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

/* copy/ dublicate icon*/
.btn_itm_copy {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -48px -80px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

.btn_itm_access, .btn_itm_unlocked  {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -208px -96px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

.btn_itm_noaccess, .btn_itm_locked {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -194px -96px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

/* info default */
.btn_itm_info {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -17px -143px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

/* info right */
.btn_itm_infor {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -17px -143px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: right;
}

.btn_itm_info.red, .btn_itm_infor.red {
    background: url("../plugins/jquery-ui/images/ui-icons_cc0000_256x240.png");
    background-position: -17px -143px;
    background-repeat: no-repeat;
}

.btn_itm_list {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -80px -80px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

.btn_itm_grouplist {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -48px -224px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

.btn_itm_asc, .btn_itm_az {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: 0px -16px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    padding: 0px 0px 0px 16px;
}

.btn_itm_desc, .btn_itm_za {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -64px -14px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    padding: 0px 0px 0px 16px;
}

.btn_itm_reload {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -64px -80px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0px 0px;
    padding: 0px 8px;
}

/* pined item */
.btn_itm_pined {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -145px -144px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}

/* un-pined item */
.btn_itm_unpined {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -130px -144px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}
/* plav, visit, call item */
.btn_itm_play {
    background: url("../plugins/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: 0px -160px;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 16px;
    height: 16px;
    float: left;
}
.btn_itm_play.red {
    background: url("../plugins/jquery-ui/images/ui-icons_cc0000_256x240.png");
    background-position: 0px -160px;
}

/*******************************************************************************
 * pager/ pagination div
 */
.pnnavi {
    text-align: center;
    padding: 8px 0px 0px 0px;
    font-size: 12px;
}
.pnnavi.summary {
    text-align: center;
    padding: 2px 0px;
    font-size: 12px;
}


/** dropzone.js additions */
.dropzone {
    min-width: 200px;
    min-height: 100px;
    margin: 0px 0px 8px 0px;
    border: 1px solid #EFEFEF;
    padding: 4px 4px 16px 8px;
    background: #f2f2f2 none repeat scroll 0% 0%;
    border-radius: 6px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);
    box-sizing: inherit;
}

.dropzone .dz-preview.dz-image-preview {
    background-color: #f2f2f2;
}

/* Program User */


/* progress bar */
#mla_progress {
  width: 100%;
  background-color: #ddd;
}

#mla_progress_bar {
  width: 5%;
  height: 30px;
  background-color: #4CBE00;
  text-align: left;
  padding: 0 0 0 20px;
  line-height: 30px;
  color: white;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}