/* since the background is dark, we change the color of the text and links so they are visible on "show preview" mode */
   #bodyContent p {
    margin:0;
    padding:0;
    border:0;
   }

    p, #content {
        color:#808284;
    }

    .firstHeading {
      display:none;
    }

    a, a:visited {
        color:#22BCB9;
    }

    ul {
    margin: 0;
    }

    /* PAGE LAYOUT */
    /* Set up a width, height and color of the body wrapper*/

   #content {
    width:100%;
    margin:0;
    padding:0;
   }

    body {
        font: x-small sans-serif;
        background-color: white !important;
    }

    /* Creates a container that will wrap all of the content inside your wiki pages. */
    #mainContainer {  
        width: 100%;
        overflow:hidden;
        float:left;
        margin-bottom: 10px;
        background-color: #fff; 
    }

    /* Creates the container for the menu */
    #menuContainer  { 
        font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
        font-size: 9pt;
        width: 100%;
        position: absolute;
        top: 0px;
        float: left;
        margin: 0;
        text-align: center;
    }

    #menuContainer #oplayer {
        opacity: 0.5;
        position: absolute;
        width: 100%;
        height: 40px;
        background-color: #000;
    }

    /* Creates the container for the content */
    #contentContainer {
        padding-top:20px;
        padding-right:10px;
        margin-bottom: 20px;
        width: 800px;
        padding-left: 20px;
        float: left;
        font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }


    /*Set up height place holder for the banner*/
    #bannerContainer {
        width: 100%;
        margin:0;
        height: 650px;
        text-align:center;
        color: #24B694;
        background: url("http://2015.igem.org/wiki/images/1/1e/SYSU-Software_Bg.jpg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size:100% auto;
    }

    #title {
      height: 700px;
      padding-top: 140px;
    }

    #title h2 {
        font-size: 50pt;
        color: black;
    }

    #flame {
        color: #399e80 !important;
        font-size: 30pt;
        margin: 0px;
    }

    #title p {
        margin-top: 200px;
        font-size: 12pt;
        font-family:"MV Boli";
    }


    /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */

    /*Change the styling of text for everything inside main container*/
    #mainContainer p { 
        color: #000000;
    }

    #contentContainer {
        font-family: Arial;
        font-size: 20pt;
        width: 945px;
        float: right;
    }

    /*This changes the color and font family */
    #contentContainer h1, h2, h3, h4, h5, h6 { 
        font-family:"MV Boli", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        color: #399e80 ;
        padding: 0;
        border-bottom: none;
    }

    #contentContainer h1 {
        font-size: 40pt;
    }

    /*Style of the links - links are different inside the menu */
    #contentContainer a { 
        font-weight: bold;
        color: #22BCB9;
    }

    /* Styling links on hover- links are different inside the menu */
    #contentContainer a:hover { 
        color: #14747D;
    }

    /*Change the styling of tables */
    #contentContainer table {
            margin: auto;
            margin-bottom: 15px;
            margin-top: 15px;
            margin-right: 10px;
            margin-left: 10px;
        }

    /*Change the styling of table cells*/
        #contentContainer  td {
            background-color: #fff;
            padding: 10px;
            vertical-align: text-top;
        }


    /*Change the styling of table headers */
        #contentContainer th {
            background-color: #F4F0D8;
            padding: 10px;
            vertical-align: text-top;
        }




    /*MENU STYLING */

    /*Styling for the links in the menu */

    #menuContainer a {
        color: #fff;
        text-decoration:none;
        font-weight: bold;
    }

    /* Sets the style for lists inside menuContainer  */
    #menuContainer ul { 
        list-style: none;
    }

    /*Styles the list items to become menu buttons */
    #menuContainer ul li { 
        height: 30px;
        padding-top: 10px;
        padding-left: 3px;
        padding-right: 3px;
        display: block;
        float: left;
        margin-left: 10px;
        position: relative;
        margin-bottom: 0;
    }

    /*For the menu buttons, changes the color when hovering*/
    #menuContainer li:hover {
        color:  #FFF;
        background-color: #14747D;
    }

    /*Submenus are not displayed as default*/
    #menuContainer li ul {
        display: none;
        padding-top:15px;
        margin-left: -19px;
    }

    /*Submenus are displayed when hovering the menu button */
    #menuContainer li:hover ul {
        /*display: inline-block; */
        display: block; 
        position: absolute; 
        float:none;
        margin-top: -2px;
        left: 9px;

    }

    /*Style the submenu buttons*/
    #menuContainer li ul li{
        background-color: #22BCB9; 
        padding-left:20px;
        padding-right:20px;
        height: 35px;
        padding-top:10px;
        margin-top:-2px;
        color: #28221E;
        width: 175px;
        float: none;
        text-align: center;
        opacity: 1;
    }

    /*CLASSES */

    /*Clear class for all the pages, adds spacing too*/
    .clear{
        clear:both;
        height: 10px;
    }

    /* highlight box for special messages */
  .highlightBox {
        width:500px; 
        margin:auto; 
        background-color: #F4F0D8; 
        margin-bottom: 15px;
        margin-top: 15px;
        padding: 15px;
        padding-top: 5px;
}