body {
    background-color:white;
    padding:0;
    margin:0;
    border:0;
    ::-webkit-scrollbar { 
        width:5px; background-color: #345F90; 
        }
    }
html {
    padding:0;
    margin:0;
    border:0;
    }
* {
    font-family: tahoma, arial, sans-serif;
    color:#006;
    font-size:1em;
    line-height:1.5em;
    }
p, h1, h2, h3, ul, ol, a, .subcomment, .adminlink, #login, #sociallinks, textarea { 
    max-height:9999px; /* stops Chrome on Android from 'font boosting' */
    }
sup {font-size:9px;line-height:12px;color:#999;}
h1 {
    color:#345F90;
    text-align:center;
    margin:20px 0 20px 0;
    font-size:24px;
    line-height:32px;
    clear:both;
    }
h2 {
    color:#345F90;
    text-align:center;
    padding:20px 0 0 0;
    font-size:20px;
    line-height:26px;
    clear:both;
    }
h3 {
    color:#345F90;
    text-align:left;
    margin:0;
    padding:15px 0 0 0;
    }
a {
    color:#00b;
    text-decoration:none;
    }
img {
  border:0;
  padding:0;
  margin:0;
  height:auto;
  }

th {
  font-weight:bold;
  padding:2px 15px;
  color:white;
  background-color:#C3BD96;
  }

td {
  padding:2px 15px;
  }

#pagecontainer {
    clear:both;
    position:relative;
    margin:0;
    padding:0;
    border-top:1px solid #345F90; 
      /* For unknown reason, a non-zero border prevents gap 
      between header and image on home page in chrome */
    }
#content {
    width:900px;
    display:block;    
    margin:auto;    
    max-width:95%; 
    }
#main {
    overflow-x:hidden;
    width:100%;
    margin:auto;
    }
.header-image { position: absolute; top: 10px; z-index:1;}
#masthead hgroup { position:relative; Z-index:2;}
#masthead nav { position:relative; Z-index:2;}

#sociallinks {
    text-align:center;
    width:190px;
    line-height:12px;
    } 

#sociallinks > a {
    display:block;
    float:right;
    width:60px;
    height:60px;
    text-decoration:none;
    margin:0;
    }

#login {
    text-align:center;
    width:180px;
    height:70px;
    }
#coverimage {
    width:100%;
    height:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:-1;
    display:block;
    }

@media print {
    #menubar {
        display:none;
        }
    #pageheader {
        display:none;
        }
    .screenonly {
      display:none;
      }
    }
@media screen, projection {
    #menubar {
        display:block;
        text-align:center;
        height:104px;
        padding:0;
        margin:0 auto;
        overflow-x:auto;
        white-space: nowrap;
        border:0;
        }
    #pageheader {
        clear:both;
        width:900px;
        display:block;    
        margin:0 auto;    
        max-width:95%;  
        border:0;
        padding:0;  
        }
    .printonly {
      display:none;
      }
    }

@media screen and (max-width: 640px) {
    .submenucontainer {
        margin:auto;
        max-width:400px;
        z-index:0;
        }
    }
@media screen and (min-width: 641px) {
    .submenucontainer {
        margin:auto;
        max-width:100%;
        z-index:0;
        }
    }

@media screen and (max-device-width: 395px) {
    #sociallinks {
        float:none;
        margin:auto;
        }
    #login {
        float:none;
        margin:10px auto 0 auto;
        }
    #username { padding:5px; }
    .flexiblockright {
        margin:10px auto;
        float:none;
        display:block;
        text-align:center;
        clear:right;
        }
    .flexiblockleft {
        margin:10px auto;
        float:none;
        display:block;
        text-align:center;
        clear:left;
        }
    #startbutton {
        border:0;
        margin:0;
        max-width:100%;
        }
    #homepagespacer {
        display:none;
        }
    } 
