|
|
| Line 10: |
Line 10: |
| | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> |
| | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
| | + | <link rel="stylesheet" href="https://2016.igem.org/Team:HUST-China/css/index?action=raw&ctype=text/css"> |
| | <link rel="stylesheet" href="https://2016.igem.org/Team:HUST-China/css/material-cards-auto-height?action=raw&ctype=text/css"> | | <link rel="stylesheet" href="https://2016.igem.org/Team:HUST-China/css/material-cards-auto-height?action=raw&ctype=text/css"> |
| | <style type="text/css"> | | <style type="text/css"> |
| Line 89: |
Line 90: |
| | font-size: 12px; | | font-size: 12px; |
| | } | | } |
| − | label.mobile_menu span {
| |
| − | margin-left: 10px;
| |
| − | color:#FFF;
| |
| − | font-size:1em;
| |
| − | display: none;
| |
| − |
| |
| − | }
| |
| | | | |
| − | .nav {
| |
| − | position: absolute;
| |
| − | margin: 0;
| |
| − | }
| |
| − | ul.nav {
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | }
| |
| − | ul.nav1 {
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | }
| |
| − | .nav > li {
| |
| − | display: inline-block;
| |
| − | float: left;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .nav1 > li {
| |
| − | display: inline-block;
| |
| − | float: left;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .nav li .active a, .nav li a:hover {
| |
| − | color:#fff !important;
| |
| − | }
| |
| − | .nav1 li .active a, .nav1 li a:hover {
| |
| − | color:#fff !important;
| |
| − | }
| |
| − | .nav > li:nth-child{
| |
| − | border-right: none;
| |
| − | }
| |
| − | .nav1 > li:nth-child(4){
| |
| − | border-right: none;
| |
| − | }
| |
| − |
| |
| − | .nav > li:nth-child(1) {
| |
| − | display: block;
| |
| − | color: #FFED04;
| |
| − | margin: 0;
| |
| − | font-size: 11px;
| |
| − | border: none;
| |
| − | letter-spacing: 1px;
| |
| − | background: none;
| |
| − | }
| |
| − | .nav1 > li:nth-child(1) {
| |
| − | display: block;
| |
| − | color: #FFED04;
| |
| − | margin: 0;
| |
| − | font-size: 11px;
| |
| − | border: none;
| |
| − | letter-spacing: 1px;
| |
| − | background: none;
| |
| − | }
| |
| − | .banner-nav > li {
| |
| − | background: none;
| |
| − | }
| |
| − | .banner-nav > li:nth-child(10) {
| |
| − | border-right: none;
| |
| − | }
| |
| − | .banner-nav > li:nth-child(4) {
| |
| − | }
| |
| − | .banner-nav > li > a {
| |
| − | font-weight: 400;
| |
| − | font-style: normal !important;
| |
| − | padding: 7px 20px !important;
| |
| − | color: #fff !important;
| |
| − | margin: 0 5px! important;
| |
| − | font-size: 14px !important;
| |
| − | letter-spacing: 1px !important;
| |
| − | font-family: "Arial",sans-serif;
| |
| − | /*text-transform: uppercase;*/
| |
| − | }
| |
| − | .banner-nav > li > a:hover {
| |
| − | color: #000 !important;
| |
| − | background: #e8cc4e;
| |
| − | }
| |
| − | .banner-nav > li > a.active {
| |
| − | color: #000 !important;
| |
| − | background: #e8cc4e;
| |
| − | }
| |
| − | .banner-nav> li > ul {
| |
| − | top: 60px !important;
| |
| − | width: 190px !important;
| |
| − | }
| |
| − | /* Link Style */
| |
| − | .nav > li > a {
| |
| − | padding: 0px 26px 0 15px;
| |
| − | display: block;
| |
| − | color: #FFED04;
| |
| − | margin: 0;
| |
| − | font-size: 11px;
| |
| − | letter-spacing: 1px;
| |
| − | }
| |
| − | .nav1 > li > a {
| |
| − | padding: 0px 26px 0 15px;
| |
| − | display: block;
| |
| − | color: #FFED04;
| |
| − | margin: 0;
| |
| − | font-size: 11px;
| |
| − | letter-spacing: 1px;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − | .nav > li > a span{
| |
| − | font-style: italic;
| |
| − | padding: 0;
| |
| − | display: block;
| |
| − | color: #787878;
| |
| − | margin: .5em 0 0 0;
| |
| − | font-size: 11px;
| |
| − | letter-spacing: 0px;
| |
| − | }
| |
| − | }
| |
| − | .nav > li:nth-child(1) > a,.nav > li:nth-child(5) > a,.nav > li:nth-child(6) > a,
| |
| − | .nav > li:nth-child(7) > a{
| |
| − | background:none;
| |
| − | }
| |
| − | .nav > li:nth-child(1) > a:hover, .nav > li:nth-child(5) > a:hover, .nav > li:nth-child(6) > a:hover, .nav > li:nth-child(7) > a:hover{
| |
| − |
| |
| − | }
| |
| − | .nav > li:hover > a{
| |
| − | color: #bbbbbb;
| |
| − | }
| |
| − | .nav li > ul li a:hover{
| |
| − | text-decoration:none;
| |
| − | color: #fff !important;
| |
| − | }
| |
| − | .nav > li > a:hover, .nav > li > a:focus{
| |
| − | color: #000 !important;
| |
| − | background-color: #E8CC4E;
| |
| − | }
| |
| − | /* Simple multilevel dropdown */
| |
| − | .nav > li > ul {
| |
| − | opacity: 0;
| |
| − | visibility: hidden;
| |
| − | position: absolute;
| |
| − | list-style: none;
| |
| − | top: 34px ! important;
| |
| − | width: 100%;
| |
| − | text-align: left;
| |
| − | left: 5px;
| |
| − | margin-top: 30px;
| |
| − | padding: 0px;
| |
| − | z-index: 99;
| |
| − | border-bottom-right-radius: 6px;
| |
| − | -webkit-border-bottom-right-radius: 6px;
| |
| − | -ms-border-bottom-right-radius: 6px;
| |
| − | -moz-border-bottom-right-radius: 6px;
| |
| − | -o-border-bottom-right-radius: 6px;
| |
| − | border-bottom-left-radius: 6px;
| |
| − | -webkit-border-bottom-left-radius: 6px;
| |
| − | -ms-border-bottom-left-radius: 6px;
| |
| − | -moz-border-bottom-left-radius: 6px;
| |
| − | -o-border-bottom-left-radius: 6px;
| |
| − | }
| |
| − | /* First level appear */
| |
| − | .nav > li:hover > ul {
| |
| − | opacity: 1;
| |
| − | visibility: visible;
| |
| − | margin-top: 0px;
| |
| − | background-color:#f3d15b;
| |
| − | padding: 10px;
| |
| − | }
| |
| − | /* Style for dropdown links */
| |
| − | .nav li > ul li{
| |
| − | position: relative;
| |
| − | border-bottom: solid 1px rgba(120, 120, 120, 0.27);
| |
| − | }
| |
| − | .nav li > ul li:last-child {
| |
| − | border:none;
| |
| − | }
| |
| − | .nav li > ul li:nth-child(4){
| |
| − | border-bottom: none;
| |
| − | }
| |
| − | .nav li > ul li a{
| |
| − | color: #000;
| |
| − | font-size: 13px;
| |
| − | font-family: "Arial",sans-serif;
| |
| − | display: block;
| |
| − | background-color: #e8cc4e;
| |
| − | padding: 10px 10px;
| |
| − | position: relative;
| |
| − | -moz-transition: all 0.2s linear;
| |
| − | -webkit-transition: all 0.2s linear;
| |
| − | -o-transition: all 0.2s linear;
| |
| − | -ms-transition: all 0.2s linear;
| |
| − | }
| |
| − | .nav li > ul li a span.arrow{
| |
| − | width:15px;
| |
| − | height:10px;
| |
| − | position:absolute;
| |
| − | right:5px;
| |
| − | top:15px;
| |
| − | }
| |
| − |
| |
| − | .nav > li > ul li:hover {
| |
| − | color:#000;
| |
| − | -moz-transition: all 0.5s linear;
| |
| − | -webkit-transition: all 0.5s linear;
| |
| − | -o-transition: all 0.5s linear;
| |
| − | -ms-transition: all 0.5s linear;
| |
| − | }
| |
| − | .nav ul.dropdown2 {
| |
| − | color: #FFF;
| |
| − | }
| |
| − | .nav ul li:hover > a {
| |
| − | color: #787878;
| |
| − | background:none;
| |
| − | }
| |
| − | /* Second and third dropdown level */
| |
| − | .nav > li > ul li ul {
| |
| − | opacity: 0;
| |
| − | visibility: hidden;
| |
| − | position: absolute;
| |
| − | list-style: none;
| |
| − | top:0px;
| |
| − | left: 200px;
| |
| − | width: 200px;
| |
| − | text-align: left;
| |
| − | padding: 0px;
| |
| − | margin-left: 30px;
| |
| − | }
| |
| − | .nav > li > ul li ul li:hover {
| |
| − | background-color:#FFF;
| |
| − | }
| |
| − | input#mobile_menu { display: none; }
| |
| − | .nav > li > ul li ul li ul {
| |
| − | background-color:#FFF;
| |
| − | }
| |
| − | .nav > li > ul li ul li ul li:hover {
| |
| − | color:#0572B8;
| |
| − | }
| |
| − | /* Second and third level appears */
| |
| − | .nav > li ul li:hover > ul {
| |
| − | opacity: 1;
| |
| − | visibility: visible;
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − | /* Full width dropdown */
| |
| − | .nav > li > .fulldrop {
| |
| − | opacity: 0;
| |
| − | visibility: hidden;
| |
| − | position: absolute;
| |
| − | list-style: none;
| |
| − | top:118px;
| |
| − | left: 0px;
| |
| − | background-color: #0078b3;
| |
| − | width: 100%;
| |
| − | min-height: 100px;
| |
| − | text-align: left;
| |
| − | margin-top:30px;
| |
| − | padding: 0;
| |
| − | z-index: 99;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | /* Full dropdown appears */
| |
| − | .nav > li:hover .fulldrop {
| |
| − | opacity: 1;
| |
| − | visibility: visible;
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − | .nav ul li:hover:after {
| |
| − | color: white;
| |
| − | }
| |
| − | /* coldrop based dropdown */
| |
| − | .nav .coldrop {
| |
| − | opacity: 0;
| |
| − | visibility: hidden;
| |
| − | position: absolute;
| |
| − | list-style: none;
| |
| − | top:118px;
| |
| − | background-color: #0078b3;
| |
| − | min-height: 100px;
| |
| − | text-align: left;
| |
| − | margin-top:30px;
| |
| − | padding: 0;
| |
| − | padding: 0 10px;
| |
| − | z-index: 99;
| |
| − | }
| |
| − | .nav > li:hover .coldrop {
| |
| − | opacity: 1;
| |
| − | visibility: visible;
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − | .nav .coldrop .column {width: 130px;margin:0 9px;}
| |
| − | /* coldrop for full width dropdown */
| |
| − | .nav .column {
| |
| − | width: 14.1%;
| |
| − | float: left;
| |
| − | color:white;
| |
| − | margin: 0 0 0 2.2%;
| |
| − | }
| |
| − | .nav .column ul {
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − | .nav .column ul li {
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | font-size: 11px;
| |
| − | }
| |
| − | .nav .column h3 {
| |
| − | font-size: 14px;
| |
| − | padding: 14px 0;
| |
| − | font-weight: 400;
| |
| − | margin: 5px 0 5px 0;
| |
| − | }
| |
| − | .nav .column ul li a {
| |
| − | display: block;
| |
| − | padding: 0 0 15px 0;
| |
| − | }
| |
| − | .nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li {
| |
| − | transition: all 0.3s ease-in-out;
| |
| − | -moz-transition: all 0.3s ease-in-out; /* Firefox 4 */
| |
| − | -webkit-transition: all 0.3s ease-in-out; /* Safari and Chrome */
| |
| − | -o-transition: all 0.3s ease-in-outs; /* Opera */
| |
| − | }
| |
| − | @media all and (max-width:1280px) {
| |
| − | .nav > li > a {
| |
| − | 4font-size: 13px;
| |
| − | letter-spacing: 0;
| |
| − | }
| |
| − | .navigation {
| |
| − | margin-top: -10px;
| |
| − | }
| |
| − | }
| |
| − | @media all and (max-width:1024px) {
| |
| − | .nav > li > ul {
| |
| − | width: 155px !important;
| |
| − | top: 40px !important;
| |
| − | }
| |
| − | .nav > li {
| |
| − | margin: 0;
| |
| − | }
| |
| − | .nav > li > a span {
| |
| − | font-size: 11px;
| |
| − | }
| |
| − | .banner-nav > li > a {
| |
| − | padding: 11px 19px !important;
| |
| − | }
| |
| − |
| |
| − | .nav > li:nth-child(1) {
| |
| − | padding: 0px 6px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − | @media only screen and (max-width: 959px) {
| |
| − | .nav > li > a{
| |
| − | padding:10px 12px;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:1024px) {
| |
| − | .nav {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | label.mobile_menu span {
| |
| − | display: inline;
| |
| − | }
| |
| − | label.mobile_menu {
| |
| − | width: 100%;
| |
| − | }
| |
| − | label.mobile_menu {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | background-color:#454B50;
| |
| − | padding: 10px 0;
| |
| − | border-bottom: 1px solid white;
| |
| − | margin-top: 10px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .nav {
| |
| − | padding: 0;
| |
| − | }
| |
| − | ul.nav {
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | z-index: 9999;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | left: 0;
| |
| − | }
| |
| − | .nav > li > a {
| |
| − | border-width:0;
| |
| − | }
| |
| − | .nav li {
| |
| − | width: 100%;
| |
| − | text-align: left;
| |
| − | margin-left: 0;
| |
| − | }
| |
| − | .nav > li {
| |
| − | border-right: none;
| |
| − | padding:5px 0px;
| |
| − | position: relative;
| |
| − | }
| |
| − | .nav > li > a {
| |
| − | display:block;
| |
| − | font-size:0.85em;
| |
| − | }
| |
| − |
| |
| − | .nav li ul, .nav li .fulldrop, .nav li .coldrop {
| |
| − | top:45px;
| |
| − | }
| |
| − | .nav > li {
| |
| − | background:none;
| |
| − | }
| |
| − | .nav li ul {
| |
| − | padding: 0;
| |
| − | }
| |
| − | .nav > li:hover > a {
| |
| − | background-color:#CACACA;
| |
| − | }
| |
| − | .nav .fulldrop, .nav .coldrop {
| |
| − | width:95%;
| |
| − | padding: 0 2.5%;
| |
| − | }
| |
| − |
| |
| − | .nav li > ul li {
| |
| − | padding: 18px 0px;
| |
| − | }
| |
| − |
| |
| − | .nav .column, .nav .coldrop .column {
| |
| − | width: 94%;
| |
| − | padding: 0 3%;
| |
| − | }
| |
| − |
| |
| − | .nav > li > ul {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .nav > li > ul li ul {
| |
| − | width: 100%;
| |
| − | top:36px;
| |
| − | left: 0;
| |
| − | margin-top: 30px;
| |
| − | z-index: 2;
| |
| − | }
| |
| − |
| |
| − | .nav > li > ul > li:hover ul {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | #mobile_menu:checked+.nav {
| |
| − | display: block
| |
| − | }
| |
| − | label.mobile_menu:after {
| |
| − | position: absolute;
| |
| − | top:-2px;
| |
| − | right: 10px;
| |
| − | content: "\2261";
| |
| − | font-size: 30px;
| |
| − | color: white;
| |
| − | }
| |
| − | .nav > li > ul li ul li ul {
| |
| − | width: 100%;
| |
| − | top:43px;
| |
| − | left: 0px;
| |
| − | margin-left: 0;
| |
| − | margin-top: 30px;
| |
| − | }
| |
| − | .nav > li > ul > li ul li:hover ul{
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | .nav > li > ul li{
| |
| − | padding:0px 0 0px 0%;
| |
| − | width:100%;
| |
| − | }
| |
| − | .nav > li > ul li ul {
| |
| − | margin-left:0;
| |
| − | }
| |
| − | .nav > li > ul li ul li{
| |
| − | padding: 5px 0 5px 0%;
| |
| − | width:100%;
| |
| − | }
| |
| − | .nav > li > ul li ul li ul li{
| |
| − | padding: 15px 0 15px 0%;
| |
| − | width:100%;
| |
| − | }
| |
| − | .nav ul li.dropdown:after {
| |
| − | left: 90%;
| |
| − | }
| |
| − | /* 移动设备禁用动画 */
| |
| − | .nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li {
| |
| − | transition: none;
| |
| − | -moz-transition: none;
| |
| − | -webkit-transition: none;
| |
| − | -o-transition: none;
| |
| − | }
| |
| − | .navigation {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:1280px) {
| |
| − | .banner-nav > li > a {
| |
| − | padding: 7px 18px !important;
| |
| − | margin: 0 3px! important;
| |
| − | font-size: 13px !important;
| |
| − | }
| |
| − | .nav > li > ul {
| |
| − | top: 32px ! important;
| |
| − | left: 3px;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:1024px) {
| |
| − | .banner-nav > li > a {
| |
| − | padding: 7px 13px !important;
| |
| − | margin: 0 0px! important;
| |
| − | font-size: 13px !important;
| |
| − | }
| |
| − | .nav > li > ul {
| |
| − | left: 0px;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width: 1024px){
| |
| − | .nav > li > a.down-scroll {
| |
| − | background: url(../images/menu-arrow.png) no-repeat 97% 48%;
| |
| − | /*折叠导航二级菜单展开小箭头*/
| |
| − | }
| |
| − | .nav > li > ul {
| |
| − | top: 23px ! important;
| |
| − | }
| |
| − | @media only screen and (max-width:1024px) {
| |
| − | .nav > li > ul {
| |
| − | width: 35% !important;
| |
| − | margin-left:16%;
| |
| − | }
| |
| − | .banner-nav > li > a {
| |
| − | padding: 14px 13px !important;
| |
| − | }
| |
| − | ul.nav {
| |
| − | background-color: rgba(61,175,164,0.7);
| |
| − | }
| |
| − | .nav li > ul li a span.arrow {
| |
| − | right:20px;
| |
| − | }
| |
| − | .nav > li:hover > a{
| |
| − | background:;
| |
| − | }
| |
| − | .nav > li:nth-child(1) {
| |
| − | padding: 0px 0px;
| |
| − | background:none;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:640px) {
| |
| − | .banner-nav > li > a {
| |
| − | padding: 10px 14px !important;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:480px) {
| |
| − | label.mobile_menu {
| |
| − | padding: 7px 0;
| |
| − | margin-top: 8px;
| |
| − | }
| |
| − | label.mobile_menu:after {
| |
| − | font-size: 25px;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:320px){
| |
| − | .nav1 > li > a {
| |
| − | padding: 0px 10px 0 10px;
| |
| − | }
| |
| − | .banner-nav > li > a {
| |
| − | padding: 6px 14px !important;
| |
| − | }
| |
| − | .nav > li > ul {
| |
| − | top: 39px ! important;
| |
| − | }
| |
| − | }
| |
| − | header {
| |
| − | width: 100%;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | z-index: 1000;
| |
| − | background: #545454;
| |
| − | padding-top: 30px;
| |
| − | font-family: "Microsoft YaHei", sans-serif !important;
| |
| − | }
| |
| − |
| |
| − | .logo {
| |
| − | float: left;
| |
| − | width: 4%;
| |
| − | margin-right: 50px;
| |
| − | }
| |
| − |
| |
| − | .navigation {
| |
| − | width: 100%;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .banner-top {
| |
| − | width: 79%;
| |
| − | float: left;
| |
| − | margin-top: 8px;
| |
| − | }
| |
| − |
| |
| − | ul.navig {
| |
| − | padding: 0;
| |
| − | width: 69%;
| |
| − | float: left;
| |
| − | margin: 1% auto 0;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | ul.navig li {
| |
| − | display: inline-block;
| |
| − | margin: 0 10px;
| |
| − | }
| |
| − |
| |
| − | ul.navig li a {
| |
| − | text-transform: uppercase;
| |
| − | font-size: 1em;
| |
| − | color: #fff;
| |
| − | font-weight: 700;
| |
| − | }
| |
| − |
| |
| − | ul.navig li a:hover {
| |
| − | color: #838383;
| |
| − | }
| |
| − |
| |
| − | nav a,
| |
| − | ul.navig a {
| |
| − | position: relative;
| |
| − | margin: 0px 0px 3px;
| |
| − | outline: none;
| |
| − | text-decoration: none;
| |
| − | text-transform: capitalize;
| |
| − | letter-spacing: 1px;
| |
| − | font-weight: 400;
| |
| − | text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
| |
| − | font-size: 1.35em;
| |
| − | }
| |
| − |
| |
| − | nav a:hover,
| |
| − | nav a:focus,
| |
| − | ul.navig a:hover,
| |
| − | ul.navig a:focus {
| |
| − | outline: none;
| |
| − | }
| |
| − |
| |
| − | span.menu {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1280px) {
| |
| − | .logo {
| |
| − | width: 4%;
| |
| − | }
| |
| − | .banner-top {
| |
| − | width: 88%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1024px) {
| |
| − | .logo {
| |
| − | width: 5%;
| |
| − | margin-right: 4%;
| |
| − | }
| |
| − | .logo img {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .banner-top {
| |
| − | width: 56%;
| |
| − | }
| |
| − | span.menu {
| |
| − | display: block;
| |
| − | cursor: pointer;
| |
| − | float: none;
| |
| − | margin: 3px auto 0em auto;
| |
| − | width: 10%;
| |
| − | background-color: #f0c11b;
| |
| − | color: #000;
| |
| − | text-align: center;
| |
| − | padding: 6px;
| |
| − | font-size: 16px;
| |
| − | font-weight: 500;
| |
| − | position: relative;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 768px) {
| |
| − | .logo {
| |
| − | width: 5%;
| |
| − | margin-right: 0;
| |
| − | margin-top: 7px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 640px) {
| |
| − | .logo {
| |
| − | width: 6%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 480px) {
| |
| − | span.menu {
| |
| − | width: 17%;
| |
| − | padding: 4px;
| |
| − | font-size: 14px;
| |
| − | }
| |
| − | .logo {
| |
| − | width: 31%;
| |
| − | margin-top: 5px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 320px) {
| |
| − | span.menu {
| |
| − | width: 100%;
| |
| − | padding: 5px;
| |
| − | margin: 50px auto 0em auto;
| |
| − | }
| |
| − | .logo {
| |
| − | width: 52%;
| |
| − | margin-top: 8px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .container-fluid {
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .navbar {
| |
| − | border: 0 !important;
| |
| − | border-radius: 0 !important;
| |
| − | background-color: #545454;
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | .navbar a {
| |
| − | font-size: 18px;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .navbar-default {
| |
| − | box-shadow: none !important;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .navbar-nav > li > a {
| |
| − | /*color: #fff;*/
| |
| − | -webkit-transition: all 0.2s ease-out;
| |
| − | -moz-transition: all 0.2s ease-out;
| |
| − | -o-transition: all 0.2s ease-out;
| |
| − | -ms-transition: all 0.2s ease-out;
| |
| − | transition: all 0.2s ease-out;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .navbar-nav > li > a:hover {
| |
| − | background-color: #e8cc4e;
| |
| − | color: #000;
| |
| − | }
| |
| − |
| |
| − | .navbar-default .navbar-nav > li > a:focus {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | #bs-example-navbar-collapse-1 {
| |
| − | background-color: #545454 !important;
| |
| − | }
| |
| − |
| |
| − | ul.navbar-nav {
| |
| − | margin-left: 10em;
| |
| − | }
| |
| − |
| |
| − | .navbar-header {
| |
| − | background: #545454;
| |
| − | }
| |
| − |
| |
| − | .banner-container {
| |
| − | width: 100%;
| |
| − | background-color: #545454;
| |
| − | }
| |
| − |
| |
| − | .banner-content {
| |
| − | max-width: 1200px;
| |
| − | margin: -70px auto;
| |
| − | }
| |
| − |
| |
| − | .banner-content img {
| |
| − | padding-top: 7em;
| |
| − | }
| |
| − |
| |
| − | .banner-content h2 {
| |
| − | font-size: 34px;
| |
| − | color: #e8cc4e;
| |
| − | text-align: center;
| |
| − | padding-bottom: 100px;
| |
| − | }
| |
| − |
| |
| − | .work-header {
| |
| − | text-align: center;
| |
| − | margin-bottom: 66px;
| |
| − | }
| |
| − |
| |
| − | .how-work {
| |
| − | background-color: #f2f2f2;
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 1199px) {
| |
| − | .work-content {
| |
| − | text-align: center;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .work-header h2 {
| |
| − | width: 350px;
| |
| − | color: #0a3c63;
| |
| − | font-weight: bold;
| |
| − | padding-bottom: 10px;
| |
| − | margin: 62px auto 37px auto;
| |
| − | border-bottom: 2px solid #0a3c63;
| |
| − | }
| |
| − |
| |
| − | .work-header p,
| |
| − | .work-content {
| |
| − | color: #868687;
| |
| − | }
| |
| − |
| |
| − | .work-header h2 span {
| |
| − | color: #e8cd4d;
| |
| − | }
| |
| − |
| |
| − | .work-content {
| |
| − | margin-bottom: 50px;
| |
| − | }
| |
| − |
| |
| − | @media (min-width: 1600px) {
| |
| − | .container {
| |
| − | width: 1500px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (device-width: 1024px) {
| |
| − | .container {
| |
| − | width: 990px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .index-details {
| |
| − | color: #868687;
| |
| − | }
| |
| − | /*.index-details img{
| |
| − | margin: 80px 0;
| |
| − | }*/
| |
| − |
| |
| − | .index-details .caption {
| |
| − | margin: 20% 0;
| |
| − | color: #868687;
| |
| − | }
| |
| − |
| |
| − | .index-details .caption h3:before {
| |
| − | content: url(../images/h-before.jpg);
| |
| − | position: relative;
| |
| − | top: 20px;
| |
| − | margin-right: 15px;
| |
| − | }
| |
| − |
| |
| − | .index-details .caption h3 {
| |
| − | margin-bottom: 40px;
| |
| − | }
| |
| − |
| |
| − | .index-details .caption p:last-child {
| |
| − | margin-top: 20px;
| |
| − | }
| |
| − |
| |
| − | .index-details .caption p:last-child a {
| |
| − | background-color: #0a3c63;
| |
| − | border: none;
| |
| − | -webkit-transition: all 0.2s ease-out;
| |
| − | -moz-transition: all 0.2s ease-out;
| |
| − | -o-transition: all 0.2s ease-out;
| |
| − | -ms-transition: all 0.2s ease-out;
| |
| − | transition: all 0.2s ease-out;
| |
| − | }
| |
| − |
| |
| − | .index-details .caption p:last-child a:hover {
| |
| − | background-color: #206295;
| |
| − | }
| |
| − |
| |
| − | .index-details2 {
| |
| − | background-color: #f2f2f2;
| |
| − | }
| |
| − |
| |
| − | .index-headline {
| |
| − | width: 270px;
| |
| − | margin: 0 auto;
| |
| − | font-size: 28px;
| |
| − | font-weight: bold;
| |
| − | padding-top: 20px;
| |
| − | padding-bottom: 10px;
| |
| − | color: #0a3c63;
| |
| − | border-bottom: 1px solid #0a3c63;
| |
| − | }
| |
| − |
| |
| − | .index-headline2 {
| |
| − | width: 400px;
| |
| − | padding-top: 50px;
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − |
| |
| − | .index-headline span {
| |
| − | color: #f0c11b;
| |
| − | }
| |
| − |
| |
| | </style> | | </style> |
| | </head> | | </head> |
