@font-face {
    font-family: gill_sans_light;
    src: url('http://2016.igem.org/wiki/images/7/77/SYSU-Software-Gill_sans_light.otf');
}
@font-face {
    font-family: generica_regular;
    src: url('http://2016.igem.org/wiki/images/0/09/SYSU-Software-Generica_regular.otf');
}
#myhtml body {
    font-family: gill_sans_light;
    background-image: url('http://2016.igem.org/wiki/images/f/f6/SYSU-Software-Shortcut.png');
    margin:0;
    padding: 0;
    text-align: center;
    font-style: bold;
    min-width: 1000px;
}

#myhtml #mybody ul {
    padding: 0;
    margin: 0;
}

#myhtml #mybody #ME_MA img, #myhtml #mybody #EX_DE img, #myhtml #mybody #RE_DI img{
    position: relative;
    top:4px;
}

#myhtml #mybody #EX_P, #myhtml #mybody #RE_DI {
    line-height: 40px;
    color: rgb(25,25,25);
}
#myhtml #mybody #EX_P ul {
    overflow: hidden;
    margin-left: 22%;
    margin-bottom: 100px;
}
#myhtml #mybody #EX_P li {
    float: left;
    list-style-type:none;
}
#myhtml #mybody #EX_P p {
    display: table;
    margin:0 auto;
    font-size: 17px;
}
#myhtml #mybody #ME_MA, #myhtml #mybody #EX_DE, #myhtml #mybody #RE_DI {
    margin-top: 100px;
    font-size: 32px;
    color: rgb(153,153,153);
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-style: bold;
}
#myhtml #mybody #Growth_Conditions, #myhtml #mybody #SDT, #myhtml #mybody #FITC,#myhtml #mybody #LUDOX, #myhtml #mybody #MF {
    margin-top: 100px;
}
#myhtml #mybody #ASin {
    position:relative;
    left:4%;
    width: 96%;
}
#myhtml #mybody #GC_title, #myhtml #mybody #LUDOX_title {
    margin-top: 100px;
    font-size: 24px;
    font-style: bold;
    color: rgb(25,25,25);
    margin-bottom: 20px;
    text-align: left;
    margin-bottom: 40px;
    margin-left: 15%;
}
#myhtml #mybody #GC_title img,  #myhtml #mybody #SDT_title img {
    position: relative;
    bottom:5px;
}
#myhtml #mybody #GC_P, #myhtml #mybody #SDT_P, #myhtml #mybody #FITC_P,#myhtml #mybody #LUDOX_P, #myhtml #mybody #MF_P {
    line-height: 40px;
    color: rgb(25,25,25);
}
#myhtml #mybody #GC_P ul,#myhtml #mybody #LUDOX_P ul {
    width:30%;
    margin-left: 15%;
    overflow: hidden;
    margin-bottom: 100px;
}
#myhtml #mybody #GC_P li,#myhtml #mybody #SDT_P li, #myhtml #mybody #FITC_P li, #myhtml #mybody #LUDOX_P li, #myhtml #mybody #MF_P li {
    display: inline-block;
    float: left;
    list-style-type:none;
}
#myhtml #mybody #GC_P p, #myhtml #mybody #SDT_P p, #myhtml #mybody #FITC_P p, #myhtml #mybody #LUDOX_P p, #myhtml #mybody #MF_P p {
    display: table;
    margin:0 auto;
    font-size: 17px;
}
#myhtml #mybody #SDT_title {
    margin-top: 100px;
    font-size: 24px;
    font-style: bold;
    color: rgb(25,25,25);
    margin-bottom: 20px;
    margin:auto;
    margin-bottom: 40px;
}
#myhtml #mybody #SDT_P ul {
    width:35%;
    margin-left: 30%;
    margin:auto;
    overflow: hidden;
    margin-bottom: 100px;
}
#myhtml #mybody #FITC_title {
    margin-top: 100px;
    font-size: 24px;
    font-style: bold;
    color: rgb(25,25,25);
    margin-bottom: 20px;
    /*margin:auto;*/
    position:relative;
    left:18%;
    width: 82%;
    margin-bottom: 40px;
}
#myhtml #mybody #FITC_P ul {
/*     width:30%;
margin:auto; */
    overflow: hidden;
    margin-bottom: 100px;
    position:relative;
    left:18%;
    width: 82%;
}
#myhtml #mybody #MF_title {
    margin-top: 100px;
    font-size: 24px;
    font-style: bold;
    color: rgb(25,25,25);
    margin-bottom: 20px;
    /*margin:auto;*/
    position:relative;
    left:15%;
    width: 85%;
    margin-bottom: 40px;
}
#myhtml #mybody #MF_P ul {
    width:60%;
    /*margin:auto;*/
    overflow: hidden;
    margin-bottom: 100px;
    position:relative;
    left:24%;
    width: 76%;
}
#myhtml #mybody #ABS {
    text-align: center;
    font-size: 24px;
    font-style: bold;
    margin-top: 70px;
    margin-bottom: 30px;
}
#myhtml #mybody #Fluorescence {
    text-align: center;
    font-size: 24px;
    font-style: bold !important;
    margin-top: 130px;
    margin-bottom: 30px;
}
/* #SDT_title img {
    position: relative;
    bottom:5px;
} */
#myhtml #mybody #RE_DI_P ul {
    overflow: hidden;
    margin-left: 20%;
    margin-bottom: 100px;
}
#myhtml #mybody #RE_DI_P li, #myhtml #mybody #FIG2_P li, #myhtml #mybody #FIG4_P li {
    float: left;
    list-style-type:none;
    line-height: 40px;
}
#myhtml #mybody #RE_DI_P p, #myhtml #mybody #FIG2_P p, #myhtml #mybody #FIG4_P p {
    display: block;
    margin:0 auto;
    font-size: 17px;
}
#myhtml #mybody .ph p {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 60px;
}
#myhtml #mybody #Flu_des {
    font-size: 20px;
    margin-top: 50px;
    margin-bottom: 80px;
}
#myhtml #mybody #FIG2_P ul {
    width:70%;
    overflow: hidden;
    margin-left: 20%;
    margin-top: 105px;
    margin-bottom: 70px;
}
#myhtml #mybody #FIG4_P ul {
    overflow: hidden;
    margin-left: 20%;
    margin-top: 105px;
    margin-bottom: 70px;
}
#myhtml #mybody #FV1, #myhtml #mybody #FV2, #myhtml #mybody #FV3 {
    margin-top: 150px;
}
#myhtml #mybody #footer {
    margin-top: 200px;
    opacity: 0.5;
}
#myhtml #mybody ul li {
    opacity: 0.75;
}