@media screen and (min-device-width: 396px) { 
    #sociallinks {
        float:right;
        margin:0;
        }
    #login {
        float:left;
        margin:5px 0 5px 0;
        padding-top:0;
        }
    #username { 
      padding:0 0 5px 0; 
      overflow:auto;
      }
    .flexiblockright {
        margin:10px;
        float:right;
        display:block;
        clear:right;
        }
    .flexiblockleft {
        margin:10px;
        float:left;
        display:block;
        clear:left;
        }
    #startbutton {
        border:0;
        margin:0 20px 0 0;
        max-width:100%;
        }
    #homepagespacer {
        width:100%;
        padding-top:40%; /* A brill little dynamic trick -> padding is proportional to container's width */
        }
    }

@media print {
    .flexiblockright {
        margin:10px;
        float:right;
        display:block;
        clear:right;
        }
    .flexiblockleft {
        margin:10px;
        float:left;
        display:block;
        clear:left;
        }
    }
.fb-login-button {height:38px;}      
.widget_recent_entries li {padding-bottom:12px;line-height:100%;}
.widget_recent_entries a {text-decoration:none;}
.tagcloud a {text-decoration:none;}
.single-author .entry-meta .by-author { display: inline; }
.adsbygoogle {background-color:white;}

.caption {
    font-size :12px;
    line-height:16px;
    color:#345F90;
    }
.compact {
    margin:0;
    padding:0;
    border:0;
    }
.justify {
    text-align:justify;
    }
.actionlink {
    width:140px;
    height:36px;
    background:url('/files/actionbutton.png') no-repeat;    
    display:block;
    margin:5px auto;
    color:#660100;
    font-size:12px;
    font-weight:normal;
    line-height:16px;
    padding:13px 70px 13px 10px;
    text-align:center;
    border:0;
    }
.actionlink:first-line {
    font-size:16px;
    font-weight:bold;
    line-height:20px;
    }
.actionnote {
    display:block;
    width:220px;
    margin:0 auto 15px auto;
    font-size :12px;
    line-height:14px;
    color:#345F90;
    text-align:center;
    }
.tablebullet {
    margin:auto;
    }
.tablebullet td {
    padding: 5px 15px;
    text-align:center;
    font-weight:bold;
    color:black;
    line-height:1.2em;
    }
/* Delete the following after implementation */

.mymenublock {
    position:relative;
    display:inline-block;
    width:250px;
    margin:20px;
    height:220px;
    overflow-x:hidden;
    overflow-y:hidden;
    position:relative;
    }

.mymenutitle {
    display:block;
    width:100%;
    text-align:center;
    margin:3px auto;
    font-weight:bold;
    font-size:12px !important;
    line-height:16px !important;
    text-decoration:none !important;
    background-color:#e9e9ff;
    }

.mymenutext {
    display:block;
    position: relative;
    font-size:12px !important;
    line-height:16px !important;
    text-decoration:none !important;
    text-align:justify !important;
    }
.mymenutext:hover {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:25px;
    font-size:15px !important;
    line-height:22px !important;
    background-color:white;
    }
.mymenutext:hover > div {
    display:none;
    }
/*---------------------------------*/

#mytopbandcontainer {
    background-color:#345F90;
    margin:0;
    padding:0;
    border:0;
    overflow:auto;
    }
#mytopband {
    background:url('/files/topbannerbg.gif') right center no-repeat;
    padding:15px 1px 1px 1px;
    margin:0;
    border:0;
    }
#mybanner {
    text-align:center;
    color:#C2D8F0;
    }
#myleftbannertext {
    display:inline-block;
    width:80px;
    height:80px;
    text-align:center;
    font-size:21px;
    line-height:27px;
    vertical-align:top;
    margin-bottom:5px;
    background:url('/files/metarasa-logo.png') 0 0 no-repeat; 
    }
#myleftbannerlink {
    font-size:27px;
    font-weight: bold;
    line-height:27px;
    text-decoration:none;
    color:white;
    padding:0 !important;
    }
