﻿/* Reset and define common styles */
* { box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica; background-color: #e0e0e0; }
button { border: 1px solid #999; color: #555; background-color: #F4F4FA; padding: 0 10px; border-radius:10px 10px; }
button:hover { background-color: white; }
input[type=text], input:not([type]) { padding: 0 10px; text-overflow:ellipsis; }
input[type=checkbox] { margin: 0 8px 0 15px; font-size:xx-small;  }
table {align-content: center; margin: auto; border-collapse:collapse; width:100%; }
    
ul {columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  font-size:xx-small;
  list-style-image:none;
}
li { list-style-image:none; list-style-type:none; padding-bottom:10px;}
.item-checkbox {
}
.welcomemsg {align-content: center; margin: auto; text-align:center;}
.header-post11 .right-side {
    float: left;
    padding-left:10px;
    padding-right:10px;
}
.dropdown { align-content:center; font-size:x-small; text-align:center; margin: 8px 1px 8px 1px; padding-bottom:10px; }
.header-post11 .wrench-icon{background: url('../images/tfs-icons.png') no-repeat -3522px -16px !important;}
.header-post11 .play-icon{background: url('../images/tfs-icons.png') no-repeat -3328px -16px !important;}
.header-post11 .caution-icon{background: url('../images/tfs-icons.png') no-repeat -3761px -16px !important;}
/*.header-post11 .exit-icon{background: url('../images/tfs-icons.png') no-repeat -3377px -16px !important;}*/

/*.icon-header-settings {background: url('../images/header-icons.png') no-repeat -192px -16px !important;}
.icon-header-settings-hover {background: url('../images/header-icons.png') no-repeat -224px -16px !important;}*/
.icon
{
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    vertical-align: middle;
}
.summarynotauth {font-size:small; color:red; background-color:white; text-transform:uppercase;}
.summaryxxsmall {font-size: xx-small; color:white; background-color:#71BCFA; text-transform:uppercase;}
/* Main page structure and masthead style */
#wrapper { max-width: 800px; margin: auto; padding: 20px; }
article { background-color: white; box-shadow: 0 0 12px rgba(0, 0, 0, 0.75); border-radius: 10px; }
header { background-color: #71BCFA; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
header h1 { text-transform: uppercase; font-weight: normal; color: #545353; font-size: 28px; }
header h2 { text-transform: uppercase; font-weight: normal; color: white; font-size: 20px; }
#summary { text-align: center; padding: 8px 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; width: 100%;}

/* "Add new" form */
#add-item { height: 40px; margin: 17px 0 5px 0; font-size: 1.1em }
#add-item div { overflow: hidden; width:100%; }
#add-item button { float: right; margin-left: 10px; padding: 0 10px; height: 100%; border-radius: 4px; }
#new-item-text { width: 100%; height: 40px; border: 1px solid #999; font-size: 1em; border-radius: 4px; }

/* List of items */
#tblItems tr:nth-child(even){ /*(even) or (2n 0)*/    background-color:aliceblue;  }

#tblItems tr:nth-child(odd){ /*(even) or (2n 0)*/    background-color:white; }

/*#todo-items td { list-style-type:none; height: 36px; padding: 0px 1px; border-bottom: 1px solid #dadada; font-size:xx-small;  }*/
#tblItems td { height: 36px; font-size:xx-small; font-weight:600; padding-left:5px; }



/*.item-delete { float: left; margin: 5px; margin-right: 15px; height: 26px; }*/


.span { padding: 5px 2px; font-size:xx-small;}

/* Textboxes in list of items */
/*#todo-itemsx td div { overflow: hidden; padding: 5px 2px; font-size:xx-small;}
.item-text { width: 100%; height: 26px; line-height: 24px; border: 1px solid transparent; background-color: transparent; }
.item-text:focus, .item-text:hover { border-color: #aaa; background-color: #FFC; }*/


/* Footer */
footer { text-align: center; font-size: 0.8em; margin-top: 20px; }
footer a { color: #666; display: block; }
#errorlog { color: red; font-weight: bold; padding: 8px; display: inline-block; text-align: left; }