/* add by hym */


#myhtml #mybody #menuContainer .logo {
	/*float: left;*/
	display: inline-block;
    margin: 10px 20px;
    transition: all 0.1s;
    -moz-transition: all 0.1s; /* Firefox 4 */
    -webkit-transition: all 0.1s; /* Safari 和 Chrome */
    -o-transition: all 0.1s;
    position:relative;
    top:4px;
}

#myhtml #mybody #menuContainer .logo.scroll {
    /*float: left;*/
    display: inline-block;
    margin: 0px 20px;
}

#myhtml #mybody #menuContainer ul li {
   box-sizing:content-box;
}

#myhtml #mybody #menuContainer a {
    text-decoration: none;
    outline-style: none;
    color: #6c78ef;
}


#myhtml #mybody #menuContainer a:active {
    text-decoration: none;
    outline-style: none;
    color: rgba(43, 210, 174, 1);
}

#myhtml #mybody #menuContainer a:hover {
    text-decoration: none;
    outline-style: none;
    color: rgba(43, 210, 174, 1);   
}
/* Creates a container that will wrap all of the content inside your wiki pages. */
#myhtml #mybody #mainContainer {
    width: 100%;
    margin-bottom: 15px;
    overflow:hidden;
}

/* Creates the container for the menu */
/*MENU STYLING */
/*Styling for the links in the menu */

#myhtml #mybody #menuContainer  { 
    font-family: gill_sans_light;
    font-size: 20px;
    width: 100%;
    /*height: 40px;*/
    top:0px;
    position: fixed;
    text-align: center;
    z-index:100;
    background-color: #000;
/*     background-color: rgb(229,229,229); */
    opacity: 0.7;
}

#myhtml #mybody #menuContainer #oplayer {
    opacity: 0.7;
    position: fixed;
    width: 100%;
    /*height: 40px;*/
    background-color: #000;
    z-index: -1;
}

