|
|
| Line 241: |
Line 241: |
| | | | |
| | | | |
| − | /*timeline */
| + | .section1 { |
| − | | + | padding-top: 10px; |
| − | .timeline { | + | |
| − | position: relative;
| + | |
| − | padding:4px 0 0 0; | + | |
| − | margin-top:22px;
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li:nth-child(even) {
| + | |
| − | position: relative;
| + | |
| − | margin-bottom: 50px;
| + | |
| − | height: 180px;
| + | |
| − | right:-100px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li:nth-child(odd) {
| + | |
| − | position: relative;
| + | |
| − | margin-bottom: 50px;
| + | |
| − | height: 180px;
| + | |
| − | left:-100px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li:before,
| + | |
| − | .timeline>li:after {
| + | |
| − | content: " ";
| + | |
| − | display: table;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li:after {
| + | |
| − | clear: both;
| + | |
| − | min-height: 170px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline > li .timeline-panel {
| + | |
| − | position: relative;
| + | |
| − | float: left;
| + | |
| − | width: 41%;
| + | |
| − | padding: 0 20px 20px 30px;
| + | |
| − | text-align: right;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li .timeline-panel:before {
| + | |
| − | right: auto;
| + | |
| − | left: -15px;
| + | |
| − | border-right-width: 15px;
| + | |
| − | border-left-width: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li .timeline-panel:after {
| + | |
| − | right: auto;
| + | |
| − | left: -14px;
| + | |
| − | border-right-width: 14px;
| + | |
| − | border-left-width: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li .timeline-image {
| + | |
| − | z-index: 100;
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | border: 7px solid #fff;
| + | |
| − | border-radius: 100%;
| + | |
| − | background-color: #fff;
| + | |
| − | box-shadow: 0 0 5px #fff;
| + | |
| − | width: 200px;
| + | |
| − | height: 200px;
| + | |
| − | margin-left: -100px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li .timeline-image h4 {
| + | |
| − | margin-top: 12px;
| + | |
| − | font-size: 10px;
| + | |
| − | line-height: 14px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li.timeline-inverted>.timeline-panel {
| + | |
| − | float: right;
| + | |
| − | padding: 0 30px 20px 20px;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li.timeline-inverted>.timeline-panel:before {
| + | |
| − | right: auto;
| + | |
| − | left: -15px;
| + | |
| − | border-right-width: 15px;
| + | |
| − | border-left-width: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li.timeline-inverted>.timeline-panel:after {
| + | |
| − | right: auto;
| + | |
| − | left: -14px;
| + | |
| − | border-right-width: 14px;
| + | |
| − | border-left-width: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline>li:last-child {
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-heading h4 {
| + | |
| − | margin-top:22px;
| + | |
| − | margin-bottom: 4px;
| + | |
| − | padding:0;
| + | |
| − | color: #b3b3b3;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-heading h4.subheading {
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | text-transform: none;
| + | |
| − | font-size:18px;
| + | |
| − | color:#333333;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-body>p,
| + | |
| − | .timeline .timeline-body>ul {
| + | |
| − | margin-bottom: 0;
| + | |
| − | color:#808080;
| + | |
| − | }
| + | |
| − | /*Style for even div.line*/
| + | |
| − | .timeline>li:nth-child(odd) .line:before {
| + | |
| − | content: "";
| + | |
| − | position: absolute;
| + | |
| − | top: 60px;
| + | |
| − | bottom: 0;
| + | |
| − | left: 690px;
| + | |
| − | width: 4px;
| + | |
| − | height:340px;
| + | |
| − | background-color: #fff;
| + | |
| − | -ms-transform: rotate(-44deg); /* IE 9 */
| + | |
| − | -webkit-transform: rotate(-44deg); /* Safari */
| + | |
| − | transform: rotate(-44deg);
| + | |
| − | box-shadow: 0 0 5px #fff;
| + | |
| − | }
| + | |
| − | /*Style for odd div.line*/
| + | |
| − | .timeline>li:nth-child(even) .line:before {
| + | |
| − | content: "";
| + | |
| − | position: absolute;
| + | |
| − | top: 60px;
| + | |
| − | bottom: 0;
| + | |
| − | left: 450px;
| + | |
| − | width: 4px;
| + | |
| − | height:340px;
| + | |
| − | background-color: #fff;
| + | |
| − | -ms-transform: rotate(44deg); /* IE 9 */
| + | |
| − | -webkit-transform: rotate(44deg); /* Safari */
| + | |
| − | transform: rotate(44deg);
| + | |
| − | box-shadow: 0 0 5px #fff;
| + | |
| − | }
| + | |
| − | /* Medium Devices, .visible-md-* */
| + | |
| − | @media (min-width: 992px) and (max-width: 1199px) {
| + | |
| − | .timeline > li:nth-child(even) {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | min-height: 0px;
| + | |
| − | right: 0px;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(odd) {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | min-height: 0px;
| + | |
| − | left: 0px;
| + | |
| − | }
| + | |
| − | .timeline>li:nth-child(even) .timeline-image {
| + | |
| − | left: 0;
| + | |
| − | margin-left: 0px;
| + | |
| − | }
| + | |
| − | .timeline>li:nth-child(odd) .timeline-image {
| + | |
| − | left: 690px;
| + | |
| − | margin-left: 0px;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(even) .timeline-panel {
| + | |
| − | width: 76%;
| + | |
| − | padding: 0 0 20px 0px;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(odd) .timeline-panel {
| + | |
| − | width: 70%;
| + | |
| − | padding: 0 0 20px 0px;
| + | |
| − | text-align: right;
| + | |
| − | }
| + | |
| − | .timeline > li .line {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | /* Small Devices, Tablets */
| + | |
| − | @media (min-width: 768px) and (max-width: 991px) {
| + | |
| − | .timeline > li:nth-child(even) {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | min-height: 0px;
| + | |
| − | right: 0px;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(odd) {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | min-height: 0px;
| + | |
| − | left: 0px;
| + | |
| − | }
| + | |
| − | .timeline>li:nth-child(even) .timeline-image {
| + | |
| − | left: 0;
| + | |
| − | margin-left: 0px;
| + | |
| − | }
| + | |
| − | .timeline>li:nth-child(odd) .timeline-image {
| + | |
| − | left: 520px;
| + | |
| − | margin-left: 0px;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(even) .timeline-panel {
| + | |
| − | width: 70%;
| + | |
| − | padding: 0 0 20px 0px;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(odd) .timeline-panel {
| + | |
| − | width: 70%;
| + | |
| − | padding: 0 0 20px 0px;
| + | |
| − | text-align: right;
| + | |
| − | }
| + | |
| − | .timeline > li .line {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | /* Custom, iPhone Retina */
| + | |
| − | @media only screen and (max-width: 767px) {
| + | |
| − | .timeline > li:nth-child(even) {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | min-height: 0px;
| + | |
| − | right: 0px;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(odd) {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | min-height: 0px;
| + | |
| − | left: 0px;
| + | |
| − | }
| + | |
| − | .timeline>li .timeline-image {
| + | |
| − | position: static;
| + | |
| − | width: 150px;
| + | |
| − | height: 150px;
| + | |
| − | margin-bottom:0px;
| + | |
| − | }
| + | |
| − | .timeline>li:nth-child(even) .timeline-image {
| + | |
| − | left: 0;
| + | |
| − | margin-left: 0;
| + | |
| − | }
| + | |
| − | .timeline>li:nth-child(odd) .timeline-image {
| + | |
| − | float:right;
| + | |
| − | left: 0px;
| + | |
| − | margin-left:0;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(even) .timeline-panel {
| + | |
| − | width: 100%;
| + | |
| − | padding: 0 0 20px 14px;
| + | |
| − | }
| + | |
| − | .timeline > li:nth-child(odd) .timeline-panel {
| + | |
| − | width: 100%;
| + | |
| − | padding: 0 14px 20px 0px;
| + | |
| − | }
| + | |
| − | .timeline > li .line {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /*overlay */
| + | |
| − | | + | |
| − | #overlay
| + | |
| − | {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #overlay:target{
| + | |
| − | display: block;
| + | |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| | height: 100%; | | height: 100%; |
| − | z-index: 99999;
| + | background:center no-repeat fixed url('https://static.igem.org/mediawiki/2015/a/a8/Edigem15_design_first.png'); |
| − | background-color: #000; | + | color:#dedeff; |
| | } | | } |
| | | | |
| − | #overlay h2
| |
| − | {
| |
| − | margin-top: 0;
| |
| − | margin-bottom: 15px;
| |
| − | font-size: 40px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #overlay p{
| |
| − | text-align: center;
| |
| − | margin-bottom: 75px;
| |
| − | text-transform: none;
| |
| − | font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
| |
| − | font-size: 16px;
| |
| − | font-style: italic;
| |
| − | font-weight: 400;
| |
| − | }
| |
| − |
| |
| − | /*menu*/
| |
| − |
| |
| − |
| |
| − | /* Black and White drop Drown Menu for Blogger by labstrikes.blogspot.com */
| |
| − | ul.dropdown li a {
| |
| − | display: block;
| |
| − | padding: 3px 13px;
| |
| − | }
| |
| − | ul.dropdown li {
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | ul.dropdown li.dir {
| |
| − | padding: 7px 20px 7px 12px;
| |
| − | }
| |
| − | ul.dropdown ul li.dir {
| |
| − | padding-right: 15px;
| |
| − | }
| |
| − | ul.dropdown ul a {
| |
| − | padding: 4px 5px 4px 12px;
| |
| − | }
| |
| − | ul.dropdown ul a:hover {
| |
| − | padding: 3px 5px 3px 11px;
| |
| − | border: solid 1px #ddd;
| |
| − | background-color: #eee;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − | ul.dropdown,
| |
| − | ul.dropdown li,
| |
| − | ul.dropdown ul {
| |
| − | list-style: none;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | ul.dropdown {
| |
| − | position: relative;
| |
| − | z-index: 597;
| |
| − | float: left;
| |
| − | }
| |
| − | ul.dropdown li {
| |
| − | float: left;
| |
| − | min-height: 1px;
| |
| − | line-height: 1.3em;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − | ul.dropdown li.hover,
| |
| − | ul.dropdown li:hover {
| |
| − | position: relative;
| |
| − | z-index: 599;
| |
| − | cursor: default;
| |
| − | }
| |
| − | ul.dropdown ul {
| |
| − | visibility: hidden;
| |
| − | position: absolute;
| |
| − | top: 100%;
| |
| − | left: 0;
| |
| − | z-index: 598;
| |
| − | width: 100%;
| |
| − | }
| |
| − | ul.dropdown ul li {
| |
| − | float: none;
| |
| − | }
| |
| − | ul.dropdown ul ul {
| |
| − | top: 1px;
| |
| − | left: 99%;
| |
| − | }
| |
| − | ul.dropdown li:hover > ul {
| |
| − | visibility: visible;
| |
| − | }
| |
| − | ul.dropdown {
| |
| − | font: bold 12px Arial, Helvetica, sans-serif;
| |
| − | }
| |
| − | ul.dropdown li {
| |
| − | padding: 3px 12px;
| |
| − | background-color: #000;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | ul.dropdown li.hover,
| |
| − | ul.dropdown li:hover {
| |
| − | background-color: #222;
| |
| − | }
| |
| − | ul.dropdown a:link,
| |
| − | ul.dropdown a:visited { color: #fff; text-decoration: none; }
| |
| − | ul.dropdown a:hover { color: #fff; text-decoration: underline; }
| |
| − | ul.dropdown a:active { color: #fff; }
| |
| − |
| |
| − | /* -- level mark -- */
| |
| − |
| |
| − | ul.dropdown ul {
| |
| − | margin-left: -6px;
| |
| − | width: 170px;
| |
| − | padding-bottom: 9px;
| |
| − | background: url(http://4.bp.blogspot.com/-MwgiNzVwW8Q/UIixwkBTy5I/AAAAAAAAFdg/0UQSjWZV1zU/s1600/dropdown_pane.png) 0 100% no-repeat;
| |
| − | color: #000;
| |
| − | font-size: 11px;
| |
| − | font-weight: normal;
| |
| − | }
| |
| − |
| |
| − | ul.dropdown ul li {
| |
| − | background-color: transparent;
| |
| − | color: #000;
| |
| − | }
| |
| − |
| |
| − | ul.dropdown ul li.hover,
| |
| − | ul.dropdown ul li:hover {
| |
| − | background-color: transparent;
| |
| − | }
| |
| − |
| |
| − | ul.dropdown ul li.empty {
| |
| − | padding: 12px 12px 7px !important;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | ul.dropdown ul a:link,
| |
| − | ul.dropdown ul a:visited { color: #000; }
| |
| − | ul.dropdown ul a:hover { color: #000; text-decoration: none; }
| |
| − | ul.dropdown ul a:active { color: #000; }
| |
| − |
| |
| − | /* -- level mark -- */
| |
| − |
| |
| − | ul.dropdown ul ul {
| |
| − | display: none;
| |
| − | }
| |
| − | /* -- Supporting class `dir` -- */
| |
| − | ul.dropdown *.dir {
| |
| − | padding-right: 12px;
| |
| − | background-image: none;
| |
| − | background-position: 100% 50%;
| |
| − | background-repeat: no-repeat;
| |
| − | }
| |
| | | | |
| | | | |