(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | + | <html lang="en"> | |
− | < | + | <head> |
+ | <meta charset="utf-8"> | ||
+ | <title>HillSide Multi purpose HTML5 Template</title> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
+ | <meta name="description" content="" /> | ||
+ | <meta name="author" content="http://webthemez.com" /> | ||
+ | <!-- css --> | ||
+ | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Team:HUST-China/materialize/css/materialize?action=raw&ctype=text/css" media="screen,projection" /> | ||
+ | <link href="https://2018.igem.org/Team:HUST-China/css/bootstrap?action=raw&ctype=text/css" rel="stylesheet" /> | ||
+ | <link href="https://2018.igem.org/Team:HUST-China/css/fancybox/jquery?action=raw&ctype=text/css" rel="stylesheet"> | ||
+ | <link href="https://2018.igem.org/Team:HUST-China/css/flexslider?action=raw&ctype=text/css" rel="stylesheet" /> | ||
+ | <!--slider--> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:HUST-China/css/zoomslider?action=raw&ctype=text/css" /> | ||
+ | <link href="https://2018.igem.org/Team:HUST-China/css/font-awesome?action=raw&ctype=text/css" rel="stylesheet" /> | ||
+ | <link href="https://2018.igem.org/Team:HUST-China/css/animate?action=raw&ctype=text/css" rel="stylesheet" /> | ||
− | < | + | <!--<link href="https://2018.igem.org/Team:HUST-China/css/style?action=raw&ctype=text/css" rel="stylesheet" /> --> |
− | < | + | <style type="text/css"> |
− | + | /* | |
− | < | + | Author URI: http://webthemez.com/ |
− | + | Note: Licence under Creative Commons Attribution 3.0 | |
+ | -------------------------------------------------------*/ | ||
+ | @import url('http://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:400,600,700'); | ||
+ | @import url('font-awesome.css'); | ||
+ | @import url('animate.css'); | ||
− | + | body { | |
+ | font-family:'Open Sans', Arial, sans-serif; | ||
+ | font-weight:300; | ||
+ | line-height:1.6em; | ||
+ | color:#656565; | ||
+ | font-size: 1.4em; | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | a { | ||
+ | color: #0a0a0a; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a:active { | ||
+ | outline:0; | ||
+ | } | ||
+ | .clear { | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | h1,h2{ | ||
+ | font-weight: 600; | ||
+ | line-height:1.1em; | ||
+ | color: #e91e63; | ||
+ | margin-bottom: 20px; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | h3, h4, h5, h6 { | ||
+ | line-height:1.1em; | ||
+ | color: #212121; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | input, button, select, textarea { | ||
+ | border-radius: 0px !important; | ||
+ | } | ||
+ | .timetable{background: #2ab975;padding: 5px 23px;} | ||
+ | .timetable hr{ | ||
+ | color:#fff; | ||
+ | padding-top: 29px; | ||
+ | margin-bottom: 20px !important; | ||
+ | } | ||
+ | .timetable dl{ | ||
+ | color:#fff; | ||
+ | } | ||
+ | .timetable dt{ | ||
+ | color:#fff; | ||
+ | } | ||
+ | .timetable dd{ | ||
+ | color:#fff; | ||
+ | } | ||
+ | #wrapper{ | ||
+ | width:100%; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | ul.withArrow{ | ||
+ | |||
+ | } | ||
+ | ul.withArrow li{ | ||
+ | |||
+ | } | ||
+ | ul.withArrow li span{ | ||
+ | |||
+ | margin-right: 10px; | ||
+ | |||
+ | font-weight: 700; | ||
+ | |||
+ | color: #0e0e0e; | ||
+ | |||
+ | border: 1px solid; | ||
+ | |||
+ | padding: 4px 8px; | ||
+ | |||
+ | font-size: 11px; | ||
+ | |||
+ | border-radius: 50%; | ||
+ | |||
+ | height: 20px; | ||
+ | |||
+ | width: 20px; | ||
+ | } | ||
+ | .widget { | ||
+ | color: #858585; | ||
+ | } | ||
+ | .row,.row-fluid { | ||
+ | margin-bottom:30px; | ||
+ | } | ||
+ | |||
+ | .row .row,.row-fluid .row-fluid{ | ||
+ | margin-bottom:30px; | ||
+ | } | ||
+ | |||
+ | .row.nomargin,.row-fluid.nomargin { | ||
+ | margin-bottom:0; | ||
+ | } | ||
+ | .about-image img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | img.img-polaroid { | ||
+ | margin:0 0 20px 0; | ||
+ | } | ||
+ | .img-box { | ||
+ | max-width:100%; | ||
+ | } | ||
+ | .navbar-default .navbar-toggle { | ||
+ | border-color: #ddd; | ||
+ | margin-top: 16px; | ||
+ | } | ||
+ | /* Header | ||
+ | ==================================== */ | ||
+ | .topbar{ | ||
+ | background-color: #e91e63; | ||
+ | padding: 0; | ||
+ | /* color:#fff; */ | ||
+ | } | ||
+ | .topbar .container .row { | ||
+ | margin: 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | .topbar .container .row .col-md-12 { | ||
+ | padding:0; | ||
+ | } | ||
+ | .topbar p{ | ||
+ | margin:0; | ||
+ | display:inline-block; | ||
+ | font-size: 13px; | ||
+ | color: #f1f6ff; | ||
+ | } | ||
+ | .topbar p > i{ | ||
+ | margin-right:5px; | ||
+ | } | ||
+ | .topbar p:last-child{ | ||
+ | text-align:right; | ||
+ | } | ||
+ | header .navbar { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .topbar li.topbar { | ||
+ | display: inline; | ||
+ | padding-right: 18px; | ||
+ | line-height: 52px; | ||
+ | transition: all .3s linear; | ||
+ | } | ||
+ | |||
+ | .topbar li.topbar:hover { | ||
+ | color: #1bbde8; | ||
+ | } | ||
+ | |||
+ | .topbar ul.info i { | ||
+ | color: #131313; | ||
+ | font-size: 16px; | ||
+ | font-style: normal; | ||
+ | margin-right: 8px; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | top: 4px; | ||
+ | } | ||
+ | |||
+ | .topbar ul.info span { | ||
+ | /* line-height: 42px; */ | ||
+ | /* display: inline-block; */ | ||
+ | } | ||
+ | |||
+ | .topbar ul.info li { | ||
+ | float: right; | ||
+ | padding-left: 30px; | ||
+ | color: #ffffff; | ||
+ | font-size: 13px; | ||
+ | line-height: 44px; | ||
+ | } | ||
+ | |||
+ | .topbar ul.info i span { | ||
+ | color: #aaa; | ||
+ | font-size: 13px; | ||
+ | font-family: "Rpboto", sans-serif; | ||
+ | font-weight: 400; | ||
+ | line-height: 50px; | ||
+ | padding-left: 18px; | ||
+ | } | ||
+ | .navbar-default { | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | .navbar-brand { | ||
+ | color: #222; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 24px; | ||
+ | font-weight: 700; | ||
+ | line-height: 1em; | ||
+ | letter-spacing: -1px; | ||
+ | margin-top: 21px; | ||
+ | padding: 0 0 0 15px; | ||
+ | } | ||
+ | .navbar-default .navbar-brand{color: #e91e63;font-size: 24px;text-transform: uppercase;} | ||
+ | .navbar-default .navbar-brand:hover { | ||
+ | color: #fff; | ||
+ | } | ||
+ | header .navbar-collapse ul.navbar-nav { | ||
+ | float: right; | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | header .navbar {min-height: 70px;padding: 18px 0;background: #1b1b1b;} | ||
+ | .home-page header .navbar-default{ | ||
+ | background: #1b1b1b; | ||
+ | /* position: absolute; */ | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | header .nav li a:hover, | ||
+ | header .nav li a:focus, | ||
+ | header .nav li.active a, | ||
+ | header .nav li.active a:hover, | ||
+ | header .nav li a.dropdown-toggle:hover, | ||
+ | header .nav li a.dropdown-toggle:focus, | ||
+ | header .nav li.active ul.dropdown-menu li a:hover, | ||
+ | header .nav li.active ul.dropdown-menu li.active a{ | ||
+ | -webkit-transition: all .3s ease; | ||
+ | -moz-transition: all .3s ease; | ||
+ | -ms-transition: all .3s ease; | ||
+ | -o-transition: all .3s ease; | ||
+ | transition: all .3s ease; | ||
+ | } | ||
+ | |||
+ | |||
+ | header .navbar-default .navbar-nav > .open > a, | ||
+ | header .navbar-default .navbar-nav > .open > a:hover, | ||
+ | header .navbar-default .navbar-nav > .open > a:focus { | ||
+ | -webkit-transition: all .3s ease; | ||
+ | -moz-transition: all .3s ease; | ||
+ | -ms-transition: all .3s ease; | ||
+ | -o-transition: all .3s ease; | ||
+ | transition: all .3s ease; | ||
+ | } | ||
+ | |||
+ | |||
+ | header .navbar { | ||
+ | min-height: 62px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | header .navbar-nav > li { | ||
+ | padding-bottom: 12px; | ||
+ | padding-top: 12px; | ||
+ | padding: 0 !important; | ||
+ | } | ||
+ | |||
+ | header .navbar-nav > li > a { | ||
+ | /* padding-bottom: 6px; */ | ||
+ | /* padding-top: 5px; */ | ||
+ | margin-left: 2px; | ||
+ | line-height: 40px; | ||
+ | font-weight: 700; | ||
+ | -webkit-transition: all .3s ease; | ||
+ | -moz-transition: all .3s ease; | ||
+ | -ms-transition: all .3s ease; | ||
+ | -o-transition: all .3s ease; | ||
+ | transition: all .3s ease; | ||
+ | } | ||
+ | section.dishes h2 { | ||
+ | color: #fff; | ||
+ | } | ||
+ | .services{ | ||
+ | |||
+ | } | ||
+ | .dishes{ | ||
+ | |||
+ | background: #E91E63; | ||
+ | |||
+ | padding: 35px 0; | ||
+ | |||
+ | color: #ffffff; | ||
+ | } | ||
+ | .dropdown-menu li a:hover { | ||
+ | color: #fff !important; | ||
+ | background: #e91e63 !important; | ||
+ | } | ||
+ | |||
+ | header .nav .caret { | ||
+ | border-bottom-color: #e91e63; | ||
+ | border-top-color: #e91e63; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > .active > a, | ||
+ | .navbar-default .navbar-nav > .active > a:hover, | ||
+ | .navbar-default .navbar-nav > .active > a:focus { | ||
+ | background-color: #fff; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > .open > a, | ||
+ | .navbar-default .navbar-nav > .open > a:hover, | ||
+ | .navbar-default .navbar-nav > .open > a:focus { | ||
+ | background-color: #e91e63; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | .dropdown-menu { | ||
+ | box-shadow: none; | ||
+ | border-radius: 0; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | .dropdown-menu li:last-child { | ||
+ | padding-bottom: 0 !important; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | header .nav li .dropdown-menu { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | header .nav li .dropdown-menu li a { | ||
+ | line-height: 28px; | ||
+ | padding: 3px 12px; | ||
+ | } | ||
+ | |||
+ | /* --- menu --- */ | ||
+ | .flex-caption p { | ||
+ | line-height: 22px; | ||
+ | font-weight: 300; | ||
+ | color: #ffffff; | ||
+ | text-transform: capitalize; | ||
+ | } | ||
+ | header .navigation { | ||
+ | float:right; | ||
+ | } | ||
+ | |||
+ | header ul.nav li { | ||
+ | border:none; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | header ul.nav li a { | ||
+ | font-size: 13px; | ||
+ | border:none; | ||
+ | font-weight: 600; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | |||
+ | header ul.nav li ul li a { | ||
+ | font-size:12px; | ||
+ | border:none; | ||
+ | font-weight:300; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | |||
+ | |||
+ | .navbar .nav > li > a { | ||
+ | color: #9a9a9a; | ||
+ | text-shadow: none; | ||
+ | border: 1px solid rgba(255, 255, 255, 0) !important; | ||
+ | } | ||
+ | |||
+ | .navbar .nav a:hover { | ||
+ | background:none; | ||
+ | color: #2e8eda; | ||
+ | } | ||
+ | |||
+ | .navbar .nav > .active > a,.navbar .nav > .active > a:hover { | ||
+ | background:none; | ||
+ | font-weight:700; | ||
+ | } | ||
+ | |||
+ | .navbar .nav > .active > a:active,.navbar .nav > .active > a:focus { | ||
+ | background:none; | ||
+ | outline:0; | ||
+ | font-weight:700; | ||
+ | } | ||
+ | |||
+ | .navbar .nav li .dropdown-menu { | ||
+ | z-index:2000; | ||
+ | } | ||
+ | |||
+ | header ul.nav li ul { | ||
+ | margin-top:1px; | ||
+ | } | ||
+ | header ul.nav li ul li ul { | ||
+ | margin:1px 0 0 1px; | ||
+ | } | ||
+ | .dropdown-menu .dropdown i { | ||
+ | position:absolute; | ||
+ | right:0; | ||
+ | margin-top:3px; | ||
+ | padding-left:20px; | ||
+ | } | ||
+ | |||
+ | .navbar .nav > li > .dropdown-menu:before { | ||
+ | display: inline-block; | ||
+ | border-right: none; | ||
+ | border-bottom: none; | ||
+ | border-left: none; | ||
+ | border-bottom-color: none; | ||
+ | content:none; | ||
+ | } | ||
+ | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {color: #ffffff;background: #10cdff;border-radius: 0;} | ||
+ | .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { | ||
+ | color: #ffffff; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | ul.nav li.dropdown a { | ||
+ | z-index:1000; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | select.selectmenu { | ||
+ | display:none; | ||
+ | } | ||
+ | .pageTitle{color: #fff;margin: 30px 0 3px;display: inline-block;font-size: 28px;font-weight: 700;text-transform: uppercase;} | ||
+ | |||
+ | #banner{ | ||
+ | width: 100%; | ||
+ | background:#000; | ||
+ | position:relative; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | /* Sliders | ||
+ | ==================================== */ | ||
+ | /* --- flexslider --- */ | ||
+ | #main-slider:before {content: '';width: 100%;height: 100%;background: rgba(0, 0, 0, 0.65);z-index: 1;position: absolute;background: rgba(30, 30, 30, 0.31);} | ||
+ | .flex-direction-nav a{ | ||
+ | display:none; | ||
+ | } | ||
+ | .flexslider { | ||
+ | padding:0; | ||
+ | background: #fff; | ||
+ | position: relative; | ||
+ | zoom: 1; | ||
+ | } | ||
+ | .flex-direction-nav .flex-prev{ | ||
+ | left:0px; | ||
+ | } | ||
+ | .flex-direction-nav .flex-next{ | ||
+ | right:0px; | ||
+ | } | ||
+ | .flex-caption {zoom: 1;bottom: 198px;background-color: transparent;color: #fff;margin: 0;padding: 2px 25px 0px 30px;/* position: absolute; */left: 0;text-align: center;margin: 0 auto;right: 0px;display: inline-block;bottom: 10%;width: 50%;right: 0 !important;border-radius: 15px 15px 0 0;} | ||
+ | .flex-caption h3 {color: #fff;letter-spacing: 0px;margin-bottom: 8px;text-transform: uppercase;font-size: 70px;font-weight: 700;} | ||
+ | .flex-caption p {margin: 12px 0 18px;font-size: 20px;font-weight: 400;} | ||
+ | .skill-home{ | ||
+ | margin-bottom:50px; | ||
+ | } | ||
+ | .c1{ | ||
+ | border: #ed5441 1px solid; | ||
+ | background:#ed5441; | ||
+ | } | ||
+ | .c2{ | ||
+ | border: #24c4db 1px solid; | ||
+ | background:#24c4db; | ||
+ | } | ||
+ | .c3{ | ||
+ | border: #1891EC 1px solid; | ||
+ | background:#1891EC; | ||
+ | } | ||
+ | .c4{ | ||
+ | border: #609cec 1px solid; | ||
+ | background:#609cec; | ||
+ | } | ||
+ | .skill-home .icons {padding: 38px;width: 94px;height: 94px;color: #fff;font-size: 42px;font-size: 38px;text-align: center;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 0;display: inline-table;border: 4px solid #efefef;color: #ff5722;background: transparent;border-radius: 50%;background: #ffffff;} | ||
+ | .skill-home h2 { | ||
+ | padding-top: 20px; | ||
+ | font-size: 36px; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | .testimonial-solid { | ||
+ | padding: 50px 0 60px 0; | ||
+ | margin: 0 0 0 0; | ||
+ | background: #FFFFFF; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .testi-icon-area { | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | top: -84px; | ||
+ | margin: 0 auto; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .testi-icon-area .quote { | ||
+ | padding: 15px 0 0 0; | ||
+ | margin: 0 0 0 0; | ||
+ | background: #ffffff; | ||
+ | text-align: center; | ||
+ | color: #1891EC; | ||
+ | display: inline-table; | ||
+ | width: 70px; | ||
+ | height: 70px; | ||
+ | -ms-border-radius: 50%; | ||
+ | -moz-border-radius: 50%; | ||
+ | -webkit-border-radius: 50%; | ||
+ | border-radius: 50%; | ||
+ | font-size: 42px; | ||
+ | border: 1px solid #1891EC; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .testi-icon-area .carousel-inner { | ||
+ | margin: 20px 0; | ||
+ | } | ||
+ | .carousel-indicators { | ||
+ | bottom: -30px; | ||
+ | } | ||
+ | .text-center img { | ||
+ | margin: auto; | ||
+ | } | ||
+ | .aboutUs{ | ||
+ | padding:40px 0; | ||
+ | background: #F2F2F2; | ||
+ | } | ||
+ | img.img-center { | ||
+ | margin: 0 auto; | ||
+ | display: block; | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | .home-about{ | ||
+ | padding: 60px 0 0px; | ||
+ | } | ||
+ | .home-about hr{ | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | .home-about .info-box{ | ||
+ | |||
+ | } | ||
+ | .projects { | ||
+ | padding: 60px 0; | ||
+ | background: #1b1b1b; | ||
+ | color: #a7a7a7; | ||
+ | border-top: 4px solid #e91e63; | ||
+ | } | ||
+ | |||
+ | .card-content .price { | ||
+ | font-size: 14px; | ||
+ | color: #e91e63; | ||
+ | } | ||
+ | |||
+ | .projects h4 { | ||
+ | font-size: 16px; | ||
+ | margin: 8px 0; | ||
+ | } | ||
+ | |||
+ | .projects h5 { | ||
+ | font-weight: bold; | ||
+ | font-size: 14px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | /* Testimonial | ||
+ | ----------------------------------*/ | ||
+ | .testimonial-area { | ||
+ | padding: 0 0 0 0; | ||
+ | margin:0; | ||
+ | background: url(../img/low-poly01.jpg) fixed center center; | ||
+ | background-size: cover; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -ms-background-size: cover; | ||
+ | } | ||
+ | .testimonial-solid p { | ||
+ | color: #000000; | ||
+ | font-size: 16px; | ||
+ | line-height: 30px; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | section.hero-text { | ||
+ | background: #F4783B; | ||
+ | padding:50px 0 50px 0; | ||
+ | color: #fff; | ||
+ | } | ||
+ | section.hero-text h1{ | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | /* Clients | ||
+ | ------------------------------------ */ | ||
+ | #clients { | ||
+ | padding: 60px 0; | ||
+ | } | ||
+ | #clients .client .img { | ||
+ | height: 76px; | ||
+ | width: 138px; | ||
+ | cursor: pointer; | ||
+ | -webkit-transition: box-shadow .1s linear; | ||
+ | -moz-transition: box-shadow .1s linear; | ||
+ | transition: box-shadow .1s linear; } | ||
+ | #clients .client .img:hover { | ||
+ | cursor: pointer; | ||
+ | /*box-shadow: 0px 0px 2px 0px rgb(155, 155, 155);*/ | ||
+ | border-radius: 8px; } | ||
+ | #clients .client .client1 { | ||
+ | background: url("../img/client1.png") 0 -75px; } | ||
+ | #clients .client .client1:hover { | ||
+ | background-position: 1px 0px; } | ||
+ | #clients .client .client2 { | ||
+ | background: url("../img/client2.png") 0 -75px; } | ||
+ | #clients .client .client2:hover { | ||
+ | background-position: -1px 0px; } | ||
+ | #clients .client .client3 { | ||
+ | background: url("../img/client3.png") 0 -76px; } | ||
+ | #clients .client .client3:hover { | ||
+ | background-position: 0px 0px; } | ||
+ | |||
+ | |||
+ | /* Content | ||
+ | ==================================== */ | ||
+ | |||
+ | #content { | ||
+ | position:relative; | ||
+ | background: #ffffff; | ||
+ | padding:50px 0 0px 0; | ||
+ | } | ||
+ | |||
+ | .cta-text { | ||
+ | text-align: center; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .big-cta .cta { | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | .box { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .box-gray { | ||
+ | background: #f8f8f8; | ||
+ | padding: 20px 20px 30px; | ||
+ | } | ||
+ | .box-gray h4,.box-gray i { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .box-bottom { | ||
+ | padding: 20px 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .box-bottom a { | ||
+ | color: #fff; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | .box-bottom a:hover { | ||
+ | color: #eee; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Bottom | ||
+ | ==================================== */ | ||
+ | |||
+ | #bottom { | ||
+ | background:#fcfcfc; | ||
+ | padding:50px 0 0; | ||
+ | |||
+ | } | ||
+ | /* twitter */ | ||
+ | #twitter-wrapper { | ||
+ | text-align: center; | ||
+ | width: 70%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | #twitter em { | ||
+ | font-style: normal; | ||
+ | font-size: 13px; | ||
+ | } | ||
+ | |||
+ | #twitter em.twitterTime a { | ||
+ | font-weight:600; | ||
+ | } | ||
+ | |||
+ | #twitter ul { | ||
+ | padding: 0; | ||
+ | list-style:none; | ||
+ | } | ||
+ | #twitter ul li { | ||
+ | font-size: 20px; | ||
+ | line-height: 1.6em; | ||
+ | font-weight: 300; | ||
+ | margin-bottom: 20px; | ||
+ | position: relative; | ||
+ | word-break: break-word; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* page headline | ||
+ | ==================================== */ | ||
+ | |||
+ | #inner-headline{background: #e4e4e4;position: relative;margin: 0;padding: 0;color: #1891EC;} | ||
+ | |||
+ | |||
+ | #inner-headline h2.pageTitle{ | ||
+ | color: #e91e63; | ||
+ | padding: 5px 0; | ||
+ | display:block; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /* --- breadcrumbs --- */ | ||
+ | #inner-headline ul.breadcrumb { | ||
+ | margin:40px 0; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | #inner-headline ul.breadcrumb li { | ||
+ | margin-bottom:0; | ||
+ | padding-bottom:0; | ||
+ | } | ||
+ | #inner-headline ul.breadcrumb li { | ||
+ | font-size:13px; | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | #inner-headline ul.breadcrumb li i{ | ||
+ | color:#dedede; | ||
+ | } | ||
+ | |||
+ | #inner-headline ul.breadcrumb li a { | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | ul.breadcrumb li a:hover { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | /* Forms | ||
+ | ============================= */ | ||
+ | |||
+ | /* --- contact form ---- */ | ||
+ | form#contactform input[type="text"] { | ||
+ | width: 100%; | ||
+ | border: 1px solid #f5f5f5; | ||
+ | min-height: 40px; | ||
+ | padding-left:20px; | ||
+ | font-size:13px; | ||
+ | padding-right:20px; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | |||
+ | } | ||
+ | |||
+ | form#contactform textarea { | ||
+ | border: 1px solid #f5f5f5; | ||
+ | width: 100%; | ||
+ | padding-left:20px; | ||
+ | padding-top:10px; | ||
+ | font-size:13px; | ||
+ | padding-right:20px; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | |||
+ | } | ||
+ | |||
+ | form#contactform .validation { | ||
+ | font-size:11px; | ||
+ | } | ||
+ | |||
+ | #sendmessage { | ||
+ | border:1px solid #e6e6e6; | ||
+ | background:#f6f6f6; | ||
+ | display:none; | ||
+ | text-align:center; | ||
+ | padding:15px 12px 15px 65px; | ||
+ | margin:10px 0; | ||
+ | font-weight:600; | ||
+ | margin-bottom:30px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #sendmessage.show,.show { | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | form#commentform input[type="text"] { | ||
+ | width: 100%; | ||
+ | min-height: 40px; | ||
+ | padding-left:20px; | ||
+ | font-size:13px; | ||
+ | padding-right:20px; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | -webkit-border-radius: 2px 2px 2px 2px; | ||
+ | -moz-border-radius: 2px 2px 2px 2px; | ||
+ | border-radius: 2px 2px 2px 2px; | ||
+ | |||
+ | } | ||
+ | |||
+ | form#commentform textarea { | ||
+ | width: 100%; | ||
+ | padding-left:20px; | ||
+ | padding-top:10px; | ||
+ | font-size:13px; | ||
+ | padding-right:20px; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | -webkit-border-radius: 2px 2px 2px 2px; | ||
+ | -moz-border-radius: 2px 2px 2px 2px; | ||
+ | border-radius: 2px 2px 2px 2px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* --- search form --- */ | ||
+ | .search{ | ||
+ | float:right; | ||
+ | margin:35px 0 0; | ||
+ | padding-bottom:0; | ||
+ | } | ||
+ | |||
+ | #inner-headline form.input-append { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .about-text h3 { | ||
+ | font-size: 18px; | ||
+ | padding-bottom: 0; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .about-text .btn { | ||
+ | margin-top: 20px; | ||
+ | //font-size: 15px; | ||
+ | //text-align: justify; | ||
+ | } | ||
+ | |||
+ | .about-image img { | ||
+ | } | ||
+ | |||
+ | .about-text ul { | ||
+ | margin-top: 30px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .about-text li { | ||
+ | margin-bottom: 10px; | ||
+ | // | ||
+ | font-weight: bold; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .about-text-2 img { | ||
+ | border: 5px solid #ddd; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .about-text-2 p { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #call-to-action { | ||
+ | background: url(../images/bg/about.jpg) no-repeat; | ||
+ | background-attachment: fixed; | ||
+ | background-position: top center; | ||
+ | padding: 100px 0; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .call-to-action h3 { | ||
+ | font-size: 40px; | ||
+ | letter-spacing: 15px; | ||
+ | color: #fff; | ||
+ | padding-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | .call-to-action p { | ||
+ | color: #999; | ||
+ | padding-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | .call-to-action .btn-primary { | ||
+ | background-color: transparent; | ||
+ | border-color: #999; | ||
+ | } | ||
+ | |||
+ | .call-to-action .btn-primary:hover { | ||
+ | background-color: #151515; | ||
+ | color: #999; | ||
+ | border-color: #151515; | ||
+ | } | ||
+ | |||
+ | #call-to-action-2 { | ||
+ | background-color: #efefef; | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | #call-to-action-2 h3 { | ||
+ | color: #05142b; | ||
+ | font-size: 24px; | ||
+ | font-weight: 600; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | #call-to-action-2 p { | ||
+ | color: #5f5f5f; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | #call-to-action-2 .btn-primary { | ||
+ | border-color: #FFFFFF; | ||
+ | /* background: transparent; */ | ||
+ | margin-top: 50px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | section.section-padding.gray-bg { | ||
+ | background: #ffffff; | ||
+ | padding: 60px; | ||
+ | color: #484848; | ||
+ | } | ||
+ | |||
+ | #accordion-alt3 .panel-heading h4 { | ||
+ | font-size: 13px; | ||
+ | line-height: 28px; | ||
+ | } | ||
+ | .panel .panel-heading h4 { | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | .panel-title { | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 0; | ||
+ | font-size: 15px; | ||
+ | color: inherit; | ||
+ | } | ||
+ | .panel-group .panel { | ||
+ | margin-bottom: 0; | ||
+ | border-radius: 2px; | ||
+ | } | ||
+ | .panel {margin-bottom: 18px;background-color: #FFFFFF;border: 1px solid #f3f3f3;border-radius: 2px;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);box-shadow: 0 1px 1px rgba(0,0,0,0.05);} | ||
+ | #accordion-alt3 .panel-heading h4 a i {font-size: 17px;line-height: 18px;width: 18px;height: 18px;margin-right: 8px;color: #A0A0A0;text-align: center;border-radius: 50%;margin-left: 6px;font-weight: bold;} | ||
+ | .progress.pb-sm { | ||
+ | height: 6px!important; | ||
+ | } | ||
+ | .progress { | ||
+ | box-shadow: inset 0 0 2px rgba(0,0,0,.1); | ||
+ | } | ||
+ | .progress { | ||
+ | overflow: hidden; | ||
+ | height: 18px; | ||
+ | margin-bottom: 18px; | ||
+ | background-color: #f5f5f5; | ||
+ | border-radius: 2px; | ||
+ | -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); | ||
+ | box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); | ||
+ | } | ||
+ | .progress .progress-bar.progress-bar-red { | ||
+ | background: #ed5441; | ||
+ | } | ||
+ | .progress .progress-bar.progress-bar-green { | ||
+ | background: #51d466; | ||
+ | } | ||
+ | .progress .progress-bar.progress-bar-lblue { | ||
+ | background: #32c8de; | ||
+ | } | ||
+ | /* --- portfolio detail --- */ | ||
+ | .top-wrapper { | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | .info-blocks {margin-bottom: 15px;/* background: #efefef; */} | ||
+ | .info-blocks i.icon-info-blocks {float: left;color: #e91e63;font-size: 40px;min-width: 50px;margin-top: 11px;text-align: center;background: #f5f5f5;width: 72px;height: 72px;/* padding-top: 21px; *//* border: 1px solid #e0e0e0; */line-height: 75px;} | ||
+ | .info-blocks .info-blocks-in {padding: 15px;overflow: hidden;background: #f5f5f5;} | ||
+ | .info-blocks .info-blocks-in h3 {color: #202020;font-size: 20px;line-height: 28px;margin:0px;margin-bottom: 8px;/* font-weight: bold; */} | ||
+ | .info-blocks .info-blocks-in p {font-size: 14px;} | ||
+ | |||
+ | blockquote { | ||
+ | font-size:16px; | ||
+ | font-weight:400; | ||
+ | font-family:'Noto Serif', serif; | ||
+ | font-style:italic; | ||
+ | padding-left:0; | ||
+ | color:#a2a2a2; | ||
+ | line-height:1.6em; | ||
+ | border:none; | ||
+ | } | ||
+ | |||
+ | blockquote cite { display:block; font-size:12px; color:#666; margin-top:10px; } | ||
+ | blockquote cite:before { content:"\2014 \0020"; } | ||
+ | blockquote cite a, | ||
+ | blockquote cite a:visited, | ||
+ | blockquote cite a:visited { color:#555; } | ||
+ | |||
+ | /* --- pullquotes --- */ | ||
+ | |||
+ | .pullquote-left { | ||
+ | display:block; | ||
+ | color:#a2a2a2; | ||
+ | font-family:'Noto Serif', serif; | ||
+ | font-size:14px; | ||
+ | line-height:1.6em; | ||
+ | padding-left:20px; | ||
+ | } | ||
+ | |||
+ | .pullquote-right { | ||
+ | display:block; | ||
+ | color:#a2a2a2; | ||
+ | font-family:'Noto Serif', serif; | ||
+ | font-size:14px; | ||
+ | line-height:1.6em; | ||
+ | padding-right:20px; | ||
+ | } | ||
+ | |||
+ | /* --- button --- */ | ||
+ | .btn{text-align: center;color: #FFFFFF;background: #e91e63;border-color: #e91e63;width: 120px;border-radius: 0;} | ||
+ | .btn-theme { | ||
+ | color: #fff; | ||
+ | background: transparent; | ||
+ | border: 1px solid #fff; | ||
+ | padding: 12px 30px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | a.btn.btn-details { | ||
+ | float: right; | ||
+ | margin-top: -34px; | ||
+ | font-size: 14px; | ||
+ | height: 34px; | ||
+ | width: 96px; | ||
+ | text-transform: capitalize; | ||
+ | } | ||
+ | .btn-theme:hover { | ||
+ | color: #eee; | ||
+ | } | ||
+ | |||
+ | /* --- list style --- */ | ||
+ | |||
+ | ul.general { | ||
+ | list-style:none; | ||
+ | margin-left:0; | ||
+ | } | ||
+ | |||
+ | ul.link-list{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | ul.link-list li{ | ||
+ | margin:0; | ||
+ | padding:2px 0 2px 0; | ||
+ | list-style:none; | ||
+ | } | ||
+ | footer{background: #0e0e0e;} | ||
+ | footer ul.link-list li a{ | ||
+ | color: #8C8C8C; | ||
+ | } | ||
+ | footer ul.link-list li a:hover { | ||
+ | color: #e91e63; | ||
+ | } | ||
+ | /* --- Heading style --- */ | ||
+ | |||
+ | h4.heading { | ||
+ | font-weight:700; | ||
+ | } | ||
+ | |||
+ | .heading { margin-bottom: 30px; } | ||
+ | |||
+ | .heading { | ||
+ | position: relative; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .widgetheading { | ||
+ | width:100%; | ||
+ | padding:0; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #bottom .widgetheading { | ||
+ | position: relative; | ||
+ | border-bottom: #e6e6e6 1px solid; | ||
+ | padding-bottom: 9px; | ||
+ | } | ||
+ | |||
+ | aside .widgetheading { | ||
+ | position: relative; | ||
+ | border-bottom: #e9e9e9 1px solid; | ||
+ | padding-bottom: 9px; | ||
+ | } | ||
+ | |||
+ | footer .widgetheading { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | footer .widget .social-network { | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .team-member h4{ | ||
+ | text-align: center; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | .team-member .deg{ | ||
+ | text-align:center; | ||
+ | display:block; | ||
+ | } | ||
+ | #bottom .widget .widgetheading span, aside .widget .widgetheading span, footer .widget .widgetheading span { | ||
+ | position: absolute; | ||
+ | width: 60px; | ||
+ | height: 1px; | ||
+ | bottom: -1px; | ||
+ | right:0; | ||
+ | |||
+ | } | ||
+ | .panel-title>a { | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | font-weight: 600; | ||
+ | } | ||
+ | .box-area{padding: 15px;background: #ffffff;margin-top: -21px;border: 2px solid #f3f3f3;} | ||
+ | .box-area h3{font-size: 17px;font-weight: 600;} | ||
+ | /* --- Map --- */ | ||
+ | .map{ | ||
+ | position:relative; | ||
+ | margin-top:-50px; | ||
+ | margin-bottom:40px; | ||
+ | } | ||
+ | |||
+ | .map iframe{ | ||
+ | width:100%; | ||
+ | height:450px; | ||
+ | border:none; | ||
+ | } | ||
+ | |||
+ | .map-grid iframe{ | ||
+ | width:100%; | ||
+ | height:350px; | ||
+ | border:none; | ||
+ | margin:0 0 -5px 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.team-detail{ | ||
+ | margin:-10px 0 0 0; | ||
+ | padding:0; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | ul.team-detail li{ | ||
+ | border-bottom:1px dotted #e9e9e9; | ||
+ | margin:0 0 15px 0; | ||
+ | padding:0 0 15px 0; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | ul.team-detail li label { | ||
+ | font-size:13px; | ||
+ | } | ||
+ | |||
+ | ul.team-detail li h4, ul.team-detail li label{ | ||
+ | margin-bottom:0; | ||
+ | } | ||
+ | |||
+ | ul.team-detail li ul.social-network { | ||
+ | border:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | ul.team-detail li ul.social-network li { | ||
+ | border:none; | ||
+ | margin:0; | ||
+ | } | ||
+ | ul.team-detail li ul.social-network li i { | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | .navbar-brand i { | ||
+ | color: #ffffff; | ||
+ | font-size: 26px; | ||
+ | margin-right: 5px; | ||
+ | position: relative; | ||
+ | top: 3px; | ||
+ | } | ||
+ | .pricing-title{ | ||
+ | background:#fff; | ||
+ | text-align:center; | ||
+ | padding:10px 0 10px 0; | ||
+ | } | ||
+ | |||
+ | .pricing-title h3{ | ||
+ | font-weight:600; | ||
+ | margin-bottom:0; | ||
+ | } | ||
+ | |||
+ | .pricing-offer{ | ||
+ | background: #fcfcfc; | ||
+ | text-align: center; | ||
+ | padding:40px 0 40px 0; | ||
+ | font-size:18px; | ||
+ | border-top:1px solid #e6e6e6; | ||
+ | border-bottom:1px solid #e6e6e6; | ||
+ | } | ||
+ | |||
+ | .pricing-box.activeItem .pricing-offer{ | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | .pricing-offer strong{ | ||
+ | font-size:78px; | ||
+ | line-height:89px; | ||
+ | } | ||
+ | |||
+ | .pricing-offer sup{ | ||
+ | font-size:28px; | ||
+ | } | ||
+ | |||
+ | .pricing-container{ | ||
+ | background: #fff; | ||
+ | text-align:center; | ||
+ | font-size:14px; | ||
+ | } | ||
+ | |||
+ | .pricing-container strong{ | ||
+ | color:#353535; | ||
+ | } | ||
+ | |||
+ | .pricing-container ul{ | ||
+ | list-style:none; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | .pricing-container ul li{ | ||
+ | border-bottom: 1px solid #CFCFCF; | ||
+ | list-style: none; | ||
+ | padding: 15px 0 15px 0; | ||
+ | margin: 0 0 0 0; | ||
+ | color: #222; | ||
+ | } | ||
+ | |||
+ | .pricing-action{ | ||
+ | margin:0; | ||
+ | background: #fcfcfc; | ||
+ | text-align:center; | ||
+ | padding:20px 0 30px 0; | ||
+ | } | ||
+ | |||
+ | .pricing-wrapp{ | ||
+ | margin:0 auto; | ||
+ | width:100%; | ||
+ | background:#fd0000; | ||
+ | } | ||
+ | .pricing-box-item {border: 1px solid #e6e6e6;background:#fcfcfc;position:relative;margin:0 0 20px 0;padding:0;-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.03);-moz-box-shadow: 0 2px 0 rgba(0,0,0,0.03);box-shadow: 0 2px 0 rgba(0,0,0,0.03);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow: hidden;} | ||
+ | |||
+ | .pricing-box-item .pricing-heading { | ||
+ | background: #ffffff; | ||
+ | text-align: center; | ||
+ | padding: 50px 0; | ||
+ | display:block; | ||
+ | } | ||
+ | .pricing-box-item.activeItem .pricing-heading { | ||
+ | /* background: #f3f3f3; */ | ||
+ | text-align: center; | ||
+ | border-bottom:none; | ||
+ | display:block; | ||
+ | color:#fff; | ||
+ | } | ||
+ | .pricing-box-item.activeItem .pricing-heading h3 { | ||
+ | |||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .pricing-box-item .pricing-heading h3 strong { | ||
+ | font-size:28px; | ||
+ | font-weight:700; | ||
+ | letter-spacing:-1px; | ||
+ | color: #05142b; | ||
+ | } | ||
+ | .pricing-box-item .pricing-heading h3 { | ||
+ | font-size:32px; | ||
+ | font-weight:300; | ||
+ | letter-spacing:-1px; | ||
+ | } | ||
+ | |||
+ | .pricing-box-item .pricing-terms { | ||
+ | text-align: center; | ||
+ | background: #fff; | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | padding: 11px 0 5px; | ||
+ | /* border-top: 2px solid #BBBBBB; */ | ||
+ | border-bottom: 2px dotted #CDCDCD; | ||
+ | } | ||
+ | |||
+ | .pricing-box-item .pricing-terms h6 { | ||
+ | margin-top: 16px; | ||
+ | color: #ff5722; | ||
+ | font-size: 22px; | ||
+ | } | ||
+ | |||
+ | .pricing-box-item .icon .price-circled { | ||
+ | margin: 10px 10px 10px 0; | ||
+ | display: inline-block !important; | ||
+ | text-align: center !important; | ||
+ | color: #fff; | ||
+ | width: 68px; | ||
+ | height: 68px; | ||
+ | padding:12px; | ||
+ | font-size: 16px; | ||
+ | font-weight:700; | ||
+ | line-height: 68px; | ||
+ | text-shadow:none; | ||
+ | cursor: pointer; | ||
+ | background-color: #888; | ||
+ | border-radius: 64px; | ||
+ | -moz-border-radius: 64px; | ||
+ | -webkit-border-radius: 64px; | ||
+ | } | ||
+ | |||
+ | .pricing-box-item .pricing-action{ | ||
+ | margin:0; | ||
+ | text-align:center; | ||
+ | padding:30px 0 30px 0; | ||
+ | } | ||
+ | .pricing-action .btn{ | ||
+ | background: #ff5722; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .menuItem .menu{font-size:20px;font-weight:600;list-style:none;padding:0 0 15px;margin-bottom:20px;display:inline-block;color: #e91e63;} | ||
+ | .menuItem .menu li{padding: 16px 30px 0px;margin-bottom: 0;display:inline-block;width:100%;float:left;background: #ffffff;line-height: 30px;border-left: 2px solid #e91e63;border-radius: 0;} | ||
+ | .menuItem .detail{ | ||
+ | font-size:13px; | ||
+ | color:#444; | ||
+ | font-weight:normal; | ||
+ | } | ||
+ | .menuItem .price{ | ||
+ | font-size:13px; | ||
+ | float:right; | ||
+ | font-weight:600; | ||
+ | } | ||
+ | /* Testimonials */ | ||
+ | .testimonials blockquote { | ||
+ | background: #ffffff none repeat scroll 0 0; | ||
+ | border: medium none; | ||
+ | color: #666; | ||
+ | display: block; | ||
+ | font-size: 13px; | ||
+ | line-height: 20px; | ||
+ | padding: 15px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .testimonials blockquote::before { | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | content: " "; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | border-bottom: 20px solid #fff; | ||
+ | border-right: 0 solid transparent; | ||
+ | border-left: 15px solid transparent; | ||
+ | border-left-style: inset; /*FF fixes*/ | ||
+ | border-bottom-style: inset; /*FF fixes*/ | ||
+ | } | ||
+ | .testimonials blockquote::after { | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | content: " "; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | border-style: solid; | ||
+ | border-width: 20px 20px 0 0; | ||
+ | border-color: #c5c5c5 transparent transparent transparent; | ||
+ | } | ||
+ | .testimonials .carousel-info img { | ||
+ | border: 1px solid #cccccc; | ||
+ | border-radius: 150px !important; | ||
+ | height: 75px; | ||
+ | padding: 3px; | ||
+ | width: 75px; | ||
+ | } | ||
+ | .testimonials .carousel-info { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .testimonials .carousel-info img { | ||
+ | margin-right: 15px; | ||
+ | } | ||
+ | .testimonials .carousel-info span { | ||
+ | display: block; | ||
+ | } | ||
+ | .testimonials span.testimonials-name { | ||
+ | color: #e91e63; | ||
+ | font-size: 16px; | ||
+ | font-weight: 300; | ||
+ | margin: 23px 0 7px; | ||
+ | } | ||
+ | .testimonials span.testimonials-post { | ||
+ | color: #656565; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | /* ===== Widgets ===== */ | ||
+ | |||
+ | /* --- flickr --- */ | ||
+ | .widget .flickr_badge { | ||
+ | width:100%; | ||
+ | } | ||
+ | .widget .flickr_badge img { margin: 0 9px 20px 0; } | ||
+ | |||
+ | footer .widget .flickr_badge { | ||
+ | width: 100%; | ||
+ | } | ||
+ | footer .widget .flickr_badge img { | ||
+ | margin: 0 9px 20px 0; | ||
+ | } | ||
+ | |||
+ | .flickr_badge img { | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | float: left; | ||
+ | margin: 0 9px 20px 0; | ||
+ | } | ||
+ | |||
+ | /* --- Recent post widget --- */ | ||
+ | |||
+ | .recent-post{ | ||
+ | margin:20px 0 0 0; | ||
+ | padding:0; | ||
+ | line-height:18px; | ||
+ | } | ||
+ | |||
+ | .recent-post h5 a:hover { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | .recent-post .text h5 a { | ||
+ | color:#353535; | ||
+ | } | ||
+ | |||
+ | |||
+ | footer{ | ||
+ | padding:50px 0 0 0; | ||
+ | color:#f8f8f8; | ||
+ | } | ||
+ | |||
+ | footer a { | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | footer a:hover { | ||
+ | color: #e91e63; | ||
+ | } | ||
+ | |||
+ | footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{ | ||
+ | color: #d3d3d3; | ||
+ | } | ||
+ | |||
+ | footer address { | ||
+ | line-height:1.6em; | ||
+ | color: #797979; | ||
+ | } | ||
+ | |||
+ | footer h5 a:hover, footer a:hover { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | ul.social-network { | ||
+ | list-style:none; | ||
+ | margin: 4px 0 0 -25px; | ||
+ | } | ||
+ | |||
+ | ul.social-network li { | ||
+ | display:inline; | ||
+ | margin: 0 5px; | ||
+ | /* border: 1px solid #2D2D2D; */ | ||
+ | padding: 5px 0 0; | ||
+ | width: 32px; | ||
+ | display: inline-block; | ||
+ | text-align: center; | ||
+ | height: 32px; | ||
+ | vertical-align: baseline; | ||
+ | } | ||
+ | |||
+ | #sub-footer{ | ||
+ | text-shadow:none; | ||
+ | color: #dedede; | ||
+ | padding:0; | ||
+ | padding-top:30px; | ||
+ | margin:20px 0 0 0; | ||
+ | background: #0a0a0a; | ||
+ | border-top: 1px solid #3e3e3e; | ||
+ | } | ||
+ | |||
+ | #sub-footer p{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #sub-footer span{ | ||
+ | color: #9e9e9e; | ||
+ | } | ||
+ | |||
+ | .copyright { | ||
+ | text-align:left; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | |||
+ | #sub-footer ul.social-network { | ||
+ | float:right; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* scroll to top */ | ||
+ | .scrollup{ | ||
+ | position:fixed; | ||
+ | width:32px; | ||
+ | height:32px; | ||
+ | bottom:0px; | ||
+ | right:20px; | ||
+ | background: #e91e63; | ||
+ | } | ||
+ | |||
+ | a.scrollup { | ||
+ | outline:0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | a.scrollup:hover,a.scrollup:active,a.scrollup:focus { | ||
+ | opacity:1; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | a.scrollup i { | ||
+ | margin-top: 10px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | a.scrollup i:hover { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .absolute{ | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | .relative{ | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .aligncenter{ | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | .aligncenter span{ | ||
+ | margin-left:0; | ||
+ | } | ||
+ | |||
+ | .floatright { | ||
+ | float:right; | ||
+ | } | ||
+ | |||
+ | .floatleft { | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .floatnone { | ||
+ | float:none; | ||
+ | } | ||
+ | |||
+ | .aligncenter { | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | img.pull-left, .align-left{ | ||
+ | float:left; | ||
+ | margin:0 15px 15px 0; | ||
+ | } | ||
+ | |||
+ | .widget img.pull-left { | ||
+ | float:left; | ||
+ | margin:0 15px 15px 0; | ||
+ | } | ||
+ | |||
+ | img.pull-right, .align-right { | ||
+ | float:right; | ||
+ | margin:0 0 15px 15px; | ||
+ | } | ||
+ | |||
+ | article img.pull-left, article .align-left{ | ||
+ | float:left; | ||
+ | margin:5px 15px 15px 0; | ||
+ | } | ||
+ | |||
+ | article img.pull-right, article .align-right{ | ||
+ | float:right; | ||
+ | margin:5px 0 15px 15px; | ||
+ | } | ||
+ | ============================= */ | ||
+ | |||
+ | .clear-marginbot{ | ||
+ | margin-bottom:0; | ||
+ | } | ||
+ | |||
+ | .marginbot10{ | ||
+ | margin-bottom:10px; | ||
+ | } | ||
+ | .marginbot20{ | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | .marginbot30{ | ||
+ | margin-bottom:30px; | ||
+ | } | ||
+ | .marginbot40{ | ||
+ | margin-bottom:40px; | ||
+ | } | ||
+ | |||
+ | .clear-margintop{ | ||
+ | margin-top:0; | ||
+ | } | ||
+ | |||
+ | .margintop10{ | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | .margintop20{ | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | .margintop30{ | ||
+ | margin-top:30px; | ||
+ | } | ||
+ | |||
+ | .margintop40{ | ||
+ | margin-top:40px; | ||
+ | } | ||
+ | .flex-control-paging li a { | ||
+ | width: 14px; | ||
+ | height: 14px; | ||
+ | border-radius: 50%; | ||
+ | background: #ffffff; | ||
+ | text-indent: 50px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .btn:hover, .btn:focus { | ||
+ | color: #FFF; | ||
+ | text-decoration: none; | ||
+ | background: #d41a59; | ||
+ | border-color: #d41a59; | ||
+ | } | ||
+ | /* Media queries | ||
+ | ============================= */ | ||
+ | |||
+ | @media (min-width: 768px) and (max-width: 979px) { | ||
+ | |||
+ | a.detail{ | ||
+ | background:none; | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | header .navbar-nav > li > a{ | ||
+ | |||
+ | } | ||
+ | |||
+ | footer .widget form input#appendedInputButton { | ||
+ | display: block; | ||
+ | width: 91%; | ||
+ | -webkit-border-radius: 4px 4px 4px 4px; | ||
+ | -moz-border-radius: 4px 4px 4px 4px; | ||
+ | border-radius: 4px 4px 4px 4px; | ||
+ | } | ||
+ | |||
+ | footer .widget form .input-append .btn { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | padding-right: 0; | ||
+ | padding-left: 0; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | ul.related-folio li{ | ||
+ | width:156px; | ||
+ | margin:0 20px 0 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | .navbar-default .navbar-collapse{border-color: none;/* background: #05142b; */} | ||
+ | .navbar-default .navbar-toggle .icon-bar {background-color: #868686;border-radius: 0;} | ||
+ | .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { | ||
+ | background-color: rgba(221, 221, 221, 0); | ||
+ | } | ||
+ | .navbar-default .navbar-collapse, .navbar-default .navbar-form { | ||
+ | border-color: rgba(255, 255, 255, 0.58); | ||
+ | margin-top: 15px; | ||
+ | } | ||
+ | .flex-caption h3{ | ||
+ | font-size:28px; | ||
+ | } | ||
+ | body { | ||
+ | padding-right: 0; | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | .navbar-brand { | ||
+ | margin-top: 18px; | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | .navbar-header { | ||
+ | /* margin-top: 20px; */ | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | .navbar-nav { | ||
+ | border-top: none; | ||
+ | float: none; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .navbar .nav > .active > a, .navbar .nav > .active > a:hover {background: none;font-weight: 700;color: #10cdff;} | ||
+ | header .navbar-nav > li {padding-bottom: 0;padding-top: 0;} | ||
+ | header .nav li .dropdown-menu { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | header .navbar-nav > li > a{ | ||
+ | line-height: 20px; | ||
+ | } | ||
+ | .dropdown-menu { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 40px; | ||
+ | z-index: 1000; | ||
+ | display: none; | ||
+ | float: left; | ||
+ | min-width: 160px; | ||
+ | padding: 5px 0; | ||
+ | margin: 2px 0 0; | ||
+ | font-size: 13px; | ||
+ | list-style: none; | ||
+ | background-color: #fff; | ||
+ | background-clip: padding-box; | ||
+ | border: 1px solid #f5f5f5; | ||
+ | border: 1px solid rgba(0, 0, 0, .15); | ||
+ | border-radius: 0; | ||
+ | -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); | ||
+ | box-shadow: 0 6px 12px rgba(0, 0, 0, .175); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | li.active { | ||
+ | border: none; | ||
+ | overflow: hidden; | ||
+ | /* background: #2e8eda; */ | ||
+ | } | ||
+ | |||
+ | |||
+ | .box { | ||
+ | border-bottom:1px solid #e9e9e9; | ||
+ | padding-bottom:20px; | ||
+ | } | ||
+ | |||
+ | .flexslider .slide-caption { | ||
+ | width: 90%; | ||
+ | padding: 2%; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | bottom: -40px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #inner-headline .breadcrumb { | ||
+ | float:left; | ||
+ | clear:both; | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | .breadcrumb > li { | ||
+ | font-size:13px; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.portfolio li article a i.icon-48{ | ||
+ | width:20px; | ||
+ | height:20px; | ||
+ | font-size:16px; | ||
+ | line-height:20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .left-sidebar{ | ||
+ | border-right:none; | ||
+ | padding:0 0 0 0; | ||
+ | border-bottom: 1px dotted #e6e6e6; | ||
+ | padding-bottom:10px; | ||
+ | margin-bottom:40px; | ||
+ | } | ||
+ | |||
+ | .right-sidebar{ | ||
+ | margin-top:30px; | ||
+ | border-left:none; | ||
+ | padding:0 0 0 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | footer .col-lg-1, footer .col-lg-2, footer .col-lg-3, footer .col-lg-4, footer .col-lg-5, footer .col-lg-6, | ||
+ | footer .col-lg-7, footer .col-lg-8, footer .col-lg-9, footer .col-lg-10, footer .col-lg-11, footer .col-lg-12{ | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | |||
+ | #sub-footer ul.social-network { | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | [class*="span"] { | ||
+ | margin-bottom:20px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media (max-width: 480px) { | ||
+ | .bottom-article a.pull-right { | ||
+ | float:left; | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .search{ | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .flexslider .flex-caption { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .cta-text { | ||
+ | margin:0 auto; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | ul.portfolio li article a i{ | ||
+ | width:20px; | ||
+ | height:20px; | ||
+ | font-size:14px; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | .tab-section .col{ | ||
+ | |||
+ | } | ||
+ | .tab-section .container{ | ||
+ | padding: 15px; | ||
+ | border: 1px solid #eaeaea; | ||
+ | background: #fff; | ||
+ | } | ||
+ | .active .collapsible-header{color: #e91e63;} | ||
+ | span.color { | ||
+ | color: #e91e63; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .input-field label { | ||
+ | color: #888; | ||
+ | font-size:14px; | ||
+ | } | ||
+ | .input-field { | ||
+ | position: relative; | ||
+ | margin-top: 1rem; | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .alert-danger { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | |||
+ | /********************** | ||
+ | ****iGEM************************************************************* | ||
+ | **************/ | ||
+ | <script> | ||
+ | if ($('.firstHeading')) $('.firstHeading').remove(); | ||
+ | </script> | ||
+ | <style> | ||
+ | html { | ||
+ | overflow-x: hidden; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .banner-top { | ||
+ | margin-left: 15%; | ||
+ | } | ||
+ | |||
+ | #igem_home_logo { | ||
+ | width: 100%; | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) { | ||
+ | .work-content .col-md-4 { | ||
+ | width: 25%; | ||
+ | margin-right: 8%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .carousel-control.left, | ||
+ | .carousel-control.right { | ||
+ | background-image: none; | ||
+ | padding-top: 18%; | ||
+ | } | ||
+ | |||
+ | .carousel-indicators li { | ||
+ | background-color: #fff; | ||
+ | border: 1px solid #a94442; | ||
+ | } | ||
+ | |||
+ | .carousel-indicators li.active { | ||
+ | background-color: #f0ad4e; | ||
+ | } | ||
+ | |||
+ | #contentSub, | ||
+ | #contentcontainer, | ||
+ | #footer-box, | ||
+ | #sitesub, | ||
+ | #catlinks, | ||
+ | #search-controls, | ||
+ | #p-logo, | ||
+ | .h3, | ||
+ | .printfooter, | ||
+ | .firstHeading, | ||
+ | .visualClear { | ||
+ | display: none; | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | |||
+ | #sideMenu, | ||
+ | #top_title { | ||
+ | display: none; | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | |||
+ | #sideMenu .mainMenu_toggle, | ||
+ | #sideMenu .mainMenu_Title, | ||
+ | #sideMenu .sideMenuTitle, | ||
+ | #sideMenu .expand_subMenus { | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | |||
+ | #bodyContent h1, | ||
+ | #bodyContent h2, | ||
+ | #bodyContent h3, | ||
+ | #bodyContent h4, | ||
+ | #bodyContent h5 { | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #search_text { | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, | ||
+ | #content { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1200px) { | ||
+ | .container-fluid .container { | ||
+ | width: 969px; | ||
+ | /* margin-left: 300px; */ | ||
+ | } | ||
+ | .head-container { | ||
+ | width: 1170px; | ||
+ | } | ||
+ | } | ||
+ | /* article */ | ||
+ | |||
+ | .text-content article p { | ||
+ | text-indent: 20px; | ||
+ | margin: 10px 0; | ||
+ | font-size: 15px; | ||
+ | line-height: 24px; | ||
+ | } | ||
+ | |||
+ | .text-content article img { | ||
+ | width: 80%; | ||
+ | padding-left: 20%; | ||
+ | /* margin-left: 20%; */ | ||
+ | } | ||
+ | /* .mw-content-ltr ol{ | ||
+ | margin:0; | ||
+ | } */ | ||
+ | |||
+ | ol.carousel-indicators { | ||
+ | position: absolute; | ||
+ | bottom: 10px; | ||
+ | left: 50%; | ||
+ | z-index: 15; | ||
+ | width: 60%; | ||
+ | padding-left: 0; | ||
+ | margin-left: -30%; | ||
+ | text-align: center; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | @charset "utf-8"; | ||
+ | body { | ||
+ | font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; | ||
+ | color: #666; | ||
+ | width:100%; | ||
+ | } | ||
+ | .logo { | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #myCarousel { | ||
+ | margin: 50px 0 0 0; | ||
+ | } | ||
+ | #navbar-collapse ul { | ||
+ | margin-top:0; | ||
+ | } | ||
+ | .carousel-inner img { | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | /*.carousel-control { | ||
+ | font-size: 100px; | ||
+ | }*/ | ||
+ | .tab-h1 { | ||
+ | width:100%; | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
+ | letter-spacing: 1px; | ||
+ | color: #ffffff; | ||
+ | background-color:#97477c; | ||
+ | padding: 30px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .tab-p { | ||
+ | font-size: 20px; | ||
+ | text-align: center; | ||
+ | letter-spacing: 1px; | ||
+ | color: #999; | ||
+ | margin: 20px 0 40px 0; | ||
+ | } | ||
+ | |||
+ | .container-fluid{ | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | .tab1 { | ||
+ | width:100%; | ||
+ | margin: 0 0; | ||
+ | color: #666; | ||
+ | background:#333; | ||
+ | } | ||
+ | |||
+ | .tab1 .text-muted { | ||
+ | color: #999; | ||
+ | text-decoration: line-through; | ||
+ | } | ||
+ | .tab1 .media-heading { | ||
+ | margin: 5px 0 20px 0; | ||
+ | } | ||
+ | .tab1 .col { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | .text span{ | ||
+ | color: #97477c; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | #footer { | ||
+ | background-color: #eee; | ||
+ | border-top: 1px solid #ccc; | ||
+ | padding: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .text h4{ | ||
+ | padding: 5px 10px; | ||
+ | } | ||
+ | .text p{ | ||
+ | padding: 2px 10px; | ||
+ | } | ||
+ | .text h5{ | ||
+ | padding: 3px 10px; | ||
+ | } | ||
+ | .dropdown button{ | ||
+ | margin: 2px 20px; | ||
+ | } | ||
+ | /*没有小于768px,是因为Bootstrap3以移动端优先设计*/ | ||
+ | |||
+ | /* 小屏幕(平板,大于等于768px) */ | ||
+ | @media (min-width: 768px) { | ||
+ | .tab-h1 { | ||
+ | font-size: 26px; | ||
+ | } | ||
+ | .tab-p { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | .text h3 { | ||
+ | font-size: 22px; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 10px; | ||
+ | text-indent: 20px; | ||
+ | } | ||
+ | .tab2-text { | ||
+ | float: left; | ||
+ | } | ||
+ | .tab2-img { | ||
+ | float: right; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* 中等屏幕(桌面显示器,大于等于992px) */ | ||
+ | @media (min-width: 992px) { | ||
+ | .tab-h1 { | ||
+ | font-size: 28px; | ||
+ | } | ||
+ | .tab-p { | ||
+ | font-size: 17px; | ||
+ | } | ||
+ | .text h3 { | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 12px; | ||
+ | text-indent: 24px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* 大屏幕(大桌面显示器,大于等于1200px) */ | ||
+ | @media (min-width: 1200px) { | ||
+ | .tab-h1 { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | .tab-p { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | .text h3 { | ||
+ | font-size: 26px; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 14px; | ||
+ | text-indent: 28px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | body { | ||
+ | position: relative; | ||
+ | } | ||
+ | ul.nav-pills { | ||
+ | top: 200px; | ||
+ | position: fixed; | ||
+ | } | ||
+ | ul.nav-pills2 { | ||
+ | bottom:50px; | ||
+ | position: fixed; | ||
+ | } | ||
+ | div.col-sm-10 div { | ||
+ | min-height: 10px; | ||
+ | font-size: 14px; | ||
+ | text-indent: 28px; | ||
+ | color:#0f0f0f; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 992px) { | ||
+ | #section1, #section2, #section3, #section4, #section5 { | ||
+ | background-color: #eee; color:#171717; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | position: relative; | ||
+ | } | ||
+ | .menu_logo_1 { | ||
+ | top: 18px; | ||
+ | left:80px; | ||
+ | z-index: -1000; | ||
+ | opacity: 0.8; | ||
+ | position: fixed; | ||
+ | } | ||
+ | .menu_logo_2 { | ||
+ | top: 18px; | ||
+ | left:170px; | ||
+ | z-index: -1000; | ||
+ | opacity: 0.8; | ||
+ | position: fixed; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> | ||
+ | <!--[if lt IE 9]> | ||
+ | <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | ||
+ | <![endif]--> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Team:HUST-China/css/menu-slider?action=raw&ctype=text/css" type="text/css" /> | ||
+ | <script type="text/javascript" src="https://2018.igem.org/Team:HUST-China/js/slider-jquery?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2018.igem.org/Team:HUST-China/js/slider-jquery-flexslider-min?action=raw&ctype=text/javascript"></script> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Team:HUST-China/js/change?action=raw&ctype=text/css" type="text/css" /> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Team:HUST-China/js/changetwo?action=raw&ctype=text/css" type="text/css" /"/> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <div id="wrapper" class="home-page"> | ||
+ | <!-- start header --> | ||
+ | <header style="margin-top: 12px"> | ||
+ | <div class="navbar navbar-default navbar-static-top"> | ||
+ | <div class="container"> | ||
+ | <div class="navbar-header"> | ||
+ | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | <span class="icon-bar"></span> | ||
+ | </button> | ||
+ | <a class="navbar-brand" href="index.html"><i class="icon-info-blocks material-icons">account_balance</i>2018-HUST-China</a> | ||
+ | </div> | ||
+ | <div class="navbar-collapse collapse "> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="HillSide"><a class="waves-effect waves-dark" href="index.html">Home</a></li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" data-toggle="dropdown" class="dropdown-toggle waves-effect waves-dark">PROJECT<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/project/background">Background</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Description">Description</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Safety">Safety</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Demonstrate">Demonstrate</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" data-toggle="dropdown" class="dropdown-toggle waves-effect waves-dark">WETLAB<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Experiments">Experiments</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Results">Results</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/InterLab">Interlab</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Notebook">Notebook</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/wetlab/protocols">Protocols</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Model">MODEL</a></li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" data-toggle="dropdown" class="dropdown-toggle waves-effect waves-dark">PARTS<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Basic part">Basic part</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Composite part">Composite part</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Part collection">Part collection</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" data-toggle="dropdown" class="dropdown-toggle waves-effect waves-dark">HP<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Collaborations">Collaborations</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/HP/Silver">HP/Silver</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Engagement">Engagement</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" data-toggle="dropdown" class="dropdown-toggle waves-effect waves-dark">TEAM<b class="caret"></b></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/Team">Team Roster</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="https://2018.igem.org/Team:HUST-China/HP/Silver">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </header> | ||
+ | <!-- end header --> | ||
+ | |||
+ | <section id="inner-headline"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <h2 class="pageTitle">Interlab</h2> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | <section id="inter-lab"> | ||
+ | <div id="context"> | ||
+ | <h2 align="center">Introduction</h2> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10" align="center"> | ||
+ | <p align="center"> | ||
+ | It is significant for synthetic biology to develop a reliable and repeatable measurement, the same to all the other engineering disciplines. We HUST-China have volunteered to test some RBS devices (BCDs) that are intended to make gene expression more precise and reliable by measure the expression level of GFP, in order to help the iGEM community collect data about how reliable will these devices turn out to be in labs around the world. | ||
+ | </p> | ||
+ | |||
+ | |||
+ | |||
+ | <p> | ||
+ | |||
+ | <h3>Provenance and release</h3> | ||
+ | |||
+ | <p>What chassis did you use?</p> | ||
+ | Escherichia coli DH5α | ||
+ | <p>What Biosafety Level is your chassis?</p> | ||
+ | BSL1 | ||
+ | <p>What PPE did you utilize during your experiments?</p> | ||
+ | T ianming gloves | ||
+ | Songxinjiujiu labcoats | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</p> | </p> | ||
+ | |||
+ | <p> | ||
+ | <h3>Instrument</h3> | ||
+ | |||
+ | <p>What instrument did you use during your measurements?</p> | ||
+ | plate reader | ||
+ | <p>Please provide the brand and model of your instrument.</p> | ||
+ | Flexstation 3 | ||
+ | |||
+ | |||
+ | </p> | ||
+ | |||
+ | <p> | ||
+ | <h3>Calibration protocol</h3> | ||
+ | <p>A1. OD600 reference point-LUDOX protocol</p> | ||
+ | Did you use pathlength correction during measurement? | ||
+ | Yes | ||
+ | <p>Number of flashes per well</p> | ||
+ | 6 | ||
+ | <p>Orbital averaging (nm)</p> | ||
+ | 600 | ||
+ | <p>What temperature setting did you use during the measurement?</p> | ||
+ | 22℃ | ||
+ | <p>What type of 96-well plate did you use?</p> | ||
+ | Black plate (preferred) | ||
+ | <p>Did your plate have flat-bottomed or round-bottomed wells?</p> | ||
+ | Flat | ||
+ | </p> | ||
+ | |||
+ | <div class="accordion"> | ||
+ | <dl> | ||
+ | <dt> | ||
+ | <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">A2. Measurement Steps(more details)</a> | ||
+ | </dt> | ||
+ | <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> | ||
+ | <p> | ||
+ | Add 100ul LUDOX into wells A1, B1, C1,D1 | ||
+ | Measure absorbance at 600 nm of all samples in the measurement mode you plan to use for | ||
+ | cell measurements | ||
+ | </p> | ||
+ | <p> | ||
+ | Add 100ul ddH2O into wells A2, B2, C2,D2 | ||
+ | Record the data in the table below or in your notebook | ||
+ | Import data into Excel sheet provided (OD600 reference point tab) B1. Particle standard curve-microsphere protocol</p> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <p>Did you use pathlength correction during measurement?</p> | ||
+ | Yes | ||
+ | Number of flashes per well | ||
+ | 6 | ||
+ | <p>Orbital averaging (nm)</p> | ||
+ | 600 | ||
+ | What temperature setting did you use during the measurement? | ||
+ | 22℃ | ||
+ | What type of 96-well plate did you use? | ||
+ | Black plate (preferred) | ||
+ | <p>Did your plate have flat-bottomed or round-bottomed wells?</p> | ||
+ | Flat | ||
+ | <p>B2. Measurement Steps</p> | ||
+ | |||
+ | |||
+ | <div class="accordion"> | ||
+ | <dl> | ||
+ | <dt> | ||
+ | <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Prepare the Microsphere Stock Solution: (more details)</a> | ||
+ | </dt> | ||
+ | <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> | ||
+ | <p> | ||
+ | Add 100ul LUDOX into wells A1, B1, C1,D1 | ||
+ | </p> | ||
+ | <p> | ||
+ | Add 100ul ddH2O into wells A2, B2, C2,D2 | ||
+ | </p> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | |||
+ | |||
</div> | </div> | ||
+ | <p>❏ Obtain the tube labeled “Silica Beads” from the InterLab test kit and vortex</p> | ||
+ | <p>❏vigorously for 30 seconds. NOTE: Microspheres should NOT bestored at 0°C or below, as freezing affects the properties of the microspheres. If you believe your microspheres may have been frozen, please contact the iGEM Measurement </p> | ||
+ | Committee for a replacement (measurement at igem dot org). | ||
+ | <p>❏ Immediately pipet 96 μL microspheres into a 1.5 mL eppendorf tube </p> | ||
+ | <p>❏ Add 904 μL of ddH2O to the microspheres </p> | ||
+ | <p>❏ Vortex well. This is your Microsphere Stock Solution.</p> | ||
+ | <div class="accordion"> | ||
+ | <dl> | ||
+ | <dt> | ||
+ | <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Prepare the serial dilution of Microspheres: (more details)</a> | ||
+ | </dt> | ||
+ | <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> | ||
+ | <p> | ||
+ | Accurate pipetting is essential. Serial dilutions will be performed across columns 1-11. COLUMN 12 MUST CONTAIN ddH2O ONLY. | ||
+ | </p> | ||
+ | <p> | ||
+ | Initially you will setup the plate with the microsphere stock solution in column 1 and an equal volume of 1x ddH2O in columns 2 to 12. You will perform a serial dilution by consecutively transferring 100 μl from column to column with good mixing. | ||
+ | </p> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | </div> | ||
+ | |||
+ | <section id="B"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915125339%21T--HUST-China--2018-Intelab-pic1.png"> | ||
+ | |||
+ | <p> | ||
+ | <p>❏Add 100 μl of ddH2O into wells A2, B2, C2, D2....A12, B12, C12, D12 </p> | ||
+ | <p>❏Vortex the tube containing the stock solution of microspheres vigorously for 10 seconds</p> | ||
+ | <p>❏Immediately add 200 μl of microspheres stock solution into A1 </p> | ||
+ | <p>❏Transfer 100 μl of microsphere stock solution from A1 into A2. </p> | ||
+ | <p>❏Mix A2 by pipetting up and down 3x and transfer 100 μl into A3…</p> | ||
+ | <p>❏Mix A3 by pipetting up and down 3x and transfer 100 μl into A4... </p> | ||
+ | <p>❏Mix A4 by pipetting up and down 3x and transfer 100 μl into A5... </p> | ||
+ | <p>❏Mix A5 by pipetting up and down 3x and transfer 100 μl into A6... </p> | ||
+ | <p>❏Mix A6 by pipetting up and down 3x and transfer 100 μl into A7... </p> | ||
+ | <p>❏Mix A7 by pipetting up and down 3x and transfer 100 μl into A8... </p> | ||
+ | <p>❏ Mix A8 by pipetting up and down 3x and transfer 100 μl into A9... </p> | ||
+ | <p>❏Mix A9 by pipetting up and down 3x and transfer 100 μl into A10... </p> | ||
+ | <p>❏Mix A10 by pipetting up and down 3x and transfer 100 μl into A11... </p> | ||
+ | <p>❏Mix A11 by pipetting up and down 3x and transfer 100 μl into liquid waste</p> | ||
+ | <p>TAKE CARE NOT TO CONTINUE SERIAL DILUTION INTO COLUMN 12. </p> | ||
+ | <p>❏ Repeat dilution series for rows B, C, D </p> | ||
+ | <p>❏ IMPORTANT! Re-Mix (Pipette up and down) each row of your plate immediately</p> | ||
+ | before putting in the plate reader! (This is important because the beads begin to settle to | ||
+ | the bottom of the wells within about 10 minutes, which will affect the measurements.) Take | ||
+ | care to mix gently and avoid creating bubbles on the surface of the liquid. | ||
+ | <p>❏ Measure Abs600 of all samples in instrument </p> | ||
+ | <p>❏ Record the data in your notebook </p> | ||
+ | <p>❏ Import data into Excel sheet provided (particle standard curve tab)</p> | ||
+ | <p>C1: Fluorescence standard curve - Fluorescein Protocol</p> | ||
+ | <p>Did you use pathlength correction during measurement?</p> | ||
+ | Yes | ||
+ | <p>Number of flashes per well</p> | ||
+ | 6 | ||
+ | <p>What gain setting did you use?</p> | ||
+ | <p>Automatic</p> | ||
+ | <p>If you used a filter, what light wavelengths did it pass?</p> | ||
+ | <p>530nm</p> | ||
+ | <p>Emission wavelength</p> | ||
+ | 525nm | ||
+ | <p>Excitation wavelength</p> | ||
+ | 485nm | ||
+ | <p>Fluorescence reading</p> | ||
+ | Bottom optic | ||
+ | <p>What type of 96-well plate did you use?</p> | ||
+ | <p>Black plate (preferred)</p> | ||
+ | <p>Did your plate have flat-bottomed or round-bottomed wells?</p> | ||
+ | Flat | ||
+ | <p>What temperature setting did you use during the measurement?</p> | ||
+ | 22℃ | ||
+ | <p>C2. Measurement Steps</p> | ||
+ | </p> | ||
+ | <div class="accordion"> | ||
+ | <dl> | ||
+ | <dt> | ||
+ | <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Prepare the fluorescein stock solution: (more details)</a> | ||
+ | </dt> | ||
+ | <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> | ||
+ | <p> | ||
+ | ❏ Spin down fluorescein kit tube to make sure pellet is at the bottom of tube.<br/> | ||
+ | ❏ Prepare 10x fluorescein stock solution (100 μM) by resuspending fluorescein in 1 | ||
+ | mL of 1xPBS. [ Note: it is important that the fluorescein is properly dissolved. To check this, after the resuspension you should pipette up anddown and examine the solution in the pipette tip – if anyparticulates are visible in the pipette tip continue to mix the solution until they disappear.]<br/> | ||
+ | </p> | ||
+ | <p> | ||
+ | ❏ Dilute the 10x fluorescein stock solution with 1xPBS to make a 1x fluorescein solution with concentration 10 μM: 100 μL of 10x fluorescein stock into 900 μL 1x PBS<br/> | ||
+ | </p> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | </div> | ||
+ | <div class="accordion"> | ||
+ | <dl> | ||
+ | <dt> | ||
+ | <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Prepare the serial dilutions of fluorescein: (more details)</a> | ||
+ | </dt> | ||
+ | <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> | ||
+ | <p> | ||
+ | ❏Accurate pipetting is essential. Serial dilutions will be performed across columns 1-11. COLUMN 12 MUST CONTAIN PBS BUFFER ONLY. <br/> | ||
+ | </p> | ||
+ | <p> | ||
+ | ❏ Initially you will setup the plate with the fluorescein stock in column 1 and an equal volume of 1xPBS in columns 2 to 12. You will perform a serial dilution by consecutively transferring 100 μl from column to column with good mixing. <br/> | ||
+ | </p> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | </div> | ||
+ | |||
+ | </section> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915125459%21T--HUST-China--2018-Intelab-pic1.png"> | ||
+ | <p> | ||
+ | <p> ❏Add 100 μl of PBS into wells A2, B2, C2, D2....A12, B12, C12, D12 </p> | ||
+ | <p>❏ Add 200 μl of fluorescein 1x stock solution into A1, B1, C1, D1 </p> | ||
+ | <p>❏ Transfer 100 μl of fluorescein stock solution from A1 into A2. </p> | ||
+ | <p>❏ Mix A2 by pipetting up and down 3x and transfer 100 μl into A3…</p> | ||
+ | <p>❏ Mix A3 by pipetting up and down 3x and transfer 100 μl into A4...</p> | ||
+ | <p>❏Mix A4 by pipetting up and down 3x and transfer 100 μl into A5... </p> | ||
+ | <p>❏ Mix A5 by pipetting up and down 3x and transfer 100 μl into A6... </p> | ||
+ | <p>❏ Mix A6 by pipetting up and down 3x and transfer 100 μl into A7... </p> | ||
+ | <p>❏ Mix A7 by pipetting up and down 3x and transfer 100 μl into A8... </p> | ||
+ | <p>❏ Mix A8 by pipetting up and down 3x and transfer 100 μl into A9... </p> | ||
+ | <p>❏ Mix A9 by pipetting up and down 3x and transfer 100 μl into A10... </p> | ||
+ | <p>❏ Mix A10 by pipetting up and down 3x and transfer 100 μl into A11... </p> | ||
+ | <p>❏ Mix A11 by pipetting up and down 3x and transfer 100 μl into liquid waste | ||
+ | TAKE CARE NOT TO CONTINUE SERIAL DILUTION INTO COLUMN 12. </p> | ||
+ | <p>❏ Repeat dilution series for rows B, C, D </p> | ||
+ | <p>❏ Measure fluorescence of all samples in instrument</p> | ||
+ | <p>❏ Record the data in your notebook </p> | ||
+ | <p>❏ Import data into Excel sheet provided (fluorescein standard curve tab) </p> | ||
+ | </p> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/archive/1/1e/20180919143411%21T--HUST-China--2018-Intelab-pic3.png"> | ||
+ | <h3>Cell culture setup and meaturement</h3> | ||
+ | <p> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915125522%21T--HUST-China--2018-Intelab-pic1.png"> | ||
+ | <h5>Transformation:</h5> | ||
+ | <p>Negative control BBa_R0040 Kit Plate 7 Well 2D </p><!-- 前面加入图片--> | ||
+ | <p>Positive control BBa_I20270 Kit Plate 7 Well 2B </p> | ||
+ | <p>Test Device 1 BBa_J364000 Kit Plate 7 Well 2F </p> | ||
+ | <p>Test Device 2 BBa_J364001 Kit Plate 7 Well 2H </p> | ||
+ | <p>Test Device 3 BBa_J364002 Kit Plate 7 Well 2J </p> | ||
+ | <p>Test Device 4 BBa_J364007 Kit Plate 7 Well 2L </p> | ||
+ | <p>Test Device 5 BBa_J364008 Kit Plate 7 Well 2N </p> | ||
+ | <p>Test Device 6 BBa_J364009 Kit Plate 7 Well 2P </p> | ||
+ | </p> | ||
+ | <div class="accordion"> | ||
+ | <dl> | ||
+ | <dt> | ||
+ | <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Cell grow:</a> | ||
+ | </dt> | ||
+ | <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> | ||
+ | <p> | ||
+ | ❏Pick 2 colonies from each of the transformation plates and inoculate in 5-10 mL LB medium + Chloramphenicol. Grow the cells overnight (16-18 hours) at 37°C and 220 rpm. <br/> | ||
+ | </p> | ||
+ | |||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | </div> | ||
+ | <div class="accordion"> | ||
+ | <dl> | ||
+ | <dt> | ||
+ | <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Cell growth, sampling, and assay</a> | ||
+ | </dt> | ||
+ | <dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true"> | ||
+ | <p> | ||
+ | ❏Make a 1:10 dilution of each overnight culture in LB+Chloramphenicol (0.5mL of culture into 4.5mL of LB+Chlor) <br/> | ||
+ | ❏Measure Abs600 of these 1:10 diluted cultures <br/> | ||
+ | ❏Record the data in your notebook<br/> | ||
+ | ❏ Dilute the cultures further to a target Abs600 of 0.02 in a final volume of 12 ml LBmedium + Chloramphenicol in 50 mL falcon tube (amber, or covered with foil to block light). <br/> | ||
+ | ❏ Take 500 µL samples of the diluted cultures at 0 hours into 1.5 ml eppendorf tubes, prior to incubation. (At each time point 0 hours and 6 hours, you will take a sample from each of the 8 devices, two colonies per device, for a total of 16 eppendorf tubes with 500 µL samples per time point, 32 samples total). Place the samples on ice. <br/> | ||
+ | </p> | ||
+ | <p> | ||
+ | ❏ Incubate the remainder of the cultures at 37°C and 220 rpm for 6 hours. <br/> | ||
+ | ❏ Take 500 µL samples of the cultures at 6 hours of incubation into 1.5 ml eppendorf tubes. Place samples on ice.<br/> | ||
+ | ❏ At the end of sampling point you need to measure your samples (Abs600 andfluorescence measurement), see the below for details. <br/> | ||
+ | ❏ Record data in your notebook.<br/> | ||
+ | ❏ Import data into Excel sheet provided (fluorescence measurement tab) <br/> | ||
+ | </p> | ||
+ | </dd> | ||
+ | |||
+ | </dl> | ||
+ | </div> | ||
+ | <p> | ||
+ | <p><h3>The initial OD600 measurement of our overnight cultures</h3></p> | ||
+ | <p>What type of media did you use for this step?</p> | ||
+ | <p>Luria Bertani</p> | ||
+ | <p>What type of vessel or container did you use to grow your cells?</p> | ||
+ | 50 ml Falcon tube | ||
+ | <p>What temperature setting did you use during the measurement?</p> | ||
+ | 22℃ | ||
+ | <p>What type of 96-well plates did you use? </p> | ||
+ | <p>Black plates with transparent/clear bottom (preferred)</p> | ||
+ | <p>Flat</p> | ||
+ | <p>Measurement</p> | ||
+ | <p><h2>o Measure OD and fluorescence of all samples</h2></p> | ||
+ | <p>Suggested Plate Layout for 96-well Plate</p> | ||
+ | |||
+ | </p> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130021%21T--HUST-China--2018-Intelab-pic1.png"> | ||
+ | |||
+ | <p><h2>Interlab result</h2></p> | ||
+ | <div class="col-md-1"></div> | ||
+ | |||
+ | <div class="col-md-10" align="center"> <p> OD600 reference point</p><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130104%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | |||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10 "align="center"> <p>Particle standard curve</p><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130140%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/archive/1/1e/20180919143422%21T--HUST-China--2018-Intelab-pic3.png" ></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/archive/1/1e/20180919143432%21T--HUST-China--2018-Intelab-pic3.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130201%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10" align="center"><p>Fluorescein standard curve</p> <img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130227%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/1/1e/T--HUST-China--2018-Intelab-pic3.png" ></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/b/b1/T--HUST-China--2018-Intelab-pic2.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10" align="center"><p>Raw Plate Reader Measurements</p><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130250%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130305%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130324%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-1"></div> | ||
+ | <div class="col-md-10" align="center"><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130337%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-10"><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130355%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-10"><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130412%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | <div class="col-md-10"><img src="https://static.igem.org/mediawiki/2018/archive/5/51/20180915130425%21T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" ></div> | ||
+ | </div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/51/T--HUST-China--2018-Intelab-pic1.png" class="img-responsive" > | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <footer> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-3"> | ||
+ | <div class="widget"> | ||
+ | <h5 class="widgetheading">Our Contact</h5> | ||
+ | <address> | ||
+ | <strong>Bootstrap company Inc</strong><br> | ||
+ | JC Main Road, Near Silnile tower<br> | ||
+ | Pin-21542 NewYork US.</address> | ||
+ | <p> | ||
+ | <i class="icon-phone"></i> (123) 456-789 - 1255-12584 <br> | ||
+ | <i class="icon-envelope-alt"></i> email@domainname.com | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm-3"> | ||
+ | <div class="widget"> | ||
+ | <h5 class="widgetheading">Quick Links</h5> | ||
+ | <ul class="link-list"> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Latest Events</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Terms and conditions</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Privacy policy</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Career</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Contact us</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm-3"> | ||
+ | <div class="widget"> | ||
+ | <h5 class="widgetheading">Latest posts</h5> | ||
+ | <ul class="link-list"> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Natus error sit voluptatem accusantium doloremque</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm-3"> | ||
+ | <div class="widget"> | ||
+ | <h5 class="widgetheading">Recent News</h5> | ||
+ | <ul class="link-list"> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li> | ||
+ | <li><a class="waves-effect waves-dark" href="#">Natus error sit voluptatem accusantium doloremque</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <section id="banner"> | ||
+ | |||
+ | </section> | ||
+ | <div id="sub-footer"> | ||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-6"> | ||
+ | <div class="copyright"> | ||
+ | <p> | ||
+ | <span>© Bootstrap Template 2018 All right reserved. Template By </span><a href="https://webthemez.com/responsive-website/" target="_blank">WebThemez</a> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </footer> | ||
+ | </div> | ||
+ | <!-- javascript | ||
+ | ================================================== --> | ||
+ | <!-- Placed at the end of the document so the pages load faster --> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/jquery?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/jquery-easing-1-3?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/materialize/js/materialize-min?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/bootstrap-min?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/jquery-fancybox-pack?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/jquery-fancybox-media?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/jquery-flexslider?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/animate?action=raw&ctype=text/javascript"></script> | ||
+ | <!-- Vendor Scripts --> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/modernizr-custom?action=raw&ctype=text/javascript"></script> | ||
+ | <!-- | ||
+ | <script src="js/modernizr.custom.js"></script> | ||
+ | --> | ||
+ | <script src="js/jquery.zoomslider.min.js"></script> | ||
+ | <script src="js/jquery.isotope.min.js"></script> | ||
+ | <script src="js/jquery.magnific-popup.min.js"></script> | ||
+ | <script src="js/animate.js"></script> | ||
+ | <script src="js/custom.js"></script> | ||
+ | <script type="text/javascript"></script> | ||
+ | <script src="https://2018.igem.org/Team:HUST-China/js/changethree?action=raw&ctype=text/javascript"></script> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 15:46, 19 September 2018
Interlab
Introduction
It is significant for synthetic biology to develop a reliable and repeatable measurement, the same to all the other engineering disciplines. We HUST-China have volunteered to test some RBS devices (BCDs) that are intended to make gene expression more precise and reliable by measure the expression level of GFP, in order to help the iGEM community collect data about how reliable will these devices turn out to be in labs around the world.
Provenance and release
What chassis did you use?
Escherichia coli DH5αWhat Biosafety Level is your chassis?
BSL1What PPE did you utilize during your experiments?
T ianming gloves Songxinjiujiu labcoats
Instrument
What instrument did you use during your measurements?
plate readerPlease provide the brand and model of your instrument.
Flexstation 3
Calibration protocol
A1. OD600 reference point-LUDOX protocol
Did you use pathlength correction during measurement? YesNumber of flashes per well
6Orbital averaging (nm)
600What temperature setting did you use during the measurement?
22℃What type of 96-well plate did you use?
Black plate (preferred)Did your plate have flat-bottomed or round-bottomed wells?
FlatDid you use pathlength correction during measurement?
Yes Number of flashes per well 6Orbital averaging (nm)
600 What temperature setting did you use during the measurement? 22℃ What type of 96-well plate did you use? Black plate (preferred)Did your plate have flat-bottomed or round-bottomed wells?
FlatB2. Measurement Steps
❏ Obtain the tube labeled “Silica Beads” from the InterLab test kit and vortex
❏vigorously for 30 seconds. NOTE: Microspheres should NOT bestored at 0°C or below, as freezing affects the properties of the microspheres. If you believe your microspheres may have been frozen, please contact the iGEM Measurement
Committee for a replacement (measurement at igem dot org).❏ Immediately pipet 96 μL microspheres into a 1.5 mL eppendorf tube
❏ Add 904 μL of ddH2O to the microspheres
❏ Vortex well. This is your Microsphere Stock Solution.
❏Add 100 μl of ddH2O into wells A2, B2, C2, D2....A12, B12, C12, D12
❏Vortex the tube containing the stock solution of microspheres vigorously for 10 seconds
❏Immediately add 200 μl of microspheres stock solution into A1
❏Transfer 100 μl of microsphere stock solution from A1 into A2.
❏Mix A2 by pipetting up and down 3x and transfer 100 μl into A3…
❏Mix A3 by pipetting up and down 3x and transfer 100 μl into A4...
❏Mix A4 by pipetting up and down 3x and transfer 100 μl into A5...
❏Mix A5 by pipetting up and down 3x and transfer 100 μl into A6...
❏Mix A6 by pipetting up and down 3x and transfer 100 μl into A7...
❏Mix A7 by pipetting up and down 3x and transfer 100 μl into A8...
❏ Mix A8 by pipetting up and down 3x and transfer 100 μl into A9...
❏Mix A9 by pipetting up and down 3x and transfer 100 μl into A10...
❏Mix A10 by pipetting up and down 3x and transfer 100 μl into A11...
❏Mix A11 by pipetting up and down 3x and transfer 100 μl into liquid waste
TAKE CARE NOT TO CONTINUE SERIAL DILUTION INTO COLUMN 12.
❏ Repeat dilution series for rows B, C, D
❏ IMPORTANT! Re-Mix (Pipette up and down) each row of your plate immediately
before putting in the plate reader! (This is important because the beads begin to settle to the bottom of the wells within about 10 minutes, which will affect the measurements.) Take care to mix gently and avoid creating bubbles on the surface of the liquid.❏ Measure Abs600 of all samples in instrument
❏ Record the data in your notebook
❏ Import data into Excel sheet provided (particle standard curve tab)
C1: Fluorescence standard curve - Fluorescein Protocol
Did you use pathlength correction during measurement?
YesNumber of flashes per well
6What gain setting did you use?
Automatic
If you used a filter, what light wavelengths did it pass?
530nm
Emission wavelength
525nmExcitation wavelength
485nmFluorescence reading
Bottom opticWhat type of 96-well plate did you use?
Black plate (preferred)
Did your plate have flat-bottomed or round-bottomed wells?
FlatWhat temperature setting did you use during the measurement?
22℃C2. Measurement Steps
❏Add 100 μl of PBS into wells A2, B2, C2, D2....A12, B12, C12, D12
❏ Add 200 μl of fluorescein 1x stock solution into A1, B1, C1, D1
❏ Transfer 100 μl of fluorescein stock solution from A1 into A2.
❏ Mix A2 by pipetting up and down 3x and transfer 100 μl into A3…
❏ Mix A3 by pipetting up and down 3x and transfer 100 μl into A4...
❏Mix A4 by pipetting up and down 3x and transfer 100 μl into A5...
❏ Mix A5 by pipetting up and down 3x and transfer 100 μl into A6...
❏ Mix A6 by pipetting up and down 3x and transfer 100 μl into A7...
❏ Mix A7 by pipetting up and down 3x and transfer 100 μl into A8...
❏ Mix A8 by pipetting up and down 3x and transfer 100 μl into A9...
❏ Mix A9 by pipetting up and down 3x and transfer 100 μl into A10...
❏ Mix A10 by pipetting up and down 3x and transfer 100 μl into A11...
❏ Mix A11 by pipetting up and down 3x and transfer 100 μl into liquid waste TAKE CARE NOT TO CONTINUE SERIAL DILUTION INTO COLUMN 12.
❏ Repeat dilution series for rows B, C, D
❏ Measure fluorescence of all samples in instrument
❏ Record the data in your notebook
❏ Import data into Excel sheet provided (fluorescein standard curve tab)
Cell culture setup and meaturement
Transformation:
Negative control BBa_R0040 Kit Plate 7 Well 2D
Positive control BBa_I20270 Kit Plate 7 Well 2B
Test Device 1 BBa_J364000 Kit Plate 7 Well 2F
Test Device 2 BBa_J364001 Kit Plate 7 Well 2H
Test Device 3 BBa_J364002 Kit Plate 7 Well 2J
Test Device 4 BBa_J364007 Kit Plate 7 Well 2L
Test Device 5 BBa_J364008 Kit Plate 7 Well 2N
Test Device 6 BBa_J364009 Kit Plate 7 Well 2P
The initial OD600 measurement of our overnight cultures
What type of media did you use for this step?
Luria Bertani
What type of vessel or container did you use to grow your cells?
50 ml Falcon tubeWhat temperature setting did you use during the measurement?
22℃What type of 96-well plates did you use?
Black plates with transparent/clear bottom (preferred)
Flat
Measurement
o Measure OD and fluorescence of all samples
Suggested Plate Layout for 96-well Plate
Interlab result
OD600 reference point
Particle standard curve
Fluorescein standard curve
Raw Plate Reader Measurements