|
|
| Line 3: |
Line 3: |
| | <head> | | <head> |
| | | | |
| − | <style type="text/css">
| |
| − | body {
| |
| − | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, serif;
| |
| − | font-size: 16px;
| |
| − | line-height: 1.5em;
| |
| − | color: #6b3b25;
| |
| − | background: url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/bg.png);
| |
| − | }
| |
| − | .wrapper {
| |
| − | width: 1000px;
| |
| − | margin: 30px auto 80px auto;
| |
| − | background: #dedad3;
| |
| − | -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
| |
| − | -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
| |
| − | -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
| |
| − | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
| |
| − | }
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − | /* HEADER
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − | header {
| |
| − | background: url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/header.png);
| |
| − | min-height: 155px;
| |
| − | }
| |
| − | header #logo {
| |
| − | margin-top: 36px;
| |
| − | margin-bottom: 20px;
| |
| − | float: left;
| |
| − | }
| |
| − | header #logo:hover {
| |
| − | opacity: 0.8;
| |
| − | }
| |
| − | header #logo img {
| |
| − | display: block;
| |
| − | margin: 0 0 0 55px;
| |
| − | }
| |
| − | header #title {
| |
| − | margin-top: 45px;
| |
| − | margin-left: 260px;
| |
| − | font-size: 36px;
| |
| − | font-weight: 700;
| |
| − | text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5);
| |
| − | /* text-align: center; */
| |
| − | }
| |
| − | header #subtitle{
| |
| − | margin-top: 26px;
| |
| − | margin-left: 260px;
| |
| − | font-size: 23px;
| |
| − | font-weight: 500;
| |
| − | text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5);
| |
| − | }
| |
| − | /*---------------------------------------------------------------*/
| |
| − |
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − | /* Nav
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − | nav {
| |
| − | background: url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/nav.png) no-repeat top center;
| |
| − | height: 65px;
| |
| − | width: 1038px;
| |
| − | margin-left: -20px;
| |
| − | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
| |
| − | font-size: 16px;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − | nav #menu-icon {
| |
| − | display: none;
| |
| − | background: red;
| |
| − | width: 40px;
| |
| − | height: 40px;
| |
| − | }
| |
| − | nav #nav {
| |
| − | display: block;
| |
| − | margin-left: 35px;
| |
| − | /* substract 15 from the link padding */
| |
| − |
| |
| − | }
| |
| − | nav #nav > li {
| |
| − | display: block;
| |
| − | float: left;
| |
| − | /* Subnavigation ----------------------------------------------------*/
| |
| − | }
| |
| − | nav #nav > li:hover a,
| |
| − | nav #nav > li.current-menu-item a,
| |
| − | nav #nav > li.current_page_item a {
| |
| − | background: #62493d;
| |
| − | text-shadow: 0px 2px 0px #444;
| |
| − | }
| |
| − | nav #nav > li > a {
| |
| − | display: block;
| |
| − | line-height: 65px;
| |
| − | padding-left: 15px;
| |
| − | padding-right: 15px;
| |
| − | text-decoration: none;
| |
| − | color: #dedad3;
| |
| − | text-shadow: 0px 2px 0px #c68301;
| |
| − | }
| |
| − | nav #nav > li.important a {
| |
| − | color: #ffe09f;
| |
| − | }
| |
| − | nav #nav > li ul {
| |
| − | margin-top: 25px;
| |
| − | background: #62493d;
| |
| − | }
| |
| − | nav #nav > li ul li {
| |
| − | border-bottom: 1px solid #806d63;
| |
| − | }
| |
| − | nav #nav > li ul li:last-child {
| |
| − | border-bottom: none;
| |
| − | }
| |
| − | nav #nav > li ul a {
| |
| − | display: block;
| |
| − | color: #dedad3;
| |
| − | text-decoration: none;
| |
| − | line-height: 1.5em;
| |
| − | padding: 15px;
| |
| − | }
| |
| − | nav #nav > li ul a:hover {
| |
| − | color: #e09402;
| |
| − | }
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − |
| |
| − | /*** ESSENTIAL STYLES ***/
| |
| − |
| |
| − | .sf-menu, .sf-menu * {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | }
| |
| − |
| |
| − | .sf-menu ul {
| |
| − | position: absolute;
| |
| − | top: -999em;
| |
| − | width: 10em; /* left offset of submenus need to match (see below) */
| |
| − |
| |
| − | }
| |
| − | .sf-menu ul li {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .sf-menu li:hover {
| |
| − | visibility: inherit; /* fixes IE7 'sticky bug' */
| |
| − | }
| |
| − | .sf-menu li {
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | }
| |
| − | .sf-menu a {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | }
| |
| − | .sf-menu li:hover ul,
| |
| − | .sf-menu li.sfHover ul {
| |
| − | left: 0;
| |
| − | top: 2.5em; /* match top ul list item height */
| |
| − | z-index: 99;
| |
| − | }
| |
| − | ul.sf-menu li:hover li ul,
| |
| − | ul.sf-menu li.sfHover li ul {
| |
| − | top: -999em;
| |
| − | }
| |
| − | ul.sf-menu li li:hover ul,
| |
| − | ul.sf-menu li li.sfHover ul {
| |
| − | left: 10em; /* match ul width */
| |
| − | top: 0;
| |
| − | }
| |
| − | ul.sf-menu li li:hover li ul,
| |
| − | ul.sf-menu li li.sfHover li ul {
| |
| − | top: -999em;
| |
| − | }
| |
| − | ul.sf-menu li li li:hover ul,
| |
| − | ul.sf-menu li li li.sfHover ul {
| |
| − | left: 10em; /* match ul width */
| |
| − | top: 0;
| |
| − | }
| |
| − | /* MAIN
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − | #main {
| |
| − | min-height: 500px;
| |
| − | position: relative;
| |
| − | border-top: 5px solid #c6c2bc;
| |
| − | }
| |
| − | #main .tagline {
| |
| − | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
| |
| − | line-height: 1.3em;
| |
| − | font-size: 36px;
| |
| − | font-weight: 700;
| |
| − | text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.5);
| |
| − | text-align: center;
| |
| − | margin-bottom: 40px;
| |
| − | margin-right: 30px;
| |
| − | margin-left: 30px;
| |
| − | }
| |
| − |
| |
| − | /* cf: contain floats*/
| |
| − |
| |
| − | .cf:before,
| |
| − | .cf:after {
| |
| − | content: " "; /* 1 */
| |
| − | display: table; /* 2 */
| |
| − | }
| |
| − |
| |
| − | .cf:after {
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | * For IE 6/7 only
| |
| − | * Include this rule to trigger hasLayout and contain floats.
| |
| − | */
| |
| − |
| |
| − | .cf {
| |
| − | *zoom: 1;
| |
| − | }
| |
| − |
| |
| − | /* ==========================================================================*/
| |
| − |
| |
| − | .slider-wrapper{
| |
| − | margin: 30px auto 0px auto;
| |
| − | width: 940px;
| |
| − | }
| |
| − |
| |
| − | /* The Nivo Slider styles */
| |
| − | .nivoSlider {
| |
| − | position:relative;
| |
| − | width:100%;
| |
| − | height:auto;
| |
| − | overflow: hidden;
| |
| − |
| |
| − | border: 5px solid #fff;
| |
| − | margin-left: -5px; /* Adjust 5px because of the border width 5px*/
| |
| − |
| |
| − | -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.2);
| |
| − | -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.2);
| |
| − | -o-box-shadow: 0px 0px 5px rgba(0,0,0,.2);
| |
| − | box-shadow: 0px 0px 5px rgba(0,0,0,.2);
| |
| − |
| |
| − | }
| |
| − | .nivoSlider img {
| |
| − | position:absolute;
| |
| − | top:0px;
| |
| − | left:0px;
| |
| − | max-width: none;
| |
| − | }
| |
| − |
| |
| − | .nivo-main-image {
| |
| − | display: block !important;
| |
| − | position: relative !important;
| |
| − | width: 100% !important;
| |
| − | }
| |
| − |
| |
| − | /* If an image is wrapped in a link */
| |
| − | .nivoSlider a.nivo-imageLink {
| |
| − | position:absolute;
| |
| − | top:0px;
| |
| − | left:0px;
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | border:0;
| |
| − | padding:0;
| |
| − | margin:0;
| |
| − | z-index:6;
| |
| − | display:none;
| |
| − | }
| |
| − | /* The slices and boxes in the Slider */
| |
| − | .nivo-slice {
| |
| − | display:block;
| |
| − | position:absolute;
| |
| − | z-index:5;
| |
| − | height:100%;
| |
| − | top:0;
| |
| − | }
| |
| − | .nivo-box {
| |
| − | display:block;
| |
| − | position:absolute;
| |
| − | z-index:5;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − | .nivo-box img { display:block; }
| |
| − |
| |
| − | /* Caption styles */
| |
| − | .nivo-caption {
| |
| − | position:absolute;
| |
| − | left:0px;
| |
| − | bottom:0px;
| |
| − | background:#000;
| |
| − | color:#fff;
| |
| − | width:100%;
| |
| − | z-index:8;
| |
| − | padding: 5px 10px;
| |
| − | opacity: 0.8;
| |
| − | overflow: hidden;
| |
| − | display: none;
| |
| − | -moz-opacity: 0.8;
| |
| − | filter:alpha(opacity=8);
| |
| − | -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
| |
| − | -moz-box-sizing: border-box; /* Firefox, other Gecko */
| |
| − | box-sizing: border-box; /* Opera/IE 8+ */
| |
| − | }
| |
| − | .nivo-caption p {
| |
| − | padding:5px;
| |
| − | margin:0;
| |
| − | }
| |
| − | .nivo-caption a {
| |
| − | display:inline !important;
| |
| − | }
| |
| − | .nivo-html-caption {
| |
| − | display:none;
| |
| − | }
| |
| − | /* Direction nav styles (e.g. Next & Prev) */
| |
| − | .nivo-directionNav a {
| |
| − | position:absolute;
| |
| − | top:45%;
| |
| − | z-index:9;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − | .nivo-prevNav {
| |
| − | left:0px;
| |
| − | }
| |
| − | .nivo-nextNav {
| |
| − | right:0px;
| |
| − | }
| |
| − | /* Control nav styles (e.g. 1,2,3...) */
| |
| − | .nivo-controlNav {
| |
| − | text-align:left;
| |
| − | padding: 10px 0 15px 0px;
| |
| − | }
| |
| − | .nivo-controlNav a {
| |
| − | display: inline-block;
| |
| − | cursor:pointer;
| |
| − | background: #62493d;
| |
| − | width: 10px;
| |
| − | height: 10px;
| |
| − | text-indent: -9000px;
| |
| − | margin-right: 5px;
| |
| − |
| |
| − | -moz-border-radius: 10px;
| |
| − | -webkit-border-radius: 10px;
| |
| − | border-radius: 10px;
| |
| − |
| |
| − | border: 2px solid #f1f1f1;
| |
| − | border-top: 2px solid #ffffff;
| |
| − |
| |
| − | -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
| |
| − | -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
| |
| − | -o-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
| |
| − | box-shadow: 0px 0px 2px rgba(0,0,0,.2);
| |
| − | }
| |
| − | .nivo-controlNav a.active {
| |
| − | background: #e09402;
| |
| − | }
| |
| − |
| |
| − | /* Widgets block
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − | .widget-cols {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | background: #62493d url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/widgets.png) repeat;
| |
| − | font-size: 16px;
| |
| − | color: #e7d7ba;
| |
| − | text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.5);
| |
| − | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
| |
| − | border-top: 4px solid #e09402;
| |
| − | padding-left: 10px;
| |
| − | padding-top: 10px;
| |
| − | margin: auto;
| |
| − | height:220px;
| |
| − | }
| |
| − | .widget-cols h1,
| |
| − | .widget-cols h2,
| |
| − | .widget-cols h3,
| |
| − | .widget-cols h4,
| |
| − | .widget-cols h5,
| |
| − | .widget-cols h6 {
| |
| − | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial;
| |
| − | color: #e09402;
| |
| − | margin-bottom: 20px;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − | .widget-cols a {
| |
| − | color: #e09402;
| |
| − | border-bottom: 1px dotted #e09402;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | .widget-cols a:hover {
| |
| − | color: #fff;
| |
| − | border-bottom: 1px dotted #fff;
| |
| − | }
| |
| − | .widget-cols > li {
| |
| − | width: 220px;
| |
| − | float: left;
| |
| − | margin-left: 20px;
| |
| − | margin-bottom: 40px;
| |
| − | }
| |
| − | .widget-cols .scroll {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | top: -40px;
| |
| − | left: 50%;
| |
| − | margin-left: -23px;
| |
| − | background: url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/bottom-arrow.png) no-repeat;
| |
| − | height: 41px;
| |
| − | width: 46px;
| |
| − | }
| |
| − | .widget-cols .scroll:hover {
| |
| − | background-position: 0px -41px;
| |
| − | }
| |
| − | .multiplebgs .widget-cols {
| |
| − | background-image: url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/widgets-shadow.png), url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/widgets.png);
| |
| − | background-repeat: repeat-x, repeat;
| |
| − | background-position: left bottom, left bottom;
| |
| − | }
| |
| − |
| |
| − | .footer-divider {
| |
| − | background: #5a453b;
| |
| − | border-top: 1px solid #644d42;
| |
| − | border-bottom: 1px solid #523f35;
| |
| − | height: 8px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | /* FOOTER
| |
| − | /*-----------------------------------------------------------------------------------*/
| |
| − | footer {
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | padding: 30px 30px 30px 30px;
| |
| − | font-size: 18px;
| |
| − | color: #e09402;
| |
| − | background: #62493d url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/footer.png) repeat-x center top;
| |
| − | text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.5);
| |
| − | }
| |
| − | footer:after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | bottom: -46px;
| |
| − | height: 46px;
| |
| − | width: 100%;
| |
| − | width: 940px\9;
| |
| − | background: url(https://raw.githubusercontent.com/sjtusoftware2018/2018iGEM_wiki/master/images/main-shadow.png) no-repeat top center;
| |
| − | }
| |
| − | footer a {
| |
| − | text-decoration: none;
| |
| − | color: #e09402;
| |
| − | border-bottom: 1px dotted #e09402;
| |
| − | }
| |
| − | footer a:hover {
| |
| − | color: #fff;
| |
| − | border-bottom: 1px dotted #fff;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| | | | |
| | <body> | | <body> |
