html, body {
    height: 100%;
    line-height: 1.375;
}

@font-face{
    font-family: "OpenSans";
    src: url('./resources/Open_Sans/OpenSans-Regular.ttf'),
    url('./resources/Open_Sans/OpenSans-Regular.ttf'); /* IE */
}

* {
    font-family: "OpenSans";
    /*font-size: 104%;*/
}

h5 {
    margin: 0;
    background-color: LightGray;
}

.infoBox > h4 {
    padding: 1em 0 1em 1.67em;
}

p {
    margin: 0;
}

a {
    color: #ffffff;
    text-decoration: none;
}

article {
    margin: 0;
    padding: 0;
}

header {
    position: relative;
    height: 20em;
    width: 80%;
    background-color: #002b36;
    top: 0;
    z-index: -100;
}

.mainHeader{
    color: white;
    font-size: 3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-shadow:2px 2px black; 
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.15em;
    background-color: rgba(7, 54, 66, 0.8);
}
#headerDiv {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin: 0;
}

article {
    padding: 1em;
    margin: 0 auto;
    max-width: 42em
}

footer {
    padding: 1.5em;
    background-color: gray;
}

nav {
    position: fixed;
    width: 20%;
    min-height: 120%;
    right: 0;
    top: -20px;
    float: right;
    background-color: #002b36;
    margin: 0;
    padding: 0;
}

#magic-line {
    width: 100%;
    position: absolute;
    background: #073642;
    z-index: -10;
}

.shadow{
    pointer-events: none;
    position: absolute;
    width: 100%;
    min-height: 120%;
    right: 0;
    top: -20px;
    float: right;
    box-shadow: inset 5px 0px 25px 2px;
}


nav > ul {
    padding: 2em 0em 2em 0;
    margin: 0
}

nav > ul > li > a {
    padding: 0.5em 2em;
    display: block;
}

nav > ul > li {
    list-style-type: none;
}

div#maincontent-container {
    width: 100%;
    box-shadow: -10px -5px 25px 20px white;
    z-index: 10;
    background-color: white;
}
div#maincontent {
    position: relative;
    width: 80%;
    margin: 0;
    padding: 0;
    z-index: 10;
    background-color: white;
}

/*A bit of a hack to fix the jquery slide toggle*/
div#panel {
    border: 1px solid transparent;
}

img#profilePic {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 150px;
    max-height: 150px;
}
span#imgDiv {
    padding: 0 1em 0 1em;
    float: right;
}

.infoBox > h4 {
    background-color: LightGray;
    margin: 0;
}

div.infoBox > div > p{
    background-color: #E8E8E8;
    padding: 1.67em;
}

.showhide > div.heading {
    background-color: LightGray;
    margin: 0;
    overflow: hidden;
}

.showhide > div.heading > h4, h5 {
    display: inline-block;
    padding: 1em 0 1em 2em;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
}

.plusminus {
    float: right;
    display: inline-block;
    padding: 0em 1em 0em 0em;
    font-size: 1.66em;
}

.plusminus > i {
    display: inline-block;
    vertical-align: middle;
}

.fa-plus {
    color: white;
  text-shadow:
   -1px -1px 0 DarkGray,  
    1px -1px 0 DarkGray,
    -1px 1px 0 DarkGray,
     1px 1px 0 DarkGray;
}
.fa-minus {
    color: white;
      text-shadow:
   -1px -1px 0 DarkGray,  
    1px -1px 0 DarkGray,
    -1px 1px 0 DarkGray,
     1px 1px 0 DarkGray;
}

div.infoBox > div > div > p {
    background-color: #E8E8E8;
    padding: 1.67em;
}

.circular {
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.coverDiv {
    top: 0;
    text-align: center;
    color: #fff;
    position: absolute;
    z-index: -101;
}