* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box
}

body {
    font-size: 0.83rem;
    font-family: Arial, sans-serif;
}

/*important: nav width is 10rem, header height is 1.6 rem, footer height is 1.6 rem*/
/* it is better not to touch margins and paddings of these main divs */

html, body {
   margin:0;
   padding:0;
   border-width:0;
   height:100%;
   width:100%;
}

/*debug*/
div {
    border-style:none;
    border-width:1px;
}
#nav, #header, #footer, #content {
    border-style:none;
}
.debug {
    border-color:black;
    border-width:1px;
    border-style:solid;
}
/*debug*/

#nav {
    margin:0;
    padding:0;
    position:fixed;
    top:0;
    left:0;
    border-color:black;
    border-width:1px;
    border-right-style:solid;
    height:100%;
    width:6rem;
    z-index:10;
}

#header {
    margin:0;
    position:absolute;
    top:0;
    left:0;
    padding: 0 0 0 6rem;
    border-color:black;
    border-width:1px 1px 1px 0px;
    height:1.4rem;
    width:100%;
    z-index:10;
}

#footer {
    margin:0;
    position:absolute;
    bottom:0;
    left:0;
    padding: 0 0 0 6rem;
    border-color:black;
    border-width:1px 1px 1px 0px;
    height:1.4rem;
    width:100%;
    z-index:10;
}

#content {
    margin:0;
    position:absolute;
    top:0;
    left:0;
    padding:1.4rem 0 1.4rem 6rem;
    border-color:black;
    border-width:0px 1px 0px 0px;
    height:100%;
    width:100%;
}



/* elements */

.userCaption {
    display:block;
    margin-top:0.2rem;
    margin-bottom:0.2rem;
}

.navCaption {
    margin-top:1rem;
    margin-bottom:1rem;
}

.link {
    color:blue;
}

.centeringTable {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    border: none;
    border-collapse:collapse;
    border-spacing: 0
}

.centeringTable td {
    padding:0;
    vertical-align:central;
    text-align:center;
    border:none;
}

.commandIcon {
    height:2rem; 
    width:2rem; 
    border:none
}

.headerContent {
    text-align:center; 
    margin-top:0.2rem;
    padding-top:1px;
    padding-right:1rem;
    height:1.2rem; 
    overflow:hidden;
}

.footerContent {
    padding:0.2rem 0 0 0;
    text-align:center
}

.imageBox {
    width:176px; 
    height:136px; 
    border-color:black; 
    border-style:solid; 
    border-width:1px; 
    margin: 0;
    padding: 7px;
    float: left;
}

.linkImage {
    border:none;
}

/*collection table BEGIN*/
.collectionsTable {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    border-style:solid;
    border-width:1px;
    border-color:black;
    border-collapse:collapse;
    border-spacing: 0
}

.collectionsTable td, th {
    padding:0;
    vertical-align:top;
    text-align:center;
    border-style:solid;
    border-width:1px;
    border-color:black;
    padding:0.4rem 0.2rem 0.4rem 0.2rem;
}

.collectionsTable th.activeColumn:hover {
    cursor: pointer;
    background-color:rgb(245,245,245);
}

.chosenColumn {
    background-color:rgb(225,225,225);
}

.collColumn {
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.collEdit {
    width:1.4rem;
    height:1.4rem;
    cursor:pointer;
}
/*collection table END*/

.transparentBorder {
    border: 1px solid transparent;
}

.minEditableHeight {
    min-height: 1rem;
}

.errorMessage {
    color:red;
}