/* basic typography */
h2 {
    border-radius:4px;
    margin-top:0;
    font-size:1.6rem;
    font-weight:normal;

}
a img {border:none;}
a[href] {
    color: #5F65C2;
    text-decoration:none;
}
a:hover {color: #5C2BBA;}

/* System's footer overrides*/
#footer {
    position: unset;
    padding: 0;
}
/* pure buttons */
.button-success,
        .button-passive,
        .button-error,
        .button-warning,
        .button-secondary,
        .button-href {
    color: white;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    border: solid #1a1a1a 1px;
    font-size:0.8rem;
}
.button-success {
    background-color: rgb(159, 198, 81); /* this is a green */
    border: solid #8BAD47 1px;     
    color:#3f3f3f;
}
.button-href {
    border: solid #c3c3c3 1px !important;  /* this is a green */
    color: #5a5a5a !important;
    text-shadow:none;
    text-decoration:none !important;
}
.button-xsmall {
    font-size: 60% !important;
}
.button-small {
    font-size: 80% !important;
}
.button-large {
    font-size: 110% !important;
}
.button-xlarge {
    font-size: 120% !important;
    font-weight:bold;
}
.button-xxlarge {
    font-size: 135% !important;
    font-weight:bold;
}


/* mainpage gridded table */
#mainpage {
    display:grid;
}
#mainpage td {
    background-color:white;
    padding:5px;
}
/* grid-bar*/
.sidebar1 {
    grid-area: sidebar1;
}

.sidebar2 {
    grid-area: sidebar2;
}

.sidebar3 {
    grid-area: sidebar3;
}

.content1 {
    grid-area: content1;
}

.content2 {
    grid-area: content2;
}

.header {
    grid-area: header;
}

.footer {
    grid-area: footer;
}
/* mainpage gridding 
 * can be created programatically? */
.wrapper {
    background-color: #fff;
    color: #444;
    display: grid;
    margin-top:10px;
    margin-right:0px;
    margin-left:2px;
    margin-bottom: 10px;
    background: #f2f2f2;
    margin: 0;
    padding: 5px 2px 10px 2px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size:80%;
}

.header,
.footer {
  background-color: #999;
}

.sidebar1 {
  background-color: #ccc;
  color: #444;
}

.sidebar2 {
  background-color: #ccc;
  color: #444;
}

.sidebar3 {
  background-color: #ccc;
  color: #444;
}


/*mainpage grid div elements*/
.rightbox {
    float:right;
    padding:10px;
    margin:5px;
}
.leftbox {
    float:left;
    padding:10px;
    margin:5px;
}
.downbox {
    padding-left:10px;
    margin:5px;
}
.centerbox {
    padding:10px;
    margin:5px;
    text-align:center;
}
.boxborder {
    border:1px solid #e3e3e3;
    border-radius:10px;
}
.boxborder:hover {
    background-color:#f5f5f5;
}
.boxul {
    padding:0 0 0 10px;
    list-style-type:none;
}
.boxul .blarge {
    font-size:170%;
}
.register {
    display:table-cell;
    text-align:right;
    padding:10px 30px 0 10px;
    white-space: nowrap;
}
#header-row {
    font-size:1rem;
}
.tbl {
    display:table;
}
.tbl-row {
    display:table-row;
}
.tbl-h {
    display:table-header-group;
}
.tbl-cell {
    display:table-cell;
}
/* very small screens */
@media only screen and (max-width: 600px) {
    #header-row {
        font-size:0.4rem;
    }
}
@media only screen and (min-width: 600px) {
        font-size:0.5rem;
}
@media only screen and (min-width: 900px) {    
        font-size:0.7rem;
}
@media only screen and (min-width: 1200px) {    
        font-size:0.9rem;
}
/* mobile specific */
@media only screen and (hover: none) and (pointer: coarse) {
        font-size:0.7rem;
}