#myhtml #mybody #menuContainer #igem_logo {
    margin-left: 80px;
    height: 60px;
    width: 100px;
    float: left;
    background-image: url("http://2016.igem.org/wiki/images/6/6c/SYSU-Software-Navigator-craft_logo.png");
    background-position: center;
    background-size: 40px 40px;
    text-align: center;
}

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

#myhtml #mybody #menuContainer  #menu {
    /*float: left;*/
    /*margin-left: 34px;*/
    width:85%;
    display: inline-block;
}

/* Sets the style for lists inside menuContainer  */
#myhtml #mybody #menuContainer  #menu ul {
    height: 40px;
    width:100%
    /*width: 1100px;*/ /*this is going to be modified*/
    list-style: none;
    clear: both;
    margin: 0 auto;
}

/*Styles the list items to become menu buttons */
#myhtml #mybody #menuContainer ul li {
    height: 30px;
    padding-top: 10px;
    padding-left: 1.2%;
    padding-right: 1.2%;
    display: block;
    float: left;
    position: relative;
    right:5%;
    /* margin-top:-4px;*/
}

#myhtml #mybody #menuContainer ul li:hover .bar {
    height: 5px;
    margin-top: 5px;
    background-color: rgb(40,148,169);
}

/*For the menu buttons, changes the color when hovering*/
#myhtml #mybody #menuContainer li {
    transition: all 1s;
    -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari 和 Chrome */
    -o-transition: all 1s;
}

#myhtml #mybody #menuContainer li:hover {
    /* color:  #FFF;this is going to be modified
    background-color: #a8a9a9;this is going to be modified */
}

/*Submenus are not displayed as default*/
#myhtml #mybody #menuContainer li ul {
    width: 100%;
    position: fixed;
    top: 56px;
    left: 0px;
    padding-left: 150px;
    visibility: hidden;
    opacity: 0;
}

/*Submenus are displayed when hovering the menu button */
#myhtml #mybody #menuContainer li:hover ul {
    /*display: inline-block; */
    visibility: visible;
    opacity: 1;
    height: 30px;
    position: fixed;
    top: 56px;
    float:left;
}

#myhtml #mybody #menuContainer li:hover #sub_oplayer {
    visibility: visible;
    opacity: 0.3;
}

/*Style the submenu buttons*/
#myhtml #mybody #menuContainer li ul li{
    color: #313131;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    height: 30px;
    overflow: hidden;
    width: auto;
    display: block;
    float: left;
    text-align: center;
    opacity: 1;
}

/* #menuContainer li ul li:hover{
    background-color: inherit;
color: gray;
}

#menuContainer li ul li:hover {
color: gray;
} */

#myhtml #mybody #menuContainer #team {
   left:50%;
}




#myhtml #mybody .mid-navigator-wrapper {
    padding:0 100px;
    background-image: url('http://2016.igem.org/wiki/images/8/81/SYSU-Software-Mid_navi-background.png');
    /* background-color: blue; */
    position: relative;
    bottom:15px;
    height: 60px;
    line-height: 60px;
}

#myhtml #mybody .mid-navigator-wrapper .mid-navigator-container {
/*     background-color: black; */
}

#myhtml #mybody .mid-navigator-wrapper .mid-navigator-container div {
/*     background-color: black; */
    /*float: left;*/
/*     background-image: url('assets/mid_navi/background.png'); */
    display: inline-block;
    height: 60px;
    line-height: 60px;
    width: 32.85%;
    /*margin: 0 auto;*/
    /* padding: 0 10px; */
    color: white;
    font-weight: bold;
    transition: all 1s;
    -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari 和 Chrome */
    -o-transition: all 1s;
}
#myhtml #mybody .mid-navigator-wrapper .mid-navigator-container div:hover {
    background-color: black;
    cursor: pointer;
}

#myhtml #mybody .mid-navigator-wrapper .mid-navigator-container .float-clearer {
    clear: both;
}

#myhtml #mybody .banner {
     width:100%;
     background-image: url('http://2016.igem.org/wiki/images/d/d2/Banner_bottom.png');
     background-position: center;
     height: 690px;
}
/* added by YL */
#myhtml #mybody #banner_button {
    position:relative;
    bottom:105px;
    margin-left: auto;
    margin-right: auto;
}
#myhtml #mybody #Intro_P li {
    text-align: center;
    font-size:16px;
    list-style-type:none;
    position: relative;
    bottom:350px;
    color: white;
    font-style:bold;
}