#myrightbannertext {
    display:inline-block;
    text-align:left;
    height:50px;
    font-size:17px;
    line-height:23px;
    font-weight:normal;
    vertical-align:middle;
    padding: 13px 0 10px 0;
    color:white;
    }
.menu {
    display:inline-block;
    width:84px;
    margin:1px;
    text-align:center;
    vertical-align:top;
    }
.menuButton {
    display:inline-block;
    width:60px;
    height:60px;
    margin:0;
    }
a.menuText:link {
    clear:both;
    text-align:center;
    color:white;
    text-transform:capitalize;
    text-decoration:none;
    font-size:14px;
    line-height:17px;
    }
a.menuText:visited {
    color:white;
    }
a.menuText:hover {
    color:#A4D7D2;
    }

.largeButtonContainer {
    display:inline-block;
    width:100px;
    height:50px;
    text-align:center;
    padding:0;
    }

.largeButton {
    background:url('/files/menu.png') -250px -125px no-repeat;    
    display:block;
    width:100px;
    height:50px;
    margin:auto;
    }
.largeButton:hover {background-position: -250px -185px;}
    
.homeButton {background:url('/files/menu.png') 0 0 no-repeat;}
.homeButton:hover {background-position: 0 -60px;}

.myersBriggsButton {background:url('/files/menu.png') -60px 0 no-repeat;}
.myersBriggsButton:hover {background-position: -60px -60px;}  

.jungButton {background:url('/files/menu.png') -120px 0 no-repeat;}
.jungButton:hover {background-position: -120px -60px;} 

.aboutButton {background:url('/files/menu.png') -180px 0 no-repeat;}
.aboutButton:hover {background-position: -180px -60px;}

.mmdiButton {background:url('/files/menu.png') -240px 0 no-repeat;}
.mmdiButton:hover {background-position: -240px -60px;}

.businessButton {background:url('/files/menu.png') -300px 0 no-repeat;}
.businessButton:hover {background-position: -300px -60px;}

.blogButton {background:url('/files/menu.png') -360px 0 no-repeat;}
.blogButton:hover {background-position: -360px -60px;}

.contactButton {background:url('/files/menu.png') -420px 0 no-repeat;}
.contactButton:hover {background-position: -420px -60px;}  

.twitterButton {background:url('/files/menu.png') 0 -120px no-repeat;}
.twitterButton:hover {background-position: 0 -180px;}

.facebookButton {background:url('/files/menu.png') -60px -120px no-repeat;}
.facebookButton:hover {background-position: -60px -180px;} 

.googleButton {background:url('/files/menu.png') -120px -120px no-repeat;}
.googleButton:hover {background-position: -120px -180px;} 

.cookieButton {background:url('/files/menu.png') -180px -120px no-repeat;}
.cookieButton:hover {background-position: -180px -180px;} 

#cookiediv {
    float:left;
    width:180px;
    }
    
#cookiediv > a {
    display:block;
    float:left;
    width:60px;
    height:60px;
    }
.caption {
    font-size :12px;
    line-height:14px;
    color:#345F90;
    }  
#menucontainer {
    width:100%;
    text-align:center;
    padding:0;
    margin:0;
    border:0;
    }
h2.sectionheader {
    color:white;
    font-size:1.1em;
    line-height:1.1em;
    padding:7px;
    width:100%;
    margin: 0 auto 0 auto;
    text-align:center;
    font-weight:normal;
    }
.head1 {background-color:#C3BD96;}
.head2 {background-color:#A7A7B3;}
.back1 {background-color:#F4F2EA;}
.back2 {background-color:#EEEEF2;}
.border1 {border:1px solid #C3BD96;}
.border2 {border:1px solid #A7A7B3;}
.back1, .back2 {
    margin:0;
    padding:0 0 10px 0;
    border:0;
    }
.sectiontext {
    color:#777;
    font-size:0.9em;
    line-height:1.2em;
    padding:5px;
    width:95%;
    margin:auto;
    text-align:center;
    }
.submenublock {
    position:relative;
    display:inline-block;
    width:150px;
    margin:1px;
    height:150px;
    overflow-x:hidden;
    overflow-y:hidden;
    background-color:white;
    text-align:center;
    padding:0;
    z-index:0;
    }
.submenuimage {
    width:150px;
    height:100px;
    border:0;
    margin:0;
    padding:0;
    z-index:1;
    }
.submenutitle, a.submenutitle {
    font-size:11px !important;
    line-height:14px !important;
    text-decoration:none !important;
    color:#777 !important;
    margin:0;
    border:0;
    z-index:1;
    display:block;
    }
.submenulinkcontainer {
    text-align:center;
    display:block;
    position:absolute;
    top:108px;
    left:10px;
    right:10px;
    z-index:3;
    }
.submenutext, a.submenutext:link, a.submenutext:visited, a.submenutext:hover {
    display:none;
    z-index:0;
    }
.submenublock:hover .submenutext {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:10px;
    font-size:12px !important;
    line-height:16px !important;
    text-decoration:none !important;
    text-align:justify !important;
    background-color:white !important;
    z-index:5 ;
    color:#777 !important;
    overflow-x:hidden;
    overflow-y:hidden;
    }
#mmdiblock {
    width:96%;
    margin:auto;
    clear:both;
    max-width:900px;
    }
.questioncanvas {
    overflow:auto;
    padding:5px;
    border:0;
    margin:0 0 25px 0; 
    }
.ql {
    float:left;
    width:35%;
    padding:5px 0 5px 0;
    text-align:right;
    display:table-cell;
    vertical-align:middle;
    }
.qr {
    float:right;
    width:35%;
    padding:5px 0 5px 0;
    text-align:left;
    display:table-cell;
    vertical-align:middle;
    }
.radiocontainer {
    padding:0 0 12px 0;
    margin:0 auto;
    text-align:center;
    z-index:2;
    }
input[type='text'], input[type='checkbox'], input[type='password'], select, textarea {
    background-color:#efeae3;
    color:#007;
    border:1px inset #ddf;
    padding:0 0 0 2px;
    margin:0;
    max-width:100%;
    }
textarea {
  width:95%;
  margin:auto;
  }
input[type='submit'], input[type='button'] {
    background: -webkit-linear-gradient(#315A8C, #3A6AA0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#315A8C, #3A6AA0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#315A8C, #3A6AA0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#315A8C, #3A6AA0); /* Standard syntax */
    background-color:#315A8C;
    color:white;
    border:0;
    padding:10px 10px;
    width:110px;
    text-transform: capitalize;
    margin:3px;
    }
input[type='submit']:hover, input[type='button']:hover {
    background: -webkit-linear-gradient(#315A8C, #3A6AA0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#315A8C, #3A6AA0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#315A8C, #3A6AA0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#315A8C, #3A6AA0); /* Standard syntax */
    background-color:#A4D7D2;
    color:#A4D7D2;
    border:0;
    padding:10px 10px;
    text-transform: capitalize;
    width:110px;
    margin:3px;
    }
.submit {
    text-align:center;
    }
input[type=radio]{
    display:none;
    }
input[type=radio] + label {
    content: "";  
    display: inline-block;  
    width: 24px;  
    height: 24px;  
    vertical-align:middle;
    margin: 0;  
    background-color: #ddd;  
    box-shadow: inset 0px 2px 2px #766;
    border-radius: 12px;  
}
input[type=radio]:checked + label {
    content: "\2022"; /* Bullet */
    color:blue;
    background-color: blue; 
    font-size:20px;
    text-align:center;
    line-height:14px;
 }
.indent {
    text-indent:-10px;
    padding:0 0 0 10px;
    margin:0;
    border:0;
    }


.adminlist {
    margin:10px auto;
    width:90%;
    padding:5px 15px;
    border-top:2px solid #ccc;
    font-size:16px;
    line-height:21px;
    position:relative;
    overflow:auto;
    }
.adminlist:nth-of-type(odd) {
    background-color:#f0f0ff;
    background: -webkit-linear-gradient(#f0f0ff, white);
    background: linear-gradient(#f0f0ff, white);
    }
.adminlist:nth-of-type(even) {
    background-color:#f0fff0;
    background: -webkit-linear-gradient(#f0fff0, white);
    background: linear-gradient(#f0fff0, white);
    }   
.progresscontainer {
    float:right;
    height:10px;
    width:100px;
    padding:1px;
    background-color:#eee;
    border:1px solid #A7A8C5;
    margin:6px 0;
    }
.progressbar {
    background-color:red;
    border:0;
    height:10px; 
    }
.adminlink, .adminlink a:link, .adminlink a:visited {
    font-weight:bold;
    font-size:14px;
    color:#006;
    line-height:14px;
    text-decoration:none;
    margin:6px 0;
    padding:0;
    border:0;
    }
.budgetsummary {
    clear:right;
    float:right;
    text-align: right;
    margin:0;
    padding:4px 0 5px 0;
    font-size:11px;
    line-height:14px;
    color:#666;
    }
.projectdate {
    margin:0;
    padding:6px 0;
    font-size:11px;
    line-height:11px;
    color:#666;
    }
.greyedout {
    font-size:11px;
    line-height:11px;
    margin:6px 8px 6px 4px;
    background-color:#aaa;
    color:#eee;
    text-align:center;
    border:0;
    padding:10px 15px;
    width:61px;
    }
.center {
  display:block;
  margin:auto;
  }

.closedlist {
    margin:10px auto;
    width:630px;
    padding:5px 15px;
    border-top:2px solid #999;
    font-size:16px;
    line-height:21px;
    position:relative;
    overflow:auto;
    }
.closedlist:nth-of-type(odd) {
    background-color:#bbbbbb;
    background: -webkit-linear-gradient(#bbbbbb, #dddddd);
    background: linear-gradient(#bbbbbb, #dddddd);
    }
.closedlist:nth-of-type(even) {
    background-color:#cccccc;
    background: -webkit-linear-gradient(#cccccc, #eeeeee);
    background: linear-gradient(#cccccc, #eeeeee);
    } 
.infobox {
  text-align:center;
  }
.redalert {
  text-align:center;
  border:1px solid black;
  background-color:yellow;
  font-weight:bold;
  padding:10px;
  overflow:hidden;
  min-width:250px;
  max-width:90%;
  margin:auto;
  max-height:9999px;
  }
.light {
  background-color:#E3EDF6;
  }

div#catbar::-webkit-scrollbar {height:12px;} 
div#catbar::-webkit-scrollbar-track {background-color: #B2CEE6;} 
div#catbar::-webkit-scrollbar-thumb {background-color: #35AED1;}
div#catbar::-webkit-scrollbar-button {background-color: white; color:#8CABC2;}

.override {
  position:absolute;
  top:0;
  left:0;
  z-index:999;
  }

.loginlink {
  background: -webkit-linear-gradient(#315A8C, #3A6AA0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#315A8C, #3A6AA0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#315A8C, #3A6AA0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#315A8C, #3A6AA0); /* Standard syntax */
  background-color:#315A8C;
  display:inline-block;
  width:90px;
  height:28px;
  color:white;
  text-transform: capitalize;
  margin:3px;
  border:0;
  padding:10px;
  text-align:center;
  }
.inlineform {
  display:inline-block;
  margin:0;
  padding:0;
  border:0;
  background-color:white;
  color:#00f;
  }
.inlineform:hover {
  display:inline-block;
  margin:0;
  padding:0;
  border:0;
  background-color:#ddf;
  color:#00f;
  }