|
|
| Line 1: |
Line 1: |
| - | /*
| |
| - | * Kleuren:
| |
| - | * - Zwart: 000000
| |
| - | * - Blauw/grijs: 005172, cbd5d8, e3e9ea
| |
| - | * - Groen: 0d623c, 118450, 16ad69
| |
| - | * - Rood: b92c33
| |
| - | */
| |
| | | | |
| - | /* General */
| |
| - | body { background: white; font-family: Tahoma, Geneva, sans-serif; }
| |
| - | .hidden { display: none; }
| |
| - |
| |
| - | .cols { clear: both; width: 965px; }
| |
| - | .col { width: 305px; padding: 0 25px 0 0; float: left; }
| |
| - | .col:last-child { padding: 0; }
| |
| - |
| |
| - | .left { float: left; }
| |
| - | .right { float: right; }
| |
| - |
| |
| - | h2 { border-bottom: 2px solid #005172; }
| |
| - | h2.ulc1 { border-color: #0d623c; }
| |
| - | h2.ulc2 { border-color: #b92c33; }
| |
| - |
| |
| - | /* Slider */
| |
| - | #header_slider {
| |
| - | position: relative;
| |
| - | height: 200px;
| |
| - | overflow: hidden;
| |
| - | background: url(https://static.igem.org/mediawiki/2012/b/bd/Slider1.jpg) left top no-repeat;
| |
| - | }
| |
| - | #header_slider > div.logo {
| |
| - | position: absolute;
| |
| - | top: 60px;
| |
| - | left: -15px;
| |
| - | z-index: 999;
| |
| - | }
| |
| - | #header_slider > div.logo a, #header_slider > div.logo img {
| |
| - | height: 150px; width: 250px;
| |
| - | border: 0;
| |
| - | }
| |
| - |
| |
| - | /* Navigatie / menu */
| |
| - | #navContainer { height: 25px; }
| |
| - | #navContainer ul { list-style: none; padding: 0; margin: 0; float: left; }
| |
| - | #navContainer ul li { float: left; position: relative; z-index: 5; }
| |
| - | #navContainer ul li.hassubitems { background: url(https://static.igem.org/mediawiki/2012/e/ed/Submenuitems.png) right center no-repeat; }
| |
| - | #navContainer ul li a, #navContainer ul li strong {
| |
| - | display: block;
| |
| - | padding: 0 20px 0 5px;
| |
| - | text-decoration: none;
| |
| - | border-bottom: 2px solid white;
| |
| - | height: 25px;
| |
| - | line-height: 25px;
| |
| - | }
| |
| - |
| |
| - | #navContainer ul li a:hover, #navContainer ul li strong { text-decoration: none; border-bottom: 2px solid #0d623c; cursor: pointer; }
| |
| - | #navContainer ul li.ulc1 a:hover, #navContainer ul li.ulc1 strong { border-color: #005172; }
| |
| - | #navContainer ul li.ulc2 a:hover, #navContainer ul li.ulc2 strong { border-color: #b92c33; }
| |
| - |
| |
| - | #navContainer ul li ul li a:hover, #navContainer ul li.ulc1 ul li a:hover, #navContainer ul li.ulc2 ul li a:hover { border-bottom: 2px solid #0d623c; }
| |
| - | #navContainer ul li ul li.ulc1 a:hover, #navContainer ul li ul li.ulc1 strong { border-color: #005172; }
| |
| - | #navContainer ul li ul li.ulc2 a:hover, #navContainer ul li ul li.ulc2 strong { border-color: #b92c33; }
| |
| - |
| |
| - | #navContainer ul li > ul {
| |
| - | visibility: hidden;
| |
| - | position: absolute;
| |
| - | left: 0px;
| |
| - | top: 26px;
| |
| - | background: white;
| |
| - | box-shadow: 1px 1px 4px #666;
| |
| - | z-index: 1;
| |
| - | height: auto;
| |
| - | min-width: 200px;
| |
| - | opacity: 0;
| |
| - | transition: opacity .25s linear;
| |
| - | }
| |
| - | #navContainer ul li:hover { z-index: 50; }
| |
| - | #navContainer ul li:hover > ul {
| |
| - | visibility: visible;
| |
| - | z-index: 99;
| |
| - | opacity: 1;
| |
| - | }
| |
| - | #navContainer ul li ul li { z-index: 199; float: none; }
| |
| - |
| |
| - | #navContainer > ul > li > ul > li > ul {
| |
| - | position: absolute;
| |
| - | top: 0px;
| |
| - | left: 200px;
| |
| - | z-index: 900;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | #socialmediaicons {
| |
| - | float: right;
| |
| - | margin-left: 10px;
| |
| - | }
| |
| - |
| |
| - | /* Body */
| |
| - | #bodyContent {
| |
| - | width: 965px;
| |
| - | padding: 0 0 20px 0;
| |
| - | }
| |
| - |
| |
| - | a.bigbutton, a.bigbutton:visited {
| |
| - | display: block;
| |
| - | overflow: hidden;
| |
| - | color: #111;
| |
| - | text-decoration: none;
| |
| - | padding: 10px 10px 10px 80px;
| |
| - | border-radius: 4px;
| |
| - | min-height: 50px;
| |
| - | background-color: #fff;
| |
| - | background-repeat: no-repeat;
| |
| - | background-position: 10px center;
| |
| - | box-shadow: none;
| |
| - | transition: all .25s linear;
| |
| - | }
| |
| - | a.bigbutton:hover {
| |
| - | box-shadow: 1px 1px 3px #666;
| |
| - | text-decoration: none;
| |
| - | background-color: #ccc;
| |
| - | }
| |
| - | a.bConstructor { background-image: url(/wiki/images/6/61/Constructor.png); }
| |
| - | a.bTeam { background-image: url(/wiki/images/b/b8/WURTeam.png); }
| |
| - | a.bPublication { background-image: url(/wiki/images/d/d0/Publication.png); }
| |
| - | a.bUrl { background-image: url(/wiki/images/0/05/Url.png); }
| |
| - | a.bSource { background-image: url(/wiki/images/b/b0/Source.png); }
| |
| - | a.bPoster { background-image: url(/wiki/images/f/fc/Poster.png); }
| |
| - |
| |
| - | /* Footer */
| |
| - | #contentfooter {
| |
| - | width: 965px;
| |
| - | clear: both;
| |
| - | margin: 10px 0;
| |
| - | padding: 20px 0;
| |
| - | border-top: 2px solid #b92c33;
| |
| - | overflow: hidden;
| |
| - | }
| |
| - | #contentfooter .fcol {
| |
| - | float: left;
| |
| - | width: 320px;
| |
| - | padding-right: 1px;
| |
| - | }
| |
| - |
| |
| - | /* Home Intro */
| |
| - | #projectIntro {
| |
| - | height: 340px;
| |
| - | margin-bottom: 20px;
| |
| - | position: relative;
| |
| - | text-align: center;
| |
| - | }
| |
| - | #projectVideo {
| |
| - | width: 480px;
| |
| - | background: #ddd url('http://png-5.findicons.com/files/icons/1676/primo/128/button_grey_play.png') no-repeat center center;
| |
| - | height: 320px;
| |
| - | margin: 10px auto;
| |
| - | }
| |
| - | #toProjectOverview {
| |
| - | position: absolute;
| |
| - | right: 20px;
| |
| - | bottom: 10px;
| |
| - | }
| |
| - | #toProjectOverview a {
| |
| - | display: block;
| |
| - | padding: 8px;
| |
| - | border-radius: 5px;
| |
| - | background-color: #999;
| |
| - | color: #111;
| |
| - | transition: background-color .25s;
| |
| - | }
| |
| - | #toProjectOverview a:hover {
| |
| - | background-color: #ddd;
| |
| - | text-decoration: none;
| |
| - | color: #333;
| |
| - | }
| |
| - |
| |
| - | /* Home Medal Achievements */
| |
| - | .achievement {
| |
| - | padding: 3px 3px 3px 45px;
| |
| - | border-radius: 3px;
| |
| - | background: #dcdcdc url(https://static.igem.org/mediawiki/2012/2/2a/Check.png) 5px 5px no-repeat;
| |
| - | box-shadow: 2px 2px 5px #666;
| |
| - | margin: 0 0 20px 0;
| |
| - | cursor: pointer;
| |
| - | min-height: 40px;
| |
| - | transition: background-color .5s;
| |
| - | }
| |
| - | .achievement.gold { background-color: #FBB829; }
| |
| - | .achievement.silver { background-color: #A8A8A8; }
| |
| - | .achievement.bronze { background-color: #AA770A; }
| |
| - | .achievement.pending { background: #333 url(https://static.igem.org/mediawiki/2012/1/11/Hourglass.png) 5px 4px no-repeat; }
| |
| - | .achievement:hover { background-color: #22ee22; }
| |
| - | .achievement.pending:hover { background-color: #555; }
| |
| - | .achievement .achievement-desc {
| |
| - | display: none;
| |
| - | margin-left: -37px;
| |
| - | font-style: italic;
| |
| - | }
| |
| - |
| |
| - | /* Project Overview Graphic */
| |
| - | #projectOverview {
| |
| - | height: 340px;
| |
| - | margin-bottom: 20px;
| |
| - | background: url(/wiki/images/4/4c/Vlp.png) center top no-repeat;
| |
| - | position: relative;
| |
| - | }
| |
| - |
| |
| - | #projectOverview > div.buttonbox {
| |
| - | position: absolute;
| |
| - | width: 205px;
| |
| - | height: 90px;
| |
| - | padding: 8px;
| |
| - | background-color: white;
| |
| - | border: 1px solid #ccc;
| |
| - | border-radius: 3px;
| |
| - | text-align: center;
| |
| - | font-size: 18pt;
| |
| - | font-weight: bold;
| |
| - | color: #555;
| |
| - | }
| |
| - | #projectOverview > div.buttonbox:hover { background: #ccc; cursor: pointer; box-shadow: 1px 1px 3px #999; }
| |
| - |
| |
| - | #poPnas { top: 50px; left: 0px; }
| |
| - | #poVLPs { top: 180px; left: 0px; }
| |
| - | #poOutside { top: 10px; right: 0px; }
| |
| - | #poInside { top: 120px; right: 0px; }
| |
| - | #poApplications { top: 230px; right: 0px; }
| |
| - |
| |
| - | #projectOverview > div p {
| |
| - | margin: 8px 0; padding: 0;
| |
| - | }
| |
| - |
| |
| - | #poLoading {
| |
| - | position: absolute;
| |
| - | display: none;
| |
| - | z-index: 999;
| |
| - | font-size: 16pt;
| |
| - | color: white;
| |
| - | font-weight: bold;
| |
| - | text-align: center;
| |
| - | left: 0; right: 0; top: 0; bottom: 0;
| |
| - | padding: 100px;
| |
| - | background: #111;
| |
| - | background: rgba(0,0,0,0.4);
| |
| - | }
| |
| - | #poText {
| |
| - | position: absolute;
| |
| - | display: none;
| |
| - | top: 20px; bottom: 20px;
| |
| - | left: 240px; right: 240px;
| |
| - | padding: 20px;
| |
| - | background: white;
| |
| - | background: rgba(255,255,255,0.9);
| |
| - | border: 1px solid #111;
| |
| - | overflow: auto;
| |
| - | z-index: 998;
| |
| - | border-radius: 3px;
| |
| - | }
| |
| - | #poTextClose {
| |
| - | position: absolute;
| |
| - | display: none;
| |
| - | top: 21px;
| |
| - | right: 256px;
| |
| - | width: 20px;
| |
| - | height: 20px;
| |
| - | background: #eee;
| |
| - | color: #111;
| |
| - | font-weight: bold;
| |
| - | text-align: center;
| |
| - | font-size: 18px;
| |
| - | line-height: 20px;
| |
| - | z-index: 999;
| |
| - | cursor: pointer;
| |
| - | border-radius: 3px;
| |
| - | }
| |
| - |
| |
| - | /* 'Hacks' */
| |
| - | #content { border: 0; padding: 0; }
| |
| - | .firstHeading,
| |
| - | #search-controls,
| |
| - | #catlinks,
| |
| - | #toc,
| |
| - | #p-logo { display: none; }
| |
| - | #top-section { height: 18px; border: 0; }
| |
| - | #menubar {
| |
| - | background: transparent;
| |
| - | padding: 0;
| |
| - | top: 0;
| |
| - | }
| |
| - | .left-menu:hover { background: transparent; }
| |
| - | .left-menu a, .left-menu:hover a { color: black; }
| |
| - | .right-menu li a { background: transparent; color: black; }
| |
| - | #footer-box { margin-top: 50px; }
| |
"
