|
|
| Line 1: |
Line 1: |
| − | /*Font imports first*/
| |
| − | @import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
| |
| | | | |
| − | /*
| |
| − | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
| |
| − | * http://cssreset.com
| |
| − | */
| |
| − | html, body, div, span, applet, object, iframe,
| |
| − | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
| |
| − | a, abbr, acronym, address, big, cite, code,
| |
| − | del, dfn, em, img, ins, kbd, q, s, samp,
| |
| − | small, strike, strong, sub, sup, tt, var,
| |
| − | b, u, i, center,
| |
| − | dl, dt, dd, ol, ul, li,
| |
| − | fieldset, form, label, legend,
| |
| − | table, caption, tbody, tfoot, thead, tr, th, td,
| |
| − | article, aside, canvas, details, embed,
| |
| − | figure, figcaption, footer, header, hgroup,
| |
| − | menu, nav, output, ruby, section, summary,
| |
| − | time, mark, audio, video {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | font-size: 100%;
| |
| − | /*vertical-align: baseline;*/
| |
| − | }
| |
| − | /* HTML5 display-role reset for older browsers */
| |
| − | article, aside, details, figcaption, figure,
| |
| − | footer, header, hgroup, menu, nav, section {
| |
| − | display: block;
| |
| − | }
| |
| − | body {
| |
| − | line-height: 1;
| |
| − | }
| |
| − | table {
| |
| − | border-collapse: collapse;
| |
| − | border-spacing: 0;
| |
| − | }
| |
| − |
| |
| − | /*Hiding default wiki elements - thanks to DTU-Denmark 2011*/
| |
| − | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| |
| − | display:none;}
| |
| − |
| |
| − | /* Some changes to the iGEM menu bar - thanks to DTU-Denmark 2011 (https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki) */
| |
| − | #menubar.left-menu > ul > li:last-child {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #menubar {
| |
| − | width: auto;
| |
| − | }
| |
| − | #top-section{
| |
| − | background-color: transparent;
| |
| − | }
| |
| − | #top-section:hover{
| |
| − | background-color: rgba(100,100,100,0.5);
| |
| − | }
| |
| − | #top-section:hover li a {
| |
| − | background-color: rgba(100,100,100,0.5);
| |
| − | color: black;
| |
| − | }
| |
| − | #menubar a:link, #menubar a:active, #menubar a:visited, #menubar:hover{
| |
| − | color: transparent;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Three column layout with fixed middle width - http://css-lab.com/demos/3col-fluid/3col-fix-cntr.html*/
| |
| − |
| |
| − | *{
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | }
| |
| − |
| |
| − | body:before {/*Opera Fix*/
| |
| − | content:"";
| |
| − | height:100%;
| |
| − | float:left;
| |
| − | width:0;
| |
| − | margin-bottom:-100px;/*header height*/
| |
| − | }
| |
| − | html{
| |
| − | height:100%;
| |
| − | }
| |
| − | body{
| |
| − | height:100%;
| |
| − | min-width: 1000px;/*To remove horizontal scrollbar*/
| |
| − | overflow-x: hidden; /*To remove horizontal scrollbar*/
| |
| − | background-image: url('https://static.igem.org/mediawiki/2014/0/02/Wageningen_UR_background.jpg');
| |
| − | background-size: 1000px;
| |
| − | font-family: verdana, geneva, sans-serif;
| |
| − | color: #000000;
| |
| − | font-size:80%;
| |
| − | }
| |
| − |
| |
| − | #wrapper{
| |
| − | min-height:100%;
| |
| − | margin-top:-50px; /*footer soak up*/
| |
| − | position:relative;/*set as containing block for AP faux column*/
| |
| − |
| |
| − | }
| |
| − | #innerwrap{/*IE6 needs this for the AP faux column*/
| |
| − | width:1024px;
| |
| − | overflow:visible;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #header{
| |
| − | /*border-top:50px solid #333;/*footer soak up*/
| |
| − | margin-top: 60px; /*Change to 10 for IE*/
| |
| − | margin-bottom: -15px;
| |
| − | margin-left: -30px;
| |
| − | height: 170px;
| |
| − | position:relative;
| |
| − | z-index: -1;/*layer it above the AP faux*/
| |
| − | /*background:inherit;*/
| |
| − | color:#000;
| |
| − | text-align:center;
| |
| − | background-image: url('https://static.igem.org/mediawiki/2014/9/95/Wageningen_UR_banner.png');
| |
| − | background-size: auto 170px;
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: center;
| |
| − | /*background-size: 200px;*/
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | #left {
| |
| − | width:50%;
| |
| − | float:left;
| |
| − | margin-right:-500px; /*-half center width*/
| |
| − | background:inherit;
| |
| − | /*border-bottom: 50px solid #97a355;*/
| |
| − | }
| |
| − | #inner-left{
| |
| − | margin-right:505px; /*half center column width + 5*/
| |
| − | background:inherit;/*background:#FFF;same as body BG*/
| |
| − | }
| |
| − | #center {
| |
| − | width:1000px; /*center column width*/
| |
| − | float:left;
| |
| − | background:inherit;
| |
| − | position:relative;
| |
| − | z-index:3;
| |
| − | margin-top: -10px;
| |
| − | /*box-shadow: -10px 0px 10px 0px rgba(0,0,0,0.17); */
| |
| − | /*Could be the padding from menu or something*/
| |
| − | /*border-radius:10px;*/
| |
| − | /*border-width:2px;
| |
| − | border-style:dashed;
| |
| − | border-color:#473d21;*/
| |
| − | }
| |
| − | .center_content{
| |
| − | padding: 50px;
| |
| − | margin-bottom: 20px;
| |
| − | background:#FFFFFF;
| |
| − | color: #473D2;
| |
| − | box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.5);/*rgba(229, 299, 196, 0.8); */
| |
| − | border-radius: 3px;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | #right {
| |
| − | width:50%;
| |
| − | float:right;
| |
| − | margin-left:-500px; /*-half center width*/
| |
| − | background:#FFFFFF;
| |
| − | }
| |
| − | #inner-right {
| |
| − | margin-left:505px; /*half center column width + 5*/
| |
| − | background:#FFFFFF;/*same as body BG*/
| |
| − |
| |
| − | }
| |
| − | #center-faux{
| |
| − | position:absolute;
| |
| − | width:1000px; /*center column width*/
| |
| − | left:50%;
| |
| − | bottom:0;
| |
| − | height:100%;
| |
| − | margin-left:-500px; /*-half center column width*/
| |
| − | background:inherit;
| |
| − | z-index:0;
| |
| − | /*box-shadow: 0px 0px 8px 3px #E5E5C4; */
| |
| − | border-radius:10px;
| |
| − | /*
| |
| − | -webkit-box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75);
| |
| − | -moz-box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75);
| |
| − | box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75);
| |
| − | */
| |
| − | }
| |
| − | * html #center-faux{height:999em}/*for IE6*/
| |
| − |
| |
| − | #footer{
| |
| − | margin-top: 30px;
| |
| − | padding-top:100px;
| |
| − | clear:both;
| |
| − | width:100%;
| |
| − | height:50px;
| |
| − | /*background-color: #97a355;*/
| |
| − | background-image: url(https://static.igem.org/mediawiki/2014/c/c5/Wageningen_UR_footer.png);
| |
| − |
| |
| − | color:#f0efcd;
| |
| − | text-align:center;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #mascot{
| |
| − | position: fixed;
| |
| − | bottom: 10px;
| |
| − | right: 10px;
| |
| − | }
| |
| − |
| |
| − | /*sidebar*/
| |
| − |
| |
| − | .sidebar-container{
| |
| − | float:right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | sidenav {
| |
| − | width:150px;
| |
| − | background-color:none;
| |
| − | border:none;
| |
| − | padding:0;
| |
| − | margin-top:235px;
| |
| − | margin-left:-135px;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | z-index: 3;
| |
| − | }
| |
| − |
| |
| − | .menu-head {
| |
| − | background: #473D21;
| |
| − | width:150px;
| |
| − | padding:0;
| |
| − | margin:0;
| |
| − | list-style: none;
| |
| − | box-shadow: 0px 5px 9px rgba(0,0,0,0.50);
| |
| − | border-radius: 3px;
| |
| − | overflow:hidden;
| |
| − | border-top: 2px solid #473D21;
| |
| − | border-right:1px solid #473D21;
| |
| − | border-left:1px solid #473D21;
| |
| − | border-bottom:2px solid #8B964E;
| |
| − | }
| |
| − |
| |
| − | .menu-head a{
| |
| − | color:#FFF372;
| |
| − | text-decoration: none;
| |
| − | font-size:14px;
| |
| − | background: none;
| |
| − | width:150px;
| |
| − | margin:0;
| |
| − | padding:0px 20px;
| |
| − | list-style: none;
| |
| − | position: relative;
| |
| − | line-height:40px;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .menu-item {
| |
| − | font-weight: bold;
| |
| − | background: #97A355;
| |
| − | width:150px;
| |
| − | padding:0;
| |
| − | margin:0;
| |
| − | list-style: none;
| |
| − | box-shadow: 0px 5px 9px rgba(0,0,0,0.50);
| |
| − | border-radius: 3px;
| |
| − | overflow:hidden;
| |
| − | border-top: 2px solid #9EAB59;
| |
| − | border-right:1px solid #9EAB59;
| |
| − | border-left:1px solid #9EAB59;
| |
| − | border-bottom:2px solid #8B964E;
| |
| − | }
| |
| − |
| |
| − | .menu-item a{
| |
| − | text-decoration: none;
| |
| − | font-size:12px;
| |
| − | background: none;
| |
| − | width:150px;
| |
| − | margin:0;
| |
| − | padding:0px 20px;
| |
| − | list-style: none;
| |
| − | position: relative;
| |
| − | line-height:40px;
| |
| − | }
| |
| − |
| |
| − | .menu-item a, .menu-item a:visited {
| |
| − | color: #222;
| |
| − | display: block;
| |
| − | text-decoration: none;
| |
| − | width: 150px;
| |
| − | line-height:40px;
| |
| − | }
| |
| − |
| |
| − | .menu-item:hover >{
| |
| − | background: #473D21;
| |
| − | box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
| |
| − | border-radius: 3px;
| |
| − | }
| |
| − |
| |
| − | .menu-item:hover > a{
| |
| − | color: #FFF372;
| |
| − | }
| |
| − |
| |
| − | .menu-item ul {
| |
| − | background: none;
| |
| − | box-shadow:none;
| |
| − | font-size: 14px;
| |
| − | height:0px;/*collapses the menu*/
| |
| − | list-style-type: none;
| |
| − | padding: 0px;
| |
| − | margin:0;
| |
| − | overflow:hidden;
| |
| − | -webkit-transition: height 1s ease;
| |
| − | -moz-transition: height 1s ease;
| |
| − | -o-transition: height 1s ease;
| |
| − | -ms-transition: height 1s ease;
| |
| − | transition: height 1s ease;
| |
| − | }
| |
| − |
| |
| − | .menu-item ul a, .menu-item ul a:visited {
| |
| − | margin:0;
| |
| − | text-decoration: none;
| |
| − | color: #222;
| |
| − | display: block;
| |
| − | width: 150px;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − |
| |
| − | .menu-item ul li a, .menu-item ul li a:visited {
| |
| − | background-color: rgb(215,214,126);
| |
| − | }
| |
| − | /*
| |
| − | .menu-item a {
| |
| − | display: block;
| |
| − | width:150px;
| |
| − | height:40px;
| |
| − | line-height:40px;
| |
| − | margin:0;
| |
| − | padding:0px 20px;
| |
| − | overflow:hidden;
| |
| − | -webkit-transition: height 1s ease;
| |
| − | -moz-transition: height 1s ease;
| |
| − | -o-transition: height 1s ease;
| |
| − | -ms-transition: height 1s ease;
| |
| − | transition: height 1s ease;
| |
| − | }
| |
| − | */
| |
| − | .menu-item:hover li{
| |
| − | height:40px;
| |
| − | line-height:40px;
| |
| − | }
| |
| − |
| |
| − | /* Can't get it to expand based on the number of children - just used seperarete css for each ammount of submenus.*/
| |
| − | .menu-item:hover ul.one-item{
| |
| − | height:42px;
| |
| − | }
| |
| − | .menu-item:hover ul.two-item{
| |
| − | height:82px;
| |
| − | }
| |
| − | .menu-item:hover ul.three-item{
| |
| − | height:122px;
| |
| − | }
| |
| − | .menu-item:hover ul.four-item{
| |
| − | height:162px;
| |
| − | }
| |
| − | .menu-item:hover ul.five-item{
| |
| − | height:202px;
| |
| − | }
| |
| − | .menu-item:hover ul.six-item{
| |
| − | height:242px;
| |
| − | }
| |
| − |
| |
| − | .menu-item li:hover a{
| |
| − | background: #FFF372;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | a.sidenav-active {
| |
| − | background-color: rgba(119, 122, 64, 0.9);
| |
| − | font-weight:bold;
| |
| − | padding:0 20px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /*sidebar end*/
| |
| − |
| |
| − |
| |
| − |
| |
| − | hr {
| |
| − | border:none;
| |
| − | background-color:rgb(220,220,220);
| |
| − | height:12px;
| |
| − | margin-bottom:18px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*top margin is 25px
| |
| − | right margin is 50px
| |
| − | bottom margin is 75px
| |
| − | left margin is 100px*/
| |
| − |
| |
| − | #center h1,h2,h3,h4{
| |
| − | font-family:Verdana, Geneva, sans-serif;
| |
| − | font-weight:bold;
| |
| − | }
| |
| − |
| |
| − | #center h1{
| |
| − | line-height: 30px;
| |
| − | color:#3a3424;
| |
| − | margin: 20px 10px 10px 10px;
| |
| − | font-size:200%;
| |
| − | /*text-align:center;*/
| |
| − | /*border-bottom: 1px solid #3a3424;*/ /*f0efcd;*/
| |
| − | }
| |
| − | #center h2{
| |
| − | margin: 10px 10px 5px 10px;
| |
| − | font-size:170%;
| |
| − | color: #575e31;
| |
| − | border-bottom: 1px solid #575e31;
| |
| − | /*text-decoration:underline*/
| |
| − | }
| |
| − | #center h3{
| |
| − | margin: 10px 10px 0px 15px;
| |
| − | color:#3a3424;
| |
| − | font-size:130%;
| |
| − | }
| |
| − | #center h4{
| |
| − | margin: 0px 10px 10px 40px;
| |
| − | color:#3a3424;
| |
| − | font-size:110%;
| |
| − | font-weight: 800;
| |
| − | }
| |
| − | #center p, #center ul, #center ol{
| |
| − | margin: 10px 15px 10px 15px;
| |
| − | color:#3a3424;
| |
| − | font-size:14px;
| |
| − | text-align: justify;
| |
| − | line-height:1.5em;
| |
| − | font-weight: 400;
| |
| − | }
| |
| − |
| |
| − | #center ul{
| |
| − | margin: 10px 15px 10px 45px;
| |
| − | list-style-type:disc;
| |
| − | list-style-image:none;
| |
| − | }
| |
| − |
| |
| − | #center ol{
| |
| − | margin: 10px 15px 10px 45px;
| |
| − | list-style-type:decimal;
| |
| − | }
| |
| − |
| |
| − | #center p.notjustified{
| |
| − | text-align: left;
| |
| − | }
| |
| − | #center h1+p, h2+p, h3+p, h4+p{
| |
| − | padding-top:0px;
| |
| − | }
| |
| − |
| |
| − | #footer p{
| |
| − | padding-top: 8px;
| |
| − | margin: 0px;
| |
| − | line-height: initial;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*TEAM PAGE #E1FEA2*/
| |
| − |
| |
| − | .box-left-team, .box-right-team{
| |
| − | margin: 10px 10px 10px 10px;
| |
| − | float: left;
| |
| − | height: 475px;
| |
| − | width:410px;
| |
| − | clear: both;
| |
| − | background-color: #f0efcd; /*#F6FAED;*/
| |
| − | border: 10px solid white;
| |
| − | /*border-radius: 10px;*/
| |
| − | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
| |
| − | }
| |
| − |
| |
| − | #center .box-left-team > p, #center .box-right-team > p{
| |
| − | font-size: 12px;
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | #center .box-left-team > h3, #center .box-right-team > h3{
| |
| − | font-size: 14px;
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | .box-left-team-photo{
| |
| − | margin: 10px 15px 5px 15px;
| |
| − | float: right;
| |
| − | height: 235px;
| |
| − | border-radius: 10px;
| |
| − | }
| |
| − |
| |
| − | .box-left-team > img.bottom, .box-right-team > img.bottom{
| |
| − | margin: 10px 15px 5px 15px;
| |
| − | float: right;
| |
| − | height: 234px;
| |
| − | border-radius: 10px;
| |
| − | }
| |
| − |
| |
| − | .box-left-team > img.top, .box-right-team > img.top{
| |
| − | position:absolute;
| |
| − | margin-left:238px;
| |
| − | margin-top:10px;
| |
| − | border-radius:10px;
| |
| − | height:235px;
| |
| − | width:157px;
| |
| − | display:inline-block;
| |
| − | -webkit-transition: opacity .3s ease-in-out;
| |
| − | -moz-transition: opacity .3s ease-in-out;
| |
| − | -o-transition: opacity .3s ease-in-out;
| |
| − | transition: opacity .3s ease-in-out;
| |
| − | }
| |
| − |
| |
| − | .box-left-team:hover > img.top, .box-right-team:hover > img.top{
| |
| − | opacity:0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .box-right-team{
| |
| − | float: right;
| |
| − | clear: none;
| |
| − | }
| |
| − | .box-right-team-invisble{
| |
| − | width: 430px;
| |
| − | background: inherit;
| |
| − | border: none
| |
| − | }
| |
| − |
| |
| − | @font-face {
| |
| − | font-family: 'icomoon';
| |
| − | src:url('../icomoon/fonts/icomoon.eot');
| |
| − | src:url('../icomoon/fonts/icomoon.eot') format('embedded-opentype'),
| |
| − | url('../icomoon/fonts/icomoon.woff') format('woff'),
| |
| − | url('../icomoon/fonts/icomoon.ttf') format('truetype'),
| |
| − | url('../icomoon/fonts/icomoon.svg') format('svg');
| |
| − | font-weight: normal;
| |
| − | font-style: normal;
| |
| − | }
| |
| − |
| |
| − | /* Navigation Menu */
| |
| − | .navmenubkg {
| |
| − | position:relative;
| |
| − | display:block;
| |
| − | z-index:450;
| |
| − | top:10px;
| |
| − | height:50px;
| |
| − | left:0;
| |
| − | right:0;
| |
| − | background:transparent;
| |
| − | }
| |
| − |
| |
| − | #nav_wrapper{
| |
| − | padding:0;
| |
| − | margin-top:0;
| |
| − | margin-left:-30px;
| |
| − | margin-right:auto;
| |
| − | padding-left:10px;
| |
| − | width:1050px;
| |
| − | height:50px;
| |
| − | z-index:500;
| |
| − | display:block;
| |
| − | background-color:#97A355;
| |
| − | color: rgb(46,43,52); /*grey*/
| |
| − | text-align:center;
| |
| − | border-radius: 3px;
| |
| − | -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
| |
| − | -moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
| |
| − | box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .sidelogos {
| |
| − | float:left;
| |
| − | display:block;
| |
| − | margin-left:auto;
| |
| − | height:100%;
| |
| − | width:65px;;
| |
| − |
| |
| − | }
| |
| − | .sidelogos a {
| |
| − | display:block;
| |
| − | top:0;
| |
| − | bottom:0;
| |
| − |
| |
| − | }
| |
| − | #rightbarlogo {
| |
| − | padding-top: 1 px;
| |
| − | position: absolute;
| |
| − | right:-10px;
| |
| − | bottom: 1px;
| |
| − | }
| |
| − |
| |
| − | #pblogo img{
| |
| − | height:40px;
| |
| − | /*margin-top: -10px;*/
| |
| − | background-color:transparent;
| |
| − | margin-top:5px;
| |
| − | margin-left:8px;
| |
| − | -webkit-transform:rotate(0deg) scale(0.9);
| |
| − | -moz-transform:rotate(0deg) scale(0.9);
| |
| − | -ms-transform:rotate(0deg) scale(0.9);
| |
| − | -o-transform:rotate(0deg) scale(0.9);
| |
| − | transform:rotate(0deg) scale(0.9);
| |
| − | -webkit-transition: .5s ease-in-out;
| |
| − | -moz-transition: .5s ease-in-out;
| |
| − | -o-transition: .5s ease-in-out;
| |
| − | transition: .5s ease-in-out;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #pblogo:hover img{
| |
| − | background-color:transparent;
| |
| − | -webkit-transform:rotate(0deg) scale(1.3);
| |
| − | -moz-transform:rotate(0deg) scale(1.3);
| |
| − | -ms-transform:rotate(0deg) scale(1.3);
| |
| − | -o-transform:rotate(0deg) scale(1.3);
| |
| − | transform:rotate(0deg) scale(1.3);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #igemlogo:hover img {
| |
| − | opacity:1;
| |
| − | }
| |
| − |
| |
| − | #rightlogo img{
| |
| − | pointer-events:none; /*Does this work in IE9? Apparantly not... Who would've thought...*/
| |
| − | position:relative;
| |
| − | z-index: -1;
| |
| − | background-color:transparent;
| |
| − | height:400px;
| |
| − | margin-top:-200px;
| |
| − | margin-left:-120px;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | /*menu bar*/
| |
| − | #ca-menu{
| |
| − | padding:0;
| |
| − | margin:0;
| |
| − | margin-left:15px;
| |
| − | width: 880px;
| |
| − | display:block;
| |
| − | /*position:relative;*/
| |
| − | float:left;
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul{
| |
| − | list-style-type: none;
| |
| − | list-style-image: none;
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | position:relative;
| |
| − | width:900px;
| |
| − | }
| |
| − | #ca-menu li{
| |
| − | width: 142px;
| |
| − | height: 50px;
| |
| − | position: relative;
| |
| − | float:left;
| |
| − | background:#97A355;
| |
| − |
| |
| − | -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
| |
| − | -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
| |
| − | box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
| |
| − | margin-right: 4px;
| |
| − |
| |
| − | -webkit-transition: all 400ms linear;
| |
| − | -moz-transition: all 400ms linear;
| |
| − | -o-transition: all 400ms linear;
| |
| − | -ms-transition: all 400ms linear;
| |
| − | transition: all 400ms linear;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li a{
| |
| − | text-align: left;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | display: block;
| |
| − | color: #222;
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | #ca-icon1, #ca-icon2, #ca-icon3, #ca-icon4, #ca-icon5, #ca-icon6{
| |
| − | position: absolute;
| |
| − | width:150px;
| |
| − | height: 50px;
| |
| − | left: 10px;
| |
| − | top: 0;
| |
| − | text-align: left;
| |
| − | overflow:hidden;
| |
| − | background:url(https://static.igem.org/mediawiki/2014/a/ad/Wageningen_UR_cog1.png);
| |
| − | background-size:35px;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | -webkit-transition: all 400ms linear;
| |
| − | -moz-transition: all 400ms linear;
| |
| − | -o-transition: all 400ms linear;
| |
| − | -ms-transition: all 400ms linear;
| |
| − | transition: all 400ms linear;
| |
| − | }
| |
| − |
| |
| − | #ca-icon2{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/1/13/Wageningen_UR_overview_icon1.png);
| |
| − | background-size:35px;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − |
| |
| − | #ca-icon3{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/e/e9/Wageningen_UR_outreach_icon1.png);
| |
| − | background-size:35px;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − |
| |
| − | #ca-icon4{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/9/97/Wageningen_UR_team_icon1.png);
| |
| − | background-size:35px;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − |
| |
| − | #ca-icon5{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/8/85/Wageningen_UR_safety_icon1.png);
| |
| − | background-size:35px;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − |
| |
| − | #ca-icon6{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/d/d0/Wageningen_UR_notebook_icon1.png);
| |
| − | background-size:35px;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − |
| |
| − | .ca-content{
| |
| − | position: absolute;
| |
| − | left: 0px;
| |
| − | width: 120px;
| |
| − | height: 100%;
| |
| − | left: 25%;
| |
| − | background-color:transparent;
| |
| − | font-family:Tahoma, Geneva, sans-serif;
| |
| − | font-size:17px;
| |
| − | font-weight:bold;
| |
| − | line-height:50px;
| |
| − | opacity: 0.9;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #ca-menu ul li:hover{
| |
| − | background-color: #473D21;
| |
| − | z-index:999;
| |
| − | -webkit-transform: scale(1.1);
| |
| − | -moz-transform: scale(1.1);
| |
| − | -ms-transform: scale(1.1);
| |
| − | -o-transform: scale(1.1);
| |
| − | transform: scale(1.1);
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul li:hover a {
| |
| − | -webkit-transform: none;
| |
| − | -moz-transform: none;
| |
| − | -ms-transform: none;
| |
| − | -o-transform: none;
| |
| − | transform:none;
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul li:hover #ca-icon1{
| |
| − | /* overflow:hidden;
| |
| − | color: #FFF372;
| |
| − | font-size:90px;*/
| |
| − | background:url(https://static.igem.org/mediawiki/2014/6/66/Wageningen_UR_cog2.png);
| |
| − | background-size:100px;
| |
| − | opacity:0.3;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul li:hover #ca-icon2{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/4/46/Wageningen_UR_overview_icon2.png);
| |
| − | background-size:100px;
| |
| − | opacity:0.3;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul li:hover #ca-icon3{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/7/78/Wageningen_UR_outreach_icon2.png);
| |
| − | background-size:100px;
| |
| − | opacity:0.3;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − | #ca-menu ul li:hover #ca-icon4{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/5/50/Wageningen_UR_team_icon2.png);
| |
| − | background-size:100px;
| |
| − | opacity:0.3;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − | #ca-menu ul li:hover #ca-icon5{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/a/a0/Wageningen_UR_safety_icon2.png);
| |
| − | background-size:100px;
| |
| − | opacity:0.3;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − | #ca-menu ul li:hover #ca-icon6{
| |
| − | background:url(https://static.igem.org/mediawiki/2014/5/51/Wageningen_UR_notebook_icon2.png);
| |
| − | background-size:100px;
| |
| − | opacity:0.3;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:left center;
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul li:hover .ca-content{
| |
| − | color: rgb(255,235,4);
| |
| − | -webkit-animation: smallToBig 300ms ease;
| |
| − | -moz-animation: smallToBig 300ms ease;
| |
| − | -ms-animation: smallToBig 300ms ease;
| |
| − | animation: smallToBig 300ms ease;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*submenu*/
| |
| − | #ca-menu li ul, #ca-menu li ul a {
| |
| − | visibility:hidden;
| |
| − | height:0;
| |
| − | /*position:fixed;*/
| |
| − | background-color:transparent;
| |
| − | font-size:12px;
| |
| − | padding:0;
| |
| − | width:138px;
| |
| − | z-index:999;
| |
| − | text-decoration:none;
| |
| − | text-align: center;
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #ca-menu li li{
| |
| − | visibility:hidden;
| |
| − | height:0;
| |
| − | position:relative;
| |
| − | float:none;
| |
| − | width:138px;
| |
| − | line-height:40px;
| |
| − | font-family:Verdana, Geneva, sans-serif;
| |
| − | font-size:12px;
| |
| − | font-weight: bold;
| |
| − | background-color:#b6be88;
| |
| − | text-decoration:none;
| |
| − | box-shadow:none;
| |
| − |
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #ca-menu li li a{
| |
| − | visibility:hidden;
| |
| − |
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover ul{
| |
| − | visibility:visible;
| |
| − | height:0;
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover ul a{
| |
| − | visibility:visible;
| |
| − | height:200px;
| |
| − | display:block;
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #ca-menu li:hover li {
| |
| − | position:relative;
| |
| − | float:none;
| |
| − | margin:0;
| |
| − | margin-left:2.5px;
| |
| − | padding:0;
| |
| − | width:138px;
| |
| − | line-height:40px;
| |
| − | font-family:Verdana, Geneva, sans-serif;
| |
| − | font-size:12px;
| |
| − | font-weight: bold;
| |
| − | background-color:#b6be88;
| |
| − | text-decoration:none;
| |
| − | box-shadow:none;
| |
| − | border:1px solid #b6be88;
| |
| − | visibility:visible;
| |
| − | height:36px;
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − | /*
| |
| − | #ca-menu li:hover li a:after {
| |
| − | content:"\25B6";
| |
| − | float: right;
| |
| − | font-size:8px;
| |
| − | margin-right:1px;
| |
| − | margin-left:-15px;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover li > a:only-child:after {
| |
| − | content: '';
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul ul > :first-child {
| |
| − |
| |
| − | box-shadow:0px 3px 1px rgba(0,0,0,0.25) inset;
| |
| − | -webkit-border-radius: 2px 2px 0 0;
| |
| − | -moz-border-radius:2px 2px 0 0;
| |
| − | border-radius:2px 2px 0 0;
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul ul > :last-child {
| |
| − | -webkit-border-radius: 0 0 2px 2px;
| |
| − | -moz-border-radius:0 0 2px 2px;
| |
| − | border-radius:0 0 2px 2px;
| |
| − | }
| |
| − | */
| |
| − | #ca-menu li:hover li a{
| |
| − | color:#473D21;
| |
| − | visibility:visible;
| |
| − | width:138px;
| |
| − | height:36px;
| |
| − | -webkit-transition: all .1s ease-out;
| |
| − | -moz-transition: all .1s ease-out;
| |
| − | -ms-transition: all .1s ease-out;
| |
| − | -o-transition: all .1s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul ul li:hover {
| |
| − | width:138px;
| |
| − | height:36px;
| |
| − | background-color:#FFF372;
| |
| − | z-index:999;
| |
| − | -webkit-transform:none;
| |
| − | -moz-transform:none;
| |
| − | -ms-transform:none;
| |
| − | -o-transform:none;
| |
| − | }
| |
| − |
| |
| − | #ca-menu ul ul li:hover a{
| |
| − | width:138px;
| |
| − | height:36px;
| |
| − | -webkit-transition: all .1s ease-out;
| |
| − | -moz-transition: all .1s ease-out;
| |
| − | -ms-transition: all .1s ease-out;
| |
| − | -o-transition: all .1s ease-out;
| |
| − | }
| |
| − |
| |
| − | /*third-level menu*/
| |
| − |
| |
| − | #ca-menu li li ul{
| |
| − | margin-top:-36px;
| |
| − | visibility:hidden;
| |
| − | height:150px;
| |
| − | /*position:fixed;*/
| |
| − | margin-left:136px;
| |
| − | background-color:tranparent;
| |
| − | padding:0;
| |
| − | width:0px;
| |
| − | z-index:999;
| |
| − | text-decoration:none;
| |
| − | text-align: center;
| |
| − |
| |
| − |
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | #ca-menu li li ul a{
| |
| − | visibility:hidden;
| |
| − | height:150px;
| |
| − | /*position:fixed;*/
| |
| − | background-color:transparent;
| |
| − | padding:0;
| |
| − | width:138px;
| |
| − | z-index:999;
| |
| − | text-decoration:none;
| |
| − | text-align: center;
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover ul ul li {
| |
| − | visibility:hidden;
| |
| − | position:relative;
| |
| − | float:none;
| |
| − | margin:0;
| |
| − | margin-left:3px;
| |
| − | padding:0;
| |
| − | width:0px;
| |
| − | line-height:40px;
| |
| − | font-family:Verdana, Geneva, sans-serif;
| |
| − | font-size:12px;
| |
| − | font-weight: bold;
| |
| − | background-color:#E0E4CC;
| |
| − | text-decoration:none;
| |
| − | box-shadow:none;
| |
| − | border:1px solid #E0E4CC;;
| |
| − | height:0;
| |
| − | -webkit-transition: all .4s ease-out;
| |
| − | -moz-transition: all .4s ease-out;
| |
| − | -ms-transition: all .4s ease-out;
| |
| − | -o-transition: all .4s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover ul ul li a{
| |
| − | margin:0;
| |
| − | color:#473D21;
| |
| − | visibility:hidden;
| |
| − | -webkit-transition: all .2s ease-out;
| |
| − | -moz-transition: all .2s ease-out;
| |
| − | -ms-transition: all .2s ease-out;
| |
| − | -o-transition: all .2s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li li:hover ul{
| |
| − | visibility:visible;
| |
| − | width:138px;
| |
| − | display:block;
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li li:hover ul a{
| |
| − | color:#473D21;
| |
| − | visibility:hidden;
| |
| − | width:138px;
| |
| − | -webkit-transition: all .1s ease-out;
| |
| − | -moz-transition: all .1s ease-out;
| |
| − | -ms-transition: all .1s ease-out;
| |
| − | -o-transition: all .1s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover ul li:hover > ul li{
| |
| − | height:36px;
| |
| − | width:138px;
| |
| − | visibility:visible;
| |
| − | -webkit-transition: all .3s ease-out;
| |
| − | -moz-transition: all .3s ease-out;
| |
| − | -ms-transition: all .3s ease-out;
| |
| − | -o-transition: all .3s ease-out;
| |
| − | transition: all .3s ease-out;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover ul li:hover > ul li a{
| |
| − | width:138px;
| |
| − | height:36px;
| |
| − | visibility:visible;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover li:hover li:hover {
| |
| − | background-color:#FFF372;
| |
| − | height:36px;
| |
| − | z-index:999;
| |
| − | -webkit-transform:none;
| |
| − | -moz-transform:none;
| |
| − | -ms-transform:none;
| |
| − | -o-transform:none;
| |
| − | }
| |
| − |
| |
| − | #ca-menu li:hover li:hover li:hover a{
| |
| − | height:36px;
| |
| − | -webkit-transition: all .1s ease-out;
| |
| − | -moz-transition: all .1s ease-out;
| |
| − | -ms-transition: all .1s ease-out;
| |
| − | -o-transition: all .1s ease-out;
| |
| − | }
| |
| − |
| |
| − | .up_menu_fix{
| |
| − | margin-top:-36px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @-webkit-keyframes smallToBig{
| |
| − | from {
| |
| − | -webkit-transform: scale(0.1);
| |
| − | }
| |
| − | to {
| |
| − | -webkit-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes smallToBig{
| |
| − | from {
| |
| − | -moz-transform: scale(0.1);
| |
| − | }
| |
| − | to {
| |
| − | -moz-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − | @-ms-keyframes smallToBig{
| |
| − | from {
| |
| − | -ms-transform: scale(0.1);
| |
| − | }
| |
| − | to {
| |
| − | -ms-transform: scale(1);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes moveFromBottom {
| |
| − | from {
| |
| − | -webkit-transform: translateY(100%);
| |
| − | }
| |
| − | to {
| |
| − | -webkit-transform: translateY(0%);
| |
| − | }
| |
| − | }
| |
| − | @-moz-keyframes moveFromBottom {
| |
| − | from {
| |
| − | -moz-transform: translateY(100%);
| |
| − | }
| |
| − | to {
| |
| − | -moz-transform: translateY(0%);
| |
| − | }
| |
| − | }
| |
| − | @-ms-keyframes moveFromBottom {
| |
| − | from {
| |
| − | -ms-transform: translateY(100%);
| |
| − | }
| |
| − | to {
| |
| − | -ms-transform: translateY(0%);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /*======================== Slideshow =========================*/
| |
| − | .sp-slideshow {
| |
| − | position: relative;
| |
| − | margin-left: -10px;
| |
| − | width: 100%;
| |
| − | max-width: 1000px;
| |
| − | min-width: 260px;
| |
| − | height: 385px;
| |
| − | border: 10px solid #fff;
| |
| − | border: 10px solid rgba(255,255,255,0.9);
| |
| − | box-shadow: 0 2px 6px rgba(0,0,0,0.2);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sp-slideshow_S{
| |
| − | position: relative;
| |
| − | margin-left: 100px;
| |
| − | width: 100%;
| |
| − | max-width: 650px;
| |
| − | min-width: 260px;
| |
| − | height: 385px;
| |
| − | border: 10px solid #fff;
| |
| − | border: 10px solid rgba(255,255,255,0.9);
| |
| − | box-shadow: 0 2px 6px rgba(0,0,0,0.2);
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sp-content {
| |
| − | background:none;
| |
| − | position: relative;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .sp-parallax-bg {
| |
| − | background: url('https://static.igem.org/mediawiki/2014/c/c0/Wageningen_UR_slide_background.png') repeat-x scroll 0 0;
| |
| − | -webkit-background-size: cover;
| |
| − | -moz-background-size: cover;
| |
| − | background-size: cover;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input, .sp-slideshow_S input {
| |
| − | position: absolute;
| |
| − | bottom: 15px;
| |
| − | left: 50%;
| |
| − | width: 9px;
| |
| − | height: 9px;
| |
| − | z-index: 1001;
| |
| − | cursor: pointer;
| |
| − | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
| |
| − | filter: alpha(opacity=0);
| |
| − | opacity: 0;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input + label, .sp-slideshow_S input + label {
| |
| − | position: absolute;
| |
| − | bottom: 15px;
| |
| − | left: 50%;
| |
| − | width: 6px;
| |
| − | height: 6px;
| |
| − | display: block;
| |
| − | z-index: 1000;
| |
| − | border: 3px solid #fff;
| |
| − | border: 3px solid rgba(255,255,255,0.9);
| |
| − | -webkit-border-radius: 50%;
| |
| − | -moz-border-radius: 50%;
| |
| − | border-radius: 50%;
| |
| − | -webkit-transition: background-color linear 0.1s;
| |
| − | -moz-transition: background-color linear 0.1s;
| |
| − | -o-transition: background-color linear 0.1s;
| |
| − | -ms-transition: background-color linear 0.1s;
| |
| − | transition: background-color linear 0.1s;
| |
| − | }
| |
| − | .sp-slideshow input:checked + label, .sp-slideshow_S input:checked + label {
| |
| − | background-color: #fff;
| |
| − | background-color: rgba(255,255,255,0.9);
| |
| − | }
| |
| − |
| |
| − | .sp-selector-1, .button-label-1 {
| |
| − | margin-left: -54px;
| |
| − | }
| |
| − | .sp-selector-2, .button-label-2 {
| |
| − | margin-left: -36px;
| |
| − | }
| |
| − | .sp-selector-3, .button-label-3 {
| |
| − | margin-left: -18px;
| |
| − | }
| |
| − | .sp-selector-4, .button-label-4 {
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − | .sp-selector-5, .button-label-5 {
| |
| − | margin-left: 18px;
| |
| − | }
| |
| − | .sp-selector-6, .button-label-6 {
| |
| − | margin-left: 36px;
| |
| − | }
| |
| − | .sp-selector-7, .button-label-7 {
| |
| − | margin-left: 54px;
| |
| − | }
| |
| − | .sp-selector-8, .button-label-8 {
| |
| − | margin-left: 72px;
| |
| − | }
| |
| − |
| |
| − | .sp-arrow {
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | width: 28px;
| |
| − | height: 38px;
| |
| − | margin-top: -19px;
| |
| − | display: none;
| |
| − | opacity: 0.8;
| |
| − | cursor: pointer;
| |
| − | z-index: 1000;
| |
| − | background: transparent url('https://static.igem.org/mediawiki/2014/4/4b/Wageningen_UR_arrows.png') no-repeat;
| |
| − | -webkit-transition: opacity linear 0.3s;
| |
| − | -moz-transition: opacity linear 0.3s;
| |
| − | -o-transition: opacity linear 0.3s;
| |
| − | -ms-transition: opacity linear 0.3s;
| |
| − | transition: opacity linear 0.3s;
| |
| − | }
| |
| − | .sp-arrow:hover{
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .sp-arrow:active{
| |
| − | margin-top: -18px;
| |
| − | }
| |
| − | .sp-selector-1:checked ~ .sp-arrow.sp-a2,
| |
| − | .sp-selector-2:checked ~ .sp-arrow.sp-a3,
| |
| − | .sp-selector-3:checked ~ .sp-arrow.sp-a4,
| |
| − | .sp-selector-4:checked ~ .sp-arrow.sp-a5,
| |
| − | .sp-selector-5:checked ~ .sp-arrow.sp-a6,
| |
| − | .sp-selector-6:checked ~ .sp-arrow.sp-a7,
| |
| − | .sp-selector-7:checked ~ .sp-arrow.sp-a8 {
| |
| − | right: 15px;
| |
| − | display: block;
| |
| − | background-position: top right;
| |
| − | }
| |
| − | .sp-selector-2:checked ~ .sp-arrow.sp-a1,
| |
| − | .sp-selector-3:checked ~ .sp-arrow.sp-a2,
| |
| − | .sp-selector-4:checked ~ .sp-arrow.sp-a3,
| |
| − | .sp-selector-5:checked ~ .sp-arrow.sp-a4,
| |
| − | .sp-selector-6:checked ~ .sp-arrow.sp-a5,
| |
| − | .sp-selector-7:checked ~ .sp-arrow.sp-a6,
| |
| − | .sp-selector-8:checked ~ .sp-arrow.sp-a7 {
| |
| − | left: 15px;
| |
| − | display: block;
| |
| − | background-position: top left;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input:checked ~ .sp-content, .sp-slideshow_S input:checked ~ .sp-content {
| |
| − | -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | -o-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | transition: background-position linear 0.6s, background-color linear 0.8s;
| |
| − | }
| |
| − |
| |
| − | .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg, .sp-slideshow_S input:checked ~ .sp-content .sp-parallax-bg {
| |
| − | -webkit-transition: background-position linear 0.7s;
| |
| − | -moz-transition: background-position linear 0.7s;
| |
| − | -o-transition: background-position linear 0.7s;
| |
| − | -ms-transition: background-position linear 0.7s;
| |
| − | transition: background-position linear 0.7s;
| |
| − | }
| |
| − |
| |
| − | input.sp-selector-1:checked ~ .sp-content {
| |
| − | background-position: 0 0;
| |
| − | background-color: #727b7f;
| |
| − | }
| |
| − | input.sp-selector-2:checked ~ .sp-content {
| |
| − | background-position: -100px 0;
| |
| − | background-color: #7f7276;
| |
| − | }
| |
| − | input.sp-selector-3:checked ~ .sp-content {
| |
| − | background-position: -200px 0;
| |
| − | background-color: #737f72;
| |
| − | }
| |
| − | input.sp-selector-4:checked ~ .sp-content {
| |
| − | background-position: -300px 0;
| |
| − | background-color: #79727f;
| |
| − | }
| |
| − | input.sp-selector-5:checked ~ .sp-content {
| |
| − | background-position: -400px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − | input.sp-selector-6:checked ~ .sp-content {
| |
| − | background-position: -500px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − | input.sp-selector-7:checked ~ .sp-content {
| |
| − | background-position: -600px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − | input.sp-selector-8:checked ~ .sp-content {
| |
| − | background-position: -700px 0;
| |
| − | background-color: #7d7f72;
| |
| − | }
| |
| − |
| |
| − | input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: 0 0;
| |
| − | }
| |
| − | input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -200px 0;
| |
| − | }
| |
| − | input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -400px 0;
| |
| − | }
| |
| − | input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -600px 0;
| |
| − | }
| |
| − | input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -800px 0;
| |
| − | }
| |
| − | input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -1000px 0;
| |
| − | }
| |
| − | input.sp-selector-7:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -1200px 0;
| |
| − | }
| |
| − | input.sp-selector-8:checked ~ .sp-content .sp-parallax-bg {
| |
| − | background-position: -1400px 0;
| |
| − | }
| |
| − |
| |
| − | .sp-slider {
| |
| − | position: relative;
| |
| − | left: 0;
| |
| − | width: 800%;
| |
| − | height: 100%;
| |
| − | list-style: none;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | -webkit-transition: left ease-in 0.8s;
| |
| − | -moz-transition: left ease-in 0.8s;
| |
| − | -o-transition: left ease-in 0.8s;
| |
| − | -ms-transition: left ease-in 0.8s;
| |
| − | transition: left ease-in 0.8s;
| |
| − | }
| |
| − |
| |
| − | .sp-slider > li {
| |
| − | color: #fff;
| |
| − | width: 12.5%;
| |
| − | list-style:none;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | -o-box-sizing: border-box;
| |
| − | -ms-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − |
| |
| − | padding: 0 1% 0 0;
| |
| − |
| |
| − | height: 100%;
| |
| − |
| |
| − | float: left;
| |
| − | text-align: center;
| |
| − | opacity: 0.4;
| |
| − | -webkit-transition: opacity ease-in 0.4s 0.8s;
| |
| − | -moz-transition: opacity ease-in 0.4s 0.8s;
| |
| − | -o-transition: opacity ease-in 0.4s 0.8s;
| |
| − | -ms-transition: opacity ease-in 0.4s 0.8s;
| |
| − | transition: opacity ease-in 0.4s 0.8s;
| |
| − | }
| |
| − |
| |
| − | .sp-slider > li img{
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | -o-box-sizing: border-box;
| |
| − | -ms-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | display: block;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .big li img{
| |
| − | margin: 0 55px;
| |
| − | padding: 40px 0 50px 0;
| |
| − | width:790px;
| |
| − | max-height:100%;
| |
| − | }
| |
| − |
| |
| − | .small li img {
| |
| − | margin: 0 70px;
| |
| − | padding: 20px 0 60px 0;
| |
| − | max-height: 100%;
| |
| − | max-width: 100%;
| |
| − | }
| |
| − | input.sp-selector-1:checked ~ .sp-content .sp-slider {
| |
| − | left: 0;
| |
| − | }
| |
| − | input.sp-selector-2:checked ~ .sp-content .sp-slider {
| |
| − | left: -100%;
| |
| − | }
| |
| − | input.sp-selector-3:checked ~ .sp-content .sp-slider {
| |
| − | left: -200%;
| |
| − | }
| |
| − | input.sp-selector-4:checked ~ .sp-content .sp-slider {
| |
| − | left: -300%;
| |
| − | }
| |
| − | input.sp-selector-5:checked ~ .sp-content .sp-slider {
| |
| − | left: -400%;
| |
| − | }
| |
| − | input.sp-selector-6:checked ~ .sp-content .sp-slider {
| |
| − | left: -500%;
| |
| − | }
| |
| − | input.sp-selector-7:checked ~ .sp-content .sp-slider {
| |
| − | left: -600%;
| |
| − | }
| |
| − | input.sp-selector-8:checked ~ .sp-content .sp-slider {
| |
| − | left: -700%;
| |
| − | }
| |
| − |
| |
| − | input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
| |
| − | input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
| |
| − | input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
| |
| − | input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
| |
| − | input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5),
| |
| − | input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6),
| |
| − | input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(7),
| |
| − | input.sp-selector-8:checked ~ .sp-content .sp-slider > li:nth-child(8){
| |
| − | opacity: 1;
| |
| − | }
| |
| − | @media screen and (max-width: 840px){
| |
| − | .sp-slideshow { height: 345px; }
| |
| − | }
| |
| − | @media screen and (max-width: 680px){
| |
| − | .sp-slideshow { height: 285px; }
| |
| − | }
| |
| − | @media screen and (max-width: 560px){
| |
| − | .sp-slideshow { height: 235px; }
| |
| − | }
| |
| − | @media screen and (max-width: 320px){
| |
| − | .sp-slideshow { height: 158px; }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ======= Journal ======= */
| |
| − |
| |
| − | .journal {
| |
| − | z-index:555;
| |
| − | background-color:white;
| |
| − | color:#eeefef;
| |
| − | font-size:80%;
| |
| − | font-family:verdana, geneva, sans-serif;
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | }
| |
| − |
| |
| − | .container {
| |
| − | width:940px;
| |
| − | margin-left:auto;
| |
| − | margin-right:auto;
| |
| − | padding:10px;
| |
| − | }
| |
| − |
| |
| − | #journal h1{
| |
| − | color:#97A355;
| |
| − | font-size:36px;
| |
| − | font-weight:400;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | #journal h2 {
| |
| − | font-size:22px;
| |
| − | font-weight:400;
| |
| − | margin:5px 0;
| |
| − | letter-spacing:.1em;
| |
| − | }
| |
| − |
| |
| − | #journal h3 {
| |
| − | font-size:1.6em;
| |
| − | margin:10px 0 10px 10px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .lead {
| |
| − | font-size:2em;
| |
| − | margin-bottom:40px;
| |
| − | }
| |
| − |
| |
| − | .clear {
| |
| − | clear:both;
| |
| − | line-height:0;
| |
| − | font-size:0;
| |
| − | }
| |
| − |
| |
| − | /* ============ TIMELINE ============= */
| |
| − |
| |
| − | .timelineContainer {
| |
| − | border-left:2px solid #97A355;<!-- THE COLOR OF MAJOR LINE-->
| |
| − | margin:20px auto;
| |
| − | width:900px;
| |
| − | }
| |
| − |
| |
| − | div.timelineToggle {
| |
| − | float:right;
| |
| − | margin-right:0;
| |
| − | white-space:nowrap;
| |
| − | }
| |
| − |
| |
| − | a.expandAll {
| |
| − | color:#ccc;
| |
| − | cursor:pointer;
| |
| − | background:#000;
| |
| − | -webkit-border-radius:4px;
| |
| − | -moz-border-radius:4px;
| |
| − | border-radius:4px;
| |
| − | font-size:12px;
| |
| − | padding:3px 5px;
| |
| − | }
| |
| − |
| |
| − | a.expandAll:hover {
| |
| − | color:rgb(51,51,51);
| |
| − | background-color:#97A335;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − |
| |
| − | div.timelineMajor {
| |
| − | clear:left;
| |
| − | float:left;
| |
| − | margin:0 0 12px;
| |
| − | width:900px;
| |
| − | }
| |
| − |
| |
| − | .timelineMajor h2 {
| |
| − | background:url(../images/timeline_century_tick.gif) left center no-repeat;
| |
| − | font-family:verdana, geneva, sans-serif;
| |
| − | cursor: pointer;
| |
| − | font-size:3em;
| |
| − | font-weight:400;
| |
| − | margin:0 0 10px;
| |
| − | padding:4px 4px 4px 20px;
| |
| − | }
| |
| − |
| |
| − | .timelineMajor h2 span {
| |
| − | background:#97A355; <!--background color of major list-->
| |
| − | -webkit-border-radius:4px;
| |
| − | -moz-border-radius:4px;
| |
| − | border-radius:4px;
| |
| − | color:#131313;
| |
| − | letter-spacing:.1em;
| |
| − | line-height:1.7em;
| |
| − | padding:4px 5px 6px;
| |
| − | }
| |
| − |
| |
| − | dl.timelineMinor {
| |
| − | clear:left;
| |
| − | float:left;
| |
| − | margin:0 12px 0 0;
| |
| − | padding:4px 4px 4px 0;
| |
| − | position:relative;
| |
| − | width:880px;
| |
| − | }
| |
| − |
| |
| − | .timelineMinor dt {
| |
| − | background:url(../images/timeline_decade_tick.gif) left center no-repeat;
| |
| − | clear:left;
| |
| − | font-size:1.6em;
| |
| − | list-style-type:none;
| |
| − | line-height:1.2em;
| |
| − | margin:0 0 12px;
| |
| − | padding:0 0 0 24px;
| |
| − | white-space:nowrap;
| |
| − | }
| |
| − |
| |
| − | .timelineMinor dt a {
| |
| − | color:#999;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − |
| |
| − | .timelineMinor dt a.closed {
| |
| − | color:#999;
| |
| − | font-size:1em;
| |
| − | margin-left:0;
| |
| − | }
| |
| − |
| |
| − | .timelineMinor dt a.open {
| |
| − | color:#97A355;
| |
| − | }
| |
| − |
| |
| − | .timelineMinor dt a:hover {
| |
| − | color:#97A355;
| |
| − | }
| |
| − |
| |
| − | .timelineMinor dd {
| |
| − | color:rgb(51,51,51);
| |
| − | padding-left:24px;
| |
| − | width:100%;
| |
| − | }
| |
| − |
| |
| − | .timelineMinor dd h3 {
| |
| − | color:rgb(51,51,51);
| |
| − | clear:both;
| |
| − | float:left;
| |
| − | font-size:1.5em;
| |
| − | margin:0;
| |
| − | white-space:nowrap;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent p {
| |
| − | clear:both;
| |
| − | line-height:1.5em;
| |
| − | margin:6px 0 10px;
| |
| − | width:700px;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent h4 {
| |
| − | clear:left;
| |
| − | float:left;
| |
| − | font-size:1.4em;
| |
| − | font-weight:400;
| |
| − | margin:10px 0 0;
| |
| − | padding:0 0 0 20px;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent blockquote {
| |
| − | border-left:2px solid #97A355;
| |
| − | clear:left;
| |
| − | float:left;
| |
| − | font-size:1.8em;
| |
| − | margin-left:0;
| |
| − | padding:0 30px;
| |
| − | width:400px;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent blockquote .attribution{
| |
| − | font-size:0.7em;
| |
| − | text-align: right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .timelineEvent div.media {
| |
| − | float:right;
| |
| − | padding:0 0 12px;
| |
| − | width:300px;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent .media img {
| |
| − | border:2px solid #000;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent .media p {
| |
| − | font-size:1.2em;
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent .media a:link,.timelineEvent .media a:visited {
| |
| − | color:#ab221b;
| |
| − | }
| |
| − |
| |
| − | .timelineEvent .media a:hover {
| |
| − | color:#7DBADF;
| |
| − | }
| |
| − |
| |
| − | /* ================= Sponsor box ====================== */
| |
| − |
| |
| − | .sponsor_box{
| |
| − | width: 900px;
| |
| − | margin:0 auto;
| |
| − | }
| |
| − |
| |
| − | .sponsor_rectangle, .sponsor_square{
| |
| − | position: relative;
| |
| − | width: 250px;
| |
| − | margin: 10px 10px 10px 10px;
| |
| − | float: left;
| |
| − | height: 120px;
| |
| − | display:inline;
| |
| − | /*width:30%;*/
| |
| − | /*clear: both;*/
| |
| − | background-color: #fff; /*#F6FAED;*/
| |
| − | border: 10px solid white;
| |
| − | /*border-radius: 10px;*/
| |
| − | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
| |
| − | }
| |
| − |
| |
| − | .sponsor_wur {
| |
| − | position:absolute;
| |
| − | width:250px;
| |
| − | height:410px;
| |
| − | margin: 10px 10px 10px 10px;
| |
| − | display:block;
| |
| − | margin-left:590px;
| |
| − | margin-top:330px;
| |
| − | background-color: #fff; /*#F6FAED;*/
| |
| − | border: 10px solid white;
| |
| − | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
| |
| − | }
| |
| − |
| |
| − | .sponsor_rectangle img, .sponsor_square img, .sponsor_wur img{
| |
| − | width: 250px;
| |
| − | position: absolute;
| |
| − | top:0;
| |
| − | bottom:0;
| |
| − | margin:auto;
| |
| − | }
| |
| − |
| |
| − | .sponsor_square{
| |
| − | height: 250px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==================== Link style ==================== */
| |
| − | .soft_link, .soft_link:visited {
| |
| − | text-decoration:none;
| |
| − | color: #676f23;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | .soft_link:hover{
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − |
| |
| − | /* ==================== Tour style ==================== */
| |
| − | .tour-arrow-left{
| |
| − | width:100px;
| |
| − | float:left;
| |
| − | margin-top:20px;
| |
| − | }
| |
| − |
| |
| − | .tour-arrow-right{
| |
| − | width:100px;
| |
| − | float:right;
| |
| − | margin-top:20px;
| |
| − | }
| |
| − |
| |
| − | .tour-header{
| |
| − | float:left;
| |
| − | font-family: 'Gloria Hallelujah', cursive;
| |
| − | font-size:150%;
| |
| − | width:600px;
| |
| − | margin-left:50px;
| |
| − | margin-right:50px
| |
| − | }
| |
| − | .tour-header h1{
| |
| − | text-align:center;
| |
| − | }
| |
| − | .tour-header p{
| |
| − | font-size: 16px;
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu {
| |
| − | font-size: small;
| |
| − | list-style-type: none;
| |
| − | list-style: none;
| |
| − | padding: 0;
| |
| − | font-family: snap,arial, sans-serif;
| |
| − | width: 900px;
| |
| − | margin-left:20px;
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu li{
| |
| − | float: left;
| |
| − | margin: 5px;
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu li div.square-menu-header{
| |
| − | clear: both;
| |
| − | height: 80px;
| |
| − | line-height: 80px;
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu li a {
| |
| − | text-decoration: none;
| |
| − | margin: 10px 10px 10px 10px;
| |
| − | background-color: #fff;
| |
| − | border: 5px solid #111;
| |
| − | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
| |
| − | display: block;
| |
| − | border-radius: 25px;
| |
| − | font-family: 'Gloria Hallelujah', cursive;
| |
| − | width: 400px;
| |
| − | height: 200px;
| |
| − | text-align: left;
| |
| − | text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
| |
| − | -webkit-transition: all 0.2s ease-in;
| |
| − | -ms-transition: all 0.2s ease-in;
| |
| − | -moz-transition: all 0.2s ease-in;
| |
| − | -o-transition: all 0.2s ease-in;
| |
| − | transition: all 0.2s ease-in;
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu li a h3{
| |
| − | font-family: 'Gloria Hallelujah', cursive;
| |
| − | color: #731115;
| |
| − | font-size: 29px;
| |
| − | display: inline-block;
| |
| − | vertical-align: middle;
| |
| − | margin-right: 5px;`
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu li a p{
| |
| − | text-decoration: none;
| |
| − | float: left;
| |
| − | font-size: 16px;
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu li a img{
| |
| − | float: left;
| |
| − | height: 80px;
| |
| − | /*float:right;*/
| |
| − | margin: 10px;
| |
| − | margin-right: 15px;
| |
| − | }
| |
| − |
| |
| − | ul.square-menu li a:hover {
| |
| − | background: #97A355;
| |
| − | -moz-transform: scale(1.05);
| |
| − | -webkit-transform: scale(1.05);
| |
| − | -o-transform: scale(1.05);
| |
| − | transform: scale(1.05);
| |
| − | -moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
| |
| − | -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
| |
| − | box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
| |
| − | }
| |
| − | #center ul li.centered-menu-box {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #center ul.square-menu li.centered-menu-box{
| |
| − | float: left;
| |
| − | margin: 5px;
| |
| − | margin-left: 225px;
| |
| − | }
| |
| − | #tourbutton{
| |
| − | margin:0;
| |
| − | padding-right:40px;
| |
| − | padding-top:10px;
| |
| − | float:right;
| |
| − | width:130px;
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | #tourbutton img{
| |
| − | width:100%;
| |
| − | }
| |
| − | #tourbutton:hover{
| |
| − | -webkit-transform: scale(1.1);
| |
| − | -moz-transform: scale(1.1);
| |
| − | -o-transform: scale(1.1);
| |
| − | transform: scale(1.1);
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #tourbox{
| |
| − | margin:10px 0px;
| |
| − | float:left;
| |
| − | width:500px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #tourbox h1{
| |
| − | font-family: 'Gloria Hallelujah', cursive !important;
| |
| − | font-weight:600 !important;
| |
| − | font-size:25px !important;
| |
| − | padding-left:70px;
| |
| − | padding-top:10px;
| |
| − | }
| |
| − |
| |
| − | #tourbox img{
| |
| − | position:absolute;
| |
| − | margin:50px 0px;
| |
| − | display:block;
| |
| − | width:60px;
| |
| − |
| |
| − | }
| |
| − | /* ==================== CounterBox ==================== */
| |
| − | #CounterBox{
| |
| − | float:right;
| |
| − | padding:30px 20px 0px 0px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #CounterBox p{
| |
| − | text-align:center;
| |
| − | color:#97A355;
| |
| − | font-size:20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ==================== Table style ==================== */
| |
| − | ul.table{
| |
| − | margin-left:35px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | ul.table th td {
| |
| − | font-family: verdana, geneva, sans-serif;
| |
| − | margin-left:0px;
| |
| − | padding: 52px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | ul.table th{
| |
| − | padding: 5px;
| |
| − | font-weight: bold;
| |
| − | font-size: 170%;
| |
| − | background-color: #97A355;
| |
| − | display: table-cell;
| |
| − | vertical-align: inherit;
| |
| − | font-weight: bold;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | ul.table tr th:first-child{
| |
| − | border-radius: 10px 0px 0px 0px;
| |
| − | }
| |
| − |
| |
| − | ul.table tr th:last-child{
| |
| − | border-radius: 0px 10px 0px 0px;
| |
| − | }
| |
| − |
| |
| − | ul.table tr td:nth-child(odd){
| |
| − | background-color: rgba(234, 246, 168, 1);
| |
| − | }
| |
| − |
| |
| − | ul.table td {
| |
| − | padding: 5px;
| |
| − | font-weight: normal;
| |
| − | font-size:14px;
| |
| − | background-color: white;
| |
| − | border: 1px solid #97A355;
| |
| − | display: table-cell;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | /*---------------------- Overview picture ----------------------*/
| |
| − |
| |
| − | .overview{
| |
| − | height:310px;
| |
| − | width:900px;
| |
| − | margin-left:15px;
| |
| − | }
| |
| − |
| |
| − | .overview > div {
| |
| − | height: 310px;
| |
| − | position:relative;
| |
| − | float:left;
| |
| − | margin:0px;
| |
| − | }
| |
| − |
| |
| − | .overview:hover > div{
| |
| − | opacity:0.4;
| |
| − | -webkit-transition: all .3s ease-in-out;
| |
| − | -moz-transition: all .3s ease-in-out;
| |
| − | -o-transition: all .3s ease-in-out;
| |
| − | transition: all .3s ease-in-out;
| |
| − | }
| |
| − |
| |
| − | .overview:hover > div img.top {
| |
| − | opacity:0.2;
| |
| − | }
| |
| − |
| |
| − | .overview:hover > div:hover{
| |
| − | opacity:1;
| |
| − | box-shadow:0px -6px 4px #888888;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .overview > div img{
| |
| − | position:absolute;
| |
| − | left:0;
| |
| − | height:100%;
| |
| − | -webkit-transition: all .3s ease-in-out;
| |
| − | -moz-transition: all .3s ease-in-out;
| |
| − | -o-transition: all .3s ease-in-out;
| |
| − | transition: all .3s ease-in-out;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .overview > div img.top:hover {
| |
| − | opacity:0;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .overview > div img.transparent {
| |
| − | opacity:0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .switchtext{
| |
| − | height:30px;
| |
| − | line-height:30px;
| |
| − | margin-left:200px;
| |
| − | margin-right:10px;
| |
| − | float:left;
| |
| − | font-size:18px;
| |
| − | }
| |
| − |
| |
| − | .switchtext > span{
| |
| − | font-size:35px;
| |
| − | vertical-align:-6px;
| |
| − | }
| |
| − |
| |
| − | .onoffswitch {
| |
| − | position: relative;
| |
| − | width: 100px;
| |
| − | -webkit-user-select:none;
| |
| − | -moz-user-select:none;
| |
| − | -ms-user-select: none;
| |
| − | padding-bottom:10px;
| |
| − | float:left;
| |
| − | }
| |
| − | .onoffswitch-checkbox {
| |
| − | display: none;
| |
| − | }
| |
| − | .onoffswitch-label {
| |
| − | display: block;
| |
| − | overflow: hidden;
| |
| − | cursor: pointer;
| |
| − | border: 2px solid #999999;
| |
| − | border-radius: 20px;
| |
| − | }
| |
| − |
| |
| − | .onoffswitch-inner {
| |
| − | display: block;
| |
| − | width: 200%;
| |
| − | margin-left: -100%;
| |
| − | -moz-transition: margin 0.3s ease-in 0s;
| |
| − | -webkit-transition: margin 0.3s ease-in 0s;
| |
| − | -o-transition: margin 0.3s ease-in 0s;
| |
| − | transition: margin 0.3s ease-in 0s;
| |
| − | }
| |
| − | .onoffswitch-inner:before, .onoffswitch-inner:after {
| |
| − | display: block;
| |
| − | float: left;
| |
| − | width: 50%;
| |
| − | height: 30px;
| |
| − | padding: 0;
| |
| − | line-height: 30px;
| |
| − | font-size: 16px;
| |
| − | color: white;
| |
| − | font-family: Trebuchet, Arial, sans-serif;
| |
| − | font-weight: bold;
| |
| − | -moz-box-sizing: border-box;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − | .onoffswitch-inner:before {
| |
| − | content: "Show";
| |
| − | padding-left: 11px;
| |
| − | background-color: #EEEEEE;
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − | .onoffswitch-inner:after {
| |
| − | content: "Hide";
| |
| − | padding-right: 11px;
| |
| − | background-color: #EEEEEE;
| |
| − | color: #999999;
| |
| − | text-align: right;
| |
| − | }
| |
| − | .onoffswitch-switch {
| |
| − | display: block;
| |
| − | width: 18px;
| |
| − | height:18px;
| |
| − | margin: 6px;
| |
| − | background: #A1A1A1;
| |
| − | border: 2px solid #999999;
| |
| − | border-radius: 20px;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | right: 66px;
| |
| − | -moz-transition: all 0.3s ease-in 0s;
| |
| − | -webkit-transition: all 0.3s ease-in 0s;
| |
| − | -o-transition: all 0.3s ease-in 0s;
| |
| − | transition: all 0.3s ease-in 0s;
| |
| − | }
| |
| − |
| |
| − | .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
| |
| − | margin-left: 0;
| |
| − | }
| |
| − |
| |
| − | .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
| |
| − | right: 0px;
| |
| − | background-color: #27A1CA;
| |
| − | }
| |
| − |
| |
| − | .overview_model{
| |
| − | width:862px;
| |
| − | height:331px;
| |
| − |
| |
| − | background-repeat:no-repeat;
| |
| − | background-size:862px;
| |
| − | display:block;
| |
| − | margin-left:15px;
| |
| − | }
| |
| − |
| |
| − | .model_brick{
| |
| − | width:150px;
| |
| − | height:150px;
| |
| − | float:left;
| |
| − | margin-top:120px;
| |
| − | -webkit-transition: all .2s ease-in-out;
| |
| − | -moz-transition: all .2s ease-in-out;
| |
| − | -o-transition: all .2s ease-in-out;
| |
| − | -ms-transition: all .2s ease-in-out;
| |
| − | }
| |
| − |
| |
| − | .model_brick > img{
| |
| − | width:150px;
| |
| − | }
| |
| − |
| |
| − | .model_brick:hover{
| |
| − | -webkit-transform: scale(1.2);
| |
| − | -moz-transform: scale(1.2);
| |
| − | -o-transform: scale(1.2);
| |
| − | transform: scale(1.2);
| |
| − | }
| |
| − |
| |
| − | figure {
| |
| − | display: block;
| |
| − | margin-left:auto;
| |
| − | margin-right:auto;
| |
| − | }
| |
| − |
| |
| − | figure img {
| |
| − | display: block;
| |
| − | margin-left:auto;
| |
| − | margin-right:auto;
| |
| − | }
| |
| − |
| |
| − | figure figcaption {
| |
| − | font-size: 12px;
| |
| − | font-weight: bold;
| |
| − | display: block;
| |
| − | margin-left:auto;
| |
| − | margin-right:auto;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | ul.references{
| |
| − | list-style-type: circle;
| |
| − | }
| |
| − |
| |
| − | ol.references{
| |
| − | list-style-type: decimal;
| |
| − | }
| |
| − |
| |
| − | ul.references li, ol.references li {
| |
| − | font-family: courier new, monospace;
| |
| − | font-size:14px;
| |
| − | margin-bot:5px;
| |
| − | margin-top:5px;
| |
| − | margin-left: 30px;
| |
| − | }
| |
