|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| − | <!-- Declare that you are going to use html code instead of wiki code -->
| |
| − | <html>
| |
| − | <!-- Start of CSS-->
| |
| − | <style type="text/css">
| |
| | | | |
| − | /* WIKI SETTINGS*/
| |
| − |
| |
| − | /* Hide first heading */
| |
| − | .firstHeading {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /*-- Remove borders, float content left and remove padding/margin */
| |
| − | #globalWrapper, #content{
| |
| − | background-color: transparent;
| |
| − | border: 0px;
| |
| − | float: center;
| |
| − | margin:0 auto;
| |
| − | padding: 0px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | /*left align Black Menu Bar */
| |
| − | #top_menu_inside {
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | /* PAGE LAYOUT */
| |
| − |
| |
| − | /* page background color*/
| |
| − | body {
| |
| − | background-color: #77525B;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Creates a container that will wrap all of the content inside your wiki pages. */
| |
| − | #mainContainer {
| |
| − | width: auto;
| |
| − |
| |
| − | margin: 0 auto;
| |
| − | background-color: #683f49;
| |
| − | border-bottom: 6px solid #b48a27;
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #main {
| |
| − | background-image:url("https://static.igem.org/mediawiki/2015/2/2d/Huskyigemtrans.png");
| |
| − | background-repeat:no-repeat;
| |
| − | background-position: 20% 6%;
| |
| − | background-size: 707.25px 636.75px;
| |
| − | }
| |
| − |
| |
| − | /* Creates the container for the menu */
| |
| − | #menuContainer {
| |
| − | width: 100%;
| |
| − | background-color: #EEEDEA;
| |
| − | height: auto;
| |
| − | border-bottom: 6px solid #b48a27;
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − | }
| |
| − |
| |
| − | /* Creates the container for the content */
| |
| − | #contentContainer {
| |
| − | margin: 0 auto;
| |
| − | height: auto;
| |
| − | text-align: left;
| |
| − | padding: 10px;
| |
| − | padding-right:24px;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Set up height place holder for the banner*/
| |
| − | #bannerContainer {
| |
| − | height:0;
| |
| − | padding-top:32%;
| |
| − | //background-image: url("https://static.igem.org/mediawiki/2015/6/69/Igem_front_page_UW.png");
| |
| − | //background-image: url("https://static.igem.org/mediawiki/2015/7/7b/Igem_skyline_seattle.png");
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/d/d6/Igem_banner.jpg");
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: 100%;
| |
| − | width: 100%;
| |
| − | margin:auto;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #wrapper{
| |
| − | width: 960px;
| |
| − | margin:0 auto:
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
| |
| − |
| |
| − |
| |
| − | /*Change the styling of text for everything inside main container*/
| |
| − | #mainContainer p, p2 {
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − | font-size: 12px;
| |
| − | color: #0e232f;
| |
| − | width: 95%;
| |
| − | line-height: 200%;
| |
| − | line-spacing: 10px;
| |
| − | }
| |
| − |
| |
| − | /*This changes the color and font family */
| |
| − | #contentContainer h2, h3, h4, h5, h6 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: bold;
| |
| − | font-size: 25px;
| |
| − | line-height:100%;
| |
| − | padding-top: 1em;
| |
| − | padding-bottom: 1em;
| |
| − | text-align: center;
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #contentContainer h1 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: bold;
| |
| − | font-size: 25px;
| |
| − | line-height:100%;
| |
| − | padding-top: 1em;
| |
| − | padding-bottom: 1em;
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #contentContainer p {
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − |
| |
| − | #contentContainer p1 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − | #contentContainer p2 {
| |
| − | margin-right: 30%;
| |
| − | margin-left: 30%;
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Style of the links - links are different inside the menu */
| |
| − | #contentContainer a {
| |
| − | font-family: "Open Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | color: #85754d;
| |
| − | }
| |
| − |
| |
| − | /* Styling links on hover- links are different inside the menu */
| |
| − | #contentContainer a:hover{
| |
| − | color: #85754d;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of tables */
| |
| − | #contentContainer table {
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | width: 90%
| |
| − | margin: auto;
| |
| − | margin-bottom: 15px;
| |
| − | margin-top: 15px;
| |
| − | margin-right: 10px;
| |
| − | margin-left: 10px;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of table cells*/
| |
| − | #contentContainer td {
| |
| − | padding: 10px;
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: text-top;
| |
| − | background-color: #EEEDEA;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of table headers */
| |
| − | #contentContainer th {
| |
| − | padding: 10px;
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: text-top;
| |
| − | background-color: #e8d5b7;
| |
| − | }
| |
| − |
| |
| − | #links {
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | width: 450px;
| |
| − | height: 450px;
| |
| − | float: inherit;
| |
| − | }
| |
| − |
| |
| − | #links p {
| |
| − | text-align: right;
| |
| − | padding-top: 10px;
| |
| − | padding-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | #links a {
| |
| − | font-size: 24px;
| |
| − | font-weight: bold;
| |
| − | font-family: "Encode Sans Normal";
| |
| − | color: #4b2e83;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | #links a:hover {
| |
| − | font-size: 36px;
| |
| − | }
| |
| − |
| |
| − | img {
| |
| − | float: center;
| |
| − | margin: 0px 0px 15px 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*MENU STYLING */
| |
| − |
| |
| − | /*Styling for the links in the menu */
| |
| − | #menuContainer ul a {
| |
| − | color: #4b2e83;
| |
| − | text-decoration:none;
| |
| − | font-weight: bold;
| |
| − | font-size: 16px;
| |
| − | }
| |
| − |
| |
| − | /* Sets the style for lists inside menuContainer */
| |
| − | #menuContainer > ul {
| |
| − | list-style: none;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | margin-bottom: 0px;
| |
| − | margin-top: -7px;
| |
| − | padding-left: 0px;
| |
| − | padding-right: 0px;
| |
| − | text-align: center;
| |
| − | z-index: 1;
| |
| − | width: auto;
| |
| − | max-width: 950px;
| |
| − | height: auto;
| |
| − | background: #ffffff;
| |
| − | font-style: bold;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /*Styles the list items to become menu buttons */
| |
| − | #menuContainer ul li {
| |
| − | display: inline-block;
| |
| − | width: 100px;
| |
| − | padding: 21px 5px 20px 5px;
| |
| − | position: relative;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li:hover {
| |
| − | background: #d9d9d9;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*HIde the submenus and removes the padding */
| |
| − | #menuContainer ul li ul {
| |
| − | display: none;
| |
| − | margin-top: 20px;
| |
| − | position: absolute;
| |
| − | margin-left: -5px;
| |
| − | z-index: 1;
| |
| − | font-style: normal;
| |
| − | }
| |
| − |
| |
| − | /*Shows the submenus once you hover*/
| |
| − | #menuContainer ul li:hover ul {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /*style the submenu buttons*/
| |
| − | #menuContainer ul li ul li {
| |
| − | display: block;
| |
| − | background: #0E232F;
| |
| − | padding: 10px 5px 10px 5px;
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li ul li:hover {
| |
| − | background: #444444;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | #menuContainer li ul a {
| |
| − | color: #ffffff;
| |
| − | text-decoration:none;
| |
| − | font-weight: bold;
| |
| − | font-size: 12px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*CLASSES */
| |
| − | /*Clear class for all the pages, adds spacing too*/
| |
| − | .clear{
| |
| − | clear:both;
| |
| − | height: 10px;
| |
| − | }
| |
| − |
| |
| − | /* highlight box for special messages */
| |
| − | .highlightBox {
| |
| − | width:500px;
| |
| − | margin:auto;
| |
| − | background-color: #E8D5B7;
| |
| − | margin-bottom: 15px;
| |
| − | margin-top: 15px;
| |
| − | padding: 15px;
| |
| − | padding-top: 5px;
| |
| − | }
| |
| − | /* side bar css */
| |
| − | #sidebar {
| |
| − | width:200px;
| |
| − | float:right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* navigation */
| |
| − | nav {
| |
| − | width:300px;
| |
| − | background-color:rgb(240,240,240);
| |
| − | border:solid 1px rgb(220,220,220);
| |
| − | padding:0 12px;
| |
| − | }
| |
| − |
| |
| − | nav.stick {
| |
| − | position: fixed;
| |
| − | top: 12px;
| |
| − | z-index: 10000;
| |
| − | margin-top:12px;
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | list-style-image:url("https://static.igem.org/mediawiki/2015/e/e9/Replace_pixel_washington.png");
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | nav li a {
| |
| − |
| |
| − | color:rgb(50,50,50);
| |
| − | font-weight:700;
| |
| − | color: #000;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | a.nav-active {
| |
| − | color:#ccc;
| |
| − | }
| |
| − |
| |
| − | ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; margin-right: 20%; margin-left: 20%; }
| |
| − | ul#tabs li { display: inline; }
| |
| − | ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; font-size: 17px; }
| |
| − | ul#tabs li a:hover { background-color: #f1f0ee; }
| |
| − | ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-size: 18px; padding: 0.7em 0.3em 0.38em 0.3em; }
| |
| − | div.tabContent { border: 1px solid #c9c3ba; padding: 1.5em; background-color: #b7a57a; font-size: 16px; line-height:1.5em; margin-right: 20%; margin-left: 20%;}
| |
| − | div.tabContent.hide { display: none; }
| |
| − |
| |
| − |
| |
| − | body {
| |
| − | font-size: 100%;
| |
| − | font-family: "Droid Serif", serif;
| |
| − | color: #333;
| |
| − | background-color: #fff;
| |
| − | /* prevent ie from showing the horizontal scrollbar */
| |
| − | overflow-x: hidden;
| |
| − | }
| |
| − | body.overflow-hidden {
| |
| − | /* when author bio is visible, the out-of-focus content won't scroll */
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | a {
| |
| − | color: #f25f5c;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | img {
| |
| − | max-width: 100%;
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | Modules - reusable parts of our design
| |
| − |
| |
| − | -------------------------------- */
| |
| − | .cd-container {
| |
| − | /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
| |
| − | width: 90%;
| |
| − | max-width: 1200px;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − | .cd-container::after {
| |
| − | /* clearfix */
| |
| − | content: '';
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | xnugget info
| |
| − |
| |
| − | -------------------------------- */
| |
| − | .cd-nugget-info {
| |
| − | text-align: center;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 50px;
| |
| − | line-height: 50px;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | }
| |
| − | .cd-nugget-info a {
| |
| − | position: relative;
| |
| − | display: inline-block;
| |
| − | padding: 0 1em;
| |
| − | font-size: 14px;
| |
| − | color: #fff;
| |
| − | background-color: #f25f5c;
| |
| − | -webkit-transition: all 0.2s;
| |
| − | -moz-transition: all 0.2s;
| |
| − | transition: all 0.2s;
| |
| − | }
| |
| − | .no-touch .cd-nugget-info a:hover {
| |
| − | opacity: .8;
| |
| − | }
| |
| − | .cd-nugget-info span {
| |
| − | vertical-align: middle;
| |
| − | display: inline-block;
| |
| − | }
| |
| − | .cd-nugget-info span svg {
| |
| − | display: block;
| |
| − | }
| |
| − | .cd-nugget-info .cd-nugget-info-arrow {
| |
| − | fill: #fff;
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | xcarbonads
| |
| − |
| |
| − | -------------------------------- */
| |
| − | #carbonads-container,
| |
| − | #ui8ads-container {
| |
| − | position: fixed;
| |
| − | right: 40px;
| |
| − | top: 30px;
| |
| − | width: 180px;
| |
| − | display: none;
| |
| − | }
| |
| − | #carbonads-container .close-carbon-adv,
| |
| − | #carbonads-container .close-ui8-adv,
| |
| − | #ui8ads-container .close-carbon-adv,
| |
| − | #ui8ads-container .close-ui8-adv {
| |
| − | display: inline-block;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | right: 100%;
| |
| − | background: rgba(0, 0, 0, 0.6);
| |
| − | text-indent: 100%;
| |
| − | overflow: hidden;
| |
| − | width: 32px;
| |
| − | height: 32px;
| |
| − | border-radius: 3px 0 0 3px;
| |
| − | }
| |
| − | #carbonads-container .close-carbon-adv:hover,
| |
| − | #carbonads-container .close-ui8-adv:hover,
| |
| − | #ui8ads-container .close-carbon-adv:hover,
| |
| − | #ui8ads-container .close-ui8-adv:hover {
| |
| − | background: black;
| |
| − | }
| |
| − | #carbonads-container .close-carbon-adv::after, #carbonads-container .close-carbon-adv::before,
| |
| − | #carbonads-container .close-ui8-adv::after,
| |
| − | #carbonads-container .close-ui8-adv::before,
| |
| − | #ui8ads-container .close-carbon-adv::after,
| |
| − | #ui8ads-container .close-carbon-adv::before,
| |
| − | #ui8ads-container .close-ui8-adv::after,
| |
| − | #ui8ads-container .close-ui8-adv::before {
| |
| − | content: '';
| |
| − | background-color: #fff;
| |
| − | height: 2px;
| |
| − | width: 14px;
| |
| − | position: absolute;
| |
| − | top: 14px;
| |
| − | left: 9px;
| |
| − | }
| |
| − | #carbonads-container .close-carbon-adv::after,
| |
| − | #carbonads-container .close-ui8-adv::after,
| |
| − | #ui8ads-container .close-carbon-adv::after,
| |
| − | #ui8ads-container .close-ui8-adv::after {
| |
| − | -webkit-transform: rotate(45deg);
| |
| − | -moz-transform: rotate(45deg);
| |
| − | -ms-transform: rotate(45deg);
| |
| − | -o-transform: rotate(45deg);
| |
| − | transform: rotate(45deg);
| |
| − | }
| |
| − | #carbonads-container .close-carbon-adv::before,
| |
| − | #carbonads-container .close-ui8-adv::before,
| |
| − | #ui8ads-container .close-carbon-adv::before,
| |
| − | #ui8ads-container .close-ui8-adv::before {
| |
| − | -webkit-transform: rotate(-45deg);
| |
| − | -moz-transform: rotate(-45deg);
| |
| − | -ms-transform: rotate(-45deg);
| |
| − | -o-transform: rotate(-45deg);
| |
| − | transform: rotate(-45deg);
| |
| − | }
| |
| − | #carbonads-container .carbonad,
| |
| − | #carbonads-container .ui8ad,
| |
| − | #ui8ads-container .carbonad,
| |
| − | #ui8ads-container .ui8ad {
| |
| − | background: rgba(255, 255, 255, 0.9);
| |
| − | border: none;
| |
| − | width: 100%;
| |
| − | height: auto;
| |
| − | padding: 14px;
| |
| − | text-align: center;
| |
| − | border-radius: 0 3px 3px 3px;
| |
| − | box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbonad-image img,
| |
| − | #carbonads-container .carbonad .ui8ad-image img,
| |
| − | #carbonads-container .ui8ad .carbonad-image img,
| |
| − | #carbonads-container .ui8ad .ui8ad-image img,
| |
| − | #ui8ads-container .carbonad .carbonad-image img,
| |
| − | #ui8ads-container .carbonad .ui8ad-image img,
| |
| − | #ui8ads-container .ui8ad .carbonad-image img,
| |
| − | #ui8ads-container .ui8ad .ui8ad-image img {
| |
| − | width: 130px;
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbonad-image img,
| |
| − | #carbonads-container .ui8ad .carbonad-image img,
| |
| − | #ui8ads-container .carbonad .carbonad-image img,
| |
| − | #ui8ads-container .ui8ad .carbonad-image img {
| |
| − | margin: 0 0 10px 10px;
| |
| − | }
| |
| − | #carbonads-container .carbonad .ui8ad-image img,
| |
| − | #carbonads-container .carbonad .carbon-img img,
| |
| − | #carbonads-container .ui8ad .ui8ad-image img,
| |
| − | #carbonads-container .ui8ad .carbon-img img,
| |
| − | #ui8ads-container .carbonad .ui8ad-image img,
| |
| − | #ui8ads-container .carbonad .carbon-img img,
| |
| − | #ui8ads-container .ui8ad .ui8ad-image img,
| |
| − | #ui8ads-container .ui8ad .carbon-img img {
| |
| − | margin: 0 10px 10px;
| |
| − | width: 130px;
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbon-text, #carbonads-container .carbonad .carbonad-tag,
| |
| − | #carbonads-container .carbonad .carbon-poweredby,
| |
| − | #carbonads-container .carbonad .ui8ad-text, #carbonads-container .carbonad .ui8ad-tag,
| |
| − | #carbonads-container .ui8ad .carbon-text,
| |
| − | #carbonads-container .ui8ad .carbonad-tag,
| |
| − | #carbonads-container .ui8ad .carbon-poweredby,
| |
| − | #carbonads-container .ui8ad .ui8ad-text,
| |
| − | #carbonads-container .ui8ad .ui8ad-tag,
| |
| − | #ui8ads-container .carbonad .carbon-text,
| |
| − | #ui8ads-container .carbonad .carbonad-tag,
| |
| − | #ui8ads-container .carbonad .carbon-poweredby,
| |
| − | #ui8ads-container .carbonad .ui8ad-text,
| |
| − | #ui8ads-container .carbonad .ui8ad-tag,
| |
| − | #ui8ads-container .ui8ad .carbon-text,
| |
| − | #ui8ads-container .ui8ad .carbonad-tag,
| |
| − | #ui8ads-container .ui8ad .carbon-poweredby,
| |
| − | #ui8ads-container .ui8ad .ui8ad-text,
| |
| − | #ui8ads-container .ui8ad .ui8ad-tag {
| |
| − | font-family: 'Helvetica Neue', Arial, sans-serif;
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbon-wrap,
| |
| − | #carbonads-container .carbonad .ui8ad-text,
| |
| − | #carbonads-container .ui8ad .carbon-wrap,
| |
| − | #carbonads-container .ui8ad .ui8ad-text,
| |
| − | #ui8ads-container .carbonad .carbon-wrap,
| |
| − | #ui8ads-container .carbonad .ui8ad-text,
| |
| − | #ui8ads-container .ui8ad .carbon-wrap,
| |
| − | #ui8ads-container .ui8ad .ui8ad-text {
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | padding: 0;
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbon-wrap a,
| |
| − | #carbonads-container .carbonad .ui8ad-text a,
| |
| − | #carbonads-container .ui8ad .carbon-wrap a,
| |
| − | #carbonads-container .ui8ad .ui8ad-text a,
| |
| − | #ui8ads-container .carbonad .carbon-wrap a,
| |
| − | #ui8ads-container .carbonad .ui8ad-text a,
| |
| − | #ui8ads-container .ui8ad .carbon-wrap a,
| |
| − | #ui8ads-container .ui8ad .ui8ad-text a {
| |
| − | color: #f25f5c;
| |
| − | font-size: 13px;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − | .no-touch #carbonads-container .carbonad .carbon-wrap a:hover, .no-touch
| |
| − | #carbonads-container .carbonad .ui8ad-text a:hover, .no-touch
| |
| − | #carbonads-container .ui8ad .carbon-wrap a:hover, .no-touch
| |
| − | #carbonads-container .ui8ad .ui8ad-text a:hover, .no-touch
| |
| − | #ui8ads-container .carbonad .carbon-wrap a:hover, .no-touch
| |
| − | #ui8ads-container .carbonad .ui8ad-text a:hover, .no-touch
| |
| − | #ui8ads-container .ui8ad .carbon-wrap a:hover, .no-touch
| |
| − | #ui8ads-container .ui8ad .ui8ad-text a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbonad-tag,
| |
| − | #carbonads-container .carbonad .carbon-poweredby,
| |
| − | #carbonads-container .carbonad .ui8ad-tag,
| |
| − | #carbonads-container .ui8ad .carbonad-tag,
| |
| − | #carbonads-container .ui8ad .carbon-poweredby,
| |
| − | #carbonads-container .ui8ad .ui8ad-tag,
| |
| − | #ui8ads-container .carbonad .carbonad-tag,
| |
| − | #ui8ads-container .carbonad .carbon-poweredby,
| |
| − | #ui8ads-container .carbonad .ui8ad-tag,
| |
| − | #ui8ads-container .ui8ad .carbonad-tag,
| |
| − | #ui8ads-container .ui8ad .carbon-poweredby,
| |
| − | #ui8ads-container .ui8ad .ui8ad-tag {
| |
| − | margin-top: 5px;
| |
| − | color: #8abeb2;
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbonad-tag a,
| |
| − | #carbonads-container .carbonad .carbon-poweredby a,
| |
| − | #carbonads-container .carbonad .ui8ad-tag a,
| |
| − | #carbonads-container .ui8ad .carbonad-tag a,
| |
| − | #carbonads-container .ui8ad .carbon-poweredby a,
| |
| − | #carbonads-container .ui8ad .ui8ad-tag a,
| |
| − | #ui8ads-container .carbonad .carbonad-tag a,
| |
| − | #ui8ads-container .carbonad .carbon-poweredby a,
| |
| − | #ui8ads-container .carbonad .ui8ad-tag a,
| |
| − | #ui8ads-container .ui8ad .carbonad-tag a,
| |
| − | #ui8ads-container .ui8ad .carbon-poweredby a,
| |
| − | #ui8ads-container .ui8ad .ui8ad-tag a {
| |
| − | color: #8abeb2;
| |
| − | }
| |
| − | #carbonads-container .carbonad .carbonad-tag a:hover,
| |
| − | #carbonads-container .carbonad .carbon-poweredby a:hover,
| |
| − | #carbonads-container .carbonad .ui8ad-tag a:hover,
| |
| − | #carbonads-container .ui8ad .carbonad-tag a:hover,
| |
| − | #carbonads-container .ui8ad .carbon-poweredby a:hover,
| |
| − | #carbonads-container .ui8ad .ui8ad-tag a:hover,
| |
| − | #ui8ads-container .carbonad .carbonad-tag a:hover,
| |
| − | #ui8ads-container .carbonad .carbon-poweredby a:hover,
| |
| − | #ui8ads-container .carbonad .ui8ad-tag a:hover,
| |
| − | #ui8ads-container .ui8ad .carbonad-tag a:hover,
| |
| − | #ui8ads-container .ui8ad .carbon-poweredby a:hover,
| |
| − | #ui8ads-container .ui8ad .ui8ad-tag a:hover {
| |
| − | color: #f25f5c;
| |
| − | }
| |
| − | #carbonads-container .carbonad .ui8ad-tag,
| |
| − | #carbonads-container .carbonad .carbon-poweredby,
| |
| − | #carbonads-container .ui8ad .ui8ad-tag,
| |
| − | #carbonads-container .ui8ad .carbon-poweredby,
| |
| − | #ui8ads-container .carbonad .ui8ad-tag,
| |
| − | #ui8ads-container .carbonad .carbon-poweredby,
| |
| − | #ui8ads-container .ui8ad .ui8ad-tag,
| |
| − | #ui8ads-container .ui8ad .carbon-poweredby {
| |
| − | display: inline-block;
| |
| − | font-size: 11px;
| |
| − | line-height: 15px;
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | #carbonads-container,
| |
| − | #ui8ads-container {
| |
| − | display: block;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | Main components
| |
| − |
| |
| − | -------------------------------- */
| |
| − | main {
| |
| − | position: relative;
| |
| − | z-index: 2;
| |
| − | -webkit-transition-property: -webkit-transform;
| |
| − | -moz-transition-property: -moz-transform;
| |
| − | transition-property: transform;
| |
| − | -webkit-transition-duration: 0.3s;
| |
| − | -moz-transition-duration: 0.3s;
| |
| − | transition-duration: 0.3s;
| |
| − | }
| |
| − | main.slide-out {
| |
| − | /* the main element slides to the left when the author bio is visible */
| |
| − | -webkit-transform: translateX(-270px);
| |
| − | -moz-transform: translateX(-270px);
| |
| − | -ms-transform: translateX(-270px);
| |
| − | -o-transform: translateX(-270px);
| |
| − | transform: translateX(-270px);
| |
| − | }
| |
| − | main.slide-out .cd-overlay {
| |
| − | /* the overlay layer gets visible when the author bio slides in */
| |
| − | display: block;
| |
| − | -webkit-animation: cd-fade-in 0.3s;
| |
| − | -moz-animation: cd-fade-in 0.3s;
| |
| − | animation: cd-fade-in 0.3s;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | main.slide-out {
| |
| − | /* change in size of the author bio section */
| |
| − | -webkit-transform: translateX(-600px);
| |
| − | -moz-transform: translateX(-600px);
| |
| − | -ms-transform: translateX(-600px);
| |
| − | -o-transform: translateX(-600px);
| |
| − | transform: translateX(-600px);
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | main.slide-out {
| |
| − | -webkit-transform: translateX(-800px);
| |
| − | -moz-transform: translateX(-800px);
| |
| − | -ms-transform: translateX(-800px);
| |
| − | -o-transform: translateX(-800px);
| |
| − | transform: translateX(-800px);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-section {
| |
| − | padding: 2em 0;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .cd-section .cd-container {
| |
| − | /* this modifies the .cd-container default max-width */
| |
| − | max-width: 768px;
| |
| − | }
| |
| − | .cd-section h2 {
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | margin-bottom: 1em;
| |
| − | font-size: 20px;
| |
| − | font-size: 1.25rem;
| |
| − | }
| |
| − | .cd-section p {
| |
| − | line-height: 1.4;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-section {
| |
| − | padding: 4em;
| |
| − | }
| |
| − | .cd-section p {
| |
| − | line-height: 1.6;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | .cd-section {
| |
| − | padding: 6em;
| |
| − | }
| |
| − | .cd-section h2 {
| |
| − | margin-bottom: 2em;
| |
| − | }
| |
| − | .cd-section p {
| |
| − | line-height: 1.8;
| |
| − | font-size: 18px;
| |
| − | font-size: 1.125rem;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | header {
| |
| − | background: #f2ecbd;
| |
| − | position: relative;
| |
| − | padding: 6em 0 2em !important;
| |
| − | }
| |
| − | header h1 {
| |
| − | font-size: 30px;
| |
| − | font-size: 1.875rem;
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | margin-bottom: .4em;
| |
| − | color: #3e380c;
| |
| − | }
| |
| − | header p {
| |
| − | font-size: 13px;
| |
| − | font-size: 0.8125rem;
| |
| − | color: #93861d;
| |
| − | }
| |
| − |
| |
| − | .cd-placeholder-1 {
| |
| − | background: #f25f5c;
| |
| − | color: #fdeaea;
| |
| − | }
| |
| − |
| |
| − | .cd-placeholder-2 {
| |
| − | background: #FFF;
| |
| − | }
| |
| − |
| |
| − | #cd-team {
| |
| − | background: #8abeb2;
| |
| − | }
| |
| − | #cd-team .cd-container {
| |
| − | max-width: 1200px;
| |
| − | }
| |
| − | #cd-team h2 {
| |
| − | color: #1a2f2a;
| |
| − | }
| |
| − | #cd-team li {
| |
| − | margin-bottom: 2em;
| |
| − | border-radius: 0.25em;
| |
| − | box-shadow: 0 0 10px rgba(92, 75, 81, 0);
| |
| − | -webkit-transition: all 0.3s;
| |
| − | -moz-transition: all 0.3s;
| |
| − | transition: all 0.3s;
| |
| − | }
| |
| − | .no-touch #cd-team li:hover {
| |
| − | box-shadow: 0 0 10px rgba(92, 75, 81, 0.3);
| |
| − | }
| |
| − | .no-touch #cd-team li:hover .cd-img-overlay {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | #cd-team figure {
| |
| − | position: relative;
| |
| − | }
| |
| − | #cd-team img {
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | border-radius: .25em .25em 0 0;
| |
| − | }
| |
| − | #cd-team .cd-img-overlay {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: rgba(92, 75, 81, 0.9);
| |
| − | opacity: 0;
| |
| − | border-radius: .25em .25em 0 0;
| |
| − | -webkit-transition: opacity 0.3s;
| |
| − | -moz-transition: opacity 0.3s;
| |
| − | transition: opacity 0.3s;
| |
| − | }
| |
| − | #cd-team .cd-img-overlay span {
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | bottom: auto;
| |
| − | right: auto;
| |
| − | -webkit-transform: translateX(-50%) translateY(-50%);
| |
| − | -moz-transform: translateX(-50%) translateY(-50%);
| |
| − | -ms-transform: translateX(-50%) translateY(-50%);
| |
| − | -o-transform: translateX(-50%) translateY(-50%);
| |
| − | transform: translateX(-50%) translateY(-50%);
| |
| − | color: #FFF;
| |
| − | }
| |
| − | #cd-team .cd-member-info {
| |
| − | height: 80px;
| |
| − | background: #FFF;
| |
| − | text-align: center;
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | padding-top: 20px;
| |
| − | border-radius: 0 0 .25em .25em;
| |
| − | }
| |
| − | #cd-team .cd-member-info span {
| |
| − | display: block;
| |
| − | font-family: "Droid Serif", serif;
| |
| − | font-weight: normal;
| |
| − | color: #999999;
| |
| − | font-size: 14px;
| |
| − | font-size: 0.875rem;
| |
| − | margin-top: .5em;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | #cd-team li {
| |
| − | width: 31%;
| |
| − | float: left;
| |
| − | margin-right: 3.5%;
| |
| − | }
| |
| − | #cd-team li:nth-child(3n) {
| |
| − | margin-right: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-member-bio {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | width: 270px;
| |
| − | height: 100%;
| |
| − | overflow-y: auto;
| |
| − | /* smooth scrolling on mobile phones and tablets */
| |
| − | -webkit-overflow-scrolling: touch;
| |
| − | background: #5c4b51;
| |
| − | z-index: 1;
| |
| − | /* this how we move the author bio section off the canvas */
| |
| − | -webkit-transform: translateX(270px);
| |
| − | -moz-transform: translateX(270px);
| |
| − | -ms-transform: translateX(270px);
| |
| − | -o-transform: translateX(270px);
| |
| − | transform: translateX(270px);
| |
| − | -webkit-transition-property: -webkit-transform;
| |
| − | -moz-transition-property: -moz-transform;
| |
| − | transition-property: transform;
| |
| − | -webkit-transition-duration: 0.3s;
| |
| − | -moz-transition-duration: 0.3s;
| |
| − | transition-duration: 0.3s;
| |
| − | }
| |
| − | .cd-member-bio.slide-in {
| |
| − | /* the author bio section slides in when the user clicks on the team member picture */
| |
| − | -webkit-transform: translateX(0);
| |
| − | -moz-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | -o-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | .cd-member-bio .cd-member-bio-pict {
| |
| − | position: relative;
| |
| − | }
| |
| − | .cd-member-bio .cd-member-bio-pict::after {
| |
| − | /* gradient at the bottom of the image - same color of the background of the section */
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 80px;
| |
| − | background: -webkit-linear-gradient( bottom , #5c4b51, rgba(92, 75, 81, 0));
| |
| − | background: linear-gradient(to top, #5c4b51, rgba(92, 75, 81, 0));
| |
| − | }
| |
| − | .no-cssgradients .cd-member-bio .cd-member-bio-pict::after {
| |
| − | display: none;
| |
| − | }
| |
| − | .cd-member-bio img {
| |
| − | width: 100%;
| |
| − | display: block;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content {
| |
| − | padding: 1em;
| |
| − | color: #FFF;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content h1 {
| |
| − | font-family: "Droid Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | text-align: center;
| |
| − | font-size: 20px;
| |
| − | font-size: 1.25rem;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content p {
| |
| − | font-size: 14px;
| |
| − | font-size: 0.875rem;
| |
| − | margin: 1em 0;
| |
| − | line-height: 1.4;
| |
| − | color: #d7cfd2;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-member-bio {
| |
| − | width: 600px;
| |
| − | -webkit-transform: translateX(600px);
| |
| − | -moz-transform: translateX(600px);
| |
| − | -ms-transform: translateX(600px);
| |
| − | -o-transform: translateX(600px);
| |
| − | transform: translateX(600px);
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content {
| |
| − | padding: 2em;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content p {
| |
| − | line-height: 1.6;
| |
| − | margin: 2em 0;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | .cd-member-bio {
| |
| − | width: 800px;
| |
| − | -webkit-transform: translateX(800px);
| |
| − | -moz-transform: translateX(800px);
| |
| − | -ms-transform: translateX(800px);
| |
| − | -o-transform: translateX(800px);
| |
| − | transform: translateX(800px);
| |
| − | }
| |
| − | .cd-member-bio .cd-member-bio-pict::after {
| |
| − | height: 150px;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content {
| |
| − | padding: 4em;
| |
| − | /* we move the content up so the title is over the color gradient */
| |
| − | -webkit-transform: translateY(-80px);
| |
| − | -moz-transform: translateY(-80px);
| |
| − | -ms-transform: translateY(-80px);
| |
| − | -o-transform: translateY(-80px);
| |
| − | transform: translateY(-80px);
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content h1 {
| |
| − | font-size: 40px;
| |
| − | font-size: 2.5rem;
| |
| − | }
| |
| − | .cd-member-bio .cd-bio-content p {
| |
| − | font-size: 16px;
| |
| − | font-size: 1rem;
| |
| − | }
| |
| − | .no-cssgradients .cd-member-bio .cd-bio-content {
| |
| − | -webkit-transform: translateY(0);
| |
| − | -moz-transform: translateY(0);
| |
| − | -ms-transform: translateY(0);
| |
| − | -o-transform: translateY(0);
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-member-bio-close {
| |
| − | width: 32px;
| |
| − | height: 32px;
| |
| − | overflow: hidden;
| |
| − | position: fixed;
| |
| − | top: 10px;
| |
| − | right: 10px;
| |
| − | background: url("../img/cd-icon-close.svg") no-repeat center center;
| |
| − | text-indent: 100%;
| |
| − | white-space: nowrap;
| |
| − | z-index: 3;
| |
| − | display: none;
| |
| − | }
| |
| − | .cd-member-bio-close.is-visible {
| |
| − | display: block;
| |
| − | -webkit-animation: cd-move-in 0.8s;
| |
| − | -moz-animation: cd-move-in 0.8s;
| |
| − | animation: cd-move-in 0.8s;
| |
| − | }
| |
| − | @media only screen and (min-width: 1200px) {
| |
| − | .cd-member-bio-close {
| |
| − | right: 20px;
| |
| − | top: 20px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-overlay {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: rgba(138, 190, 178, 0.8);
| |
| − | cursor: pointer;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | xkeyframes
| |
| − |
| |
| − | -------------------------------- */
| |
| − | @-webkit-keyframes cd-fade-in {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes cd-fade-in {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | @keyframes cd-fade-in {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | }
| |
| − | @-webkit-keyframes cd-move-in {
| |
| − | 0% {
| |
| − | -webkit-transform: translateX(100px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes cd-move-in {
| |
| − | 0% {
| |
| − | -moz-transform: translateX(100px);
| |
| − | }
| |
| − | 100% {
| |
| − | -moz-transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − | @keyframes cd-move-in {
| |
| − | 0% {
| |
| − | -webkit-transform: translateX(100px);
| |
| − | -moz-transform: translateX(100px);
| |
| − | -ms-transform: translateX(100px);
| |
| − | -o-transform: translateX(100px);
| |
| − | transform: translateX(100px);
| |
| − | }
| |
| − | 100% {
| |
| − | -webkit-transform: translateX(0);
| |
| − | -moz-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | -o-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | </head>
| |
| − | <!-- Start of the template html elements. -->
| |
| − | <div id ="mainContainer">
| |
| − | <!--This div will close on the page.-->
| |
| − | <div id="bannerContainer">
| |
| − | <br>
| |
| − | <br>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- Start of menu -->
| |
| − | <!-- End of menu -->
| |
| − | <!-- Start of content -->
| |
| − | </html>
| |