Team:Wageningen UR/css

From 2014.igem.org

(Difference between revisions)
(Undo revision 329299 by Rik (talk))
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 */
/* Navigation Menu */
.navmenubkg {
.navmenubkg {
Line 661: Line 111:
     padding: 0;
     padding: 0;
     margin: 0;
     margin: 0;
-
     /*position:relative;*/
+
     position:relative;
width:900px;
width:900px;
}
}
Line 667: Line 117:
     width: 142px;
     width: 142px;
     height: 50px;
     height: 50px;
-
     /*position: relative;*/
+
     position: relative;
     float:left;
     float:left;
     background:#97A355;
     background:#97A355;
Line 689: Line 139:
     display: block;
     display: block;
     color: #222;
     color: #222;
-
     /*position: relative;*/
+
     position: relative;
}
}
Line 861: Line 311:
visibility:hidden;
visibility:hidden;
height:0;
height:0;
-
/*position: relative;*/
+
position:relative;
float:none;
float:none;
width:138px;
width:138px;
Line 914: Line 364:
#ca-menu li:hover li {
#ca-menu li:hover li {
-
/*position: relative;*/
+
position:relative;
float:none;
float:none;
margin:0;
margin:0;
Line 1,034: Line 484:
#ca-menu li:hover ul ul li {
#ca-menu li:hover ul ul li {
visibility:hidden;
visibility:hidden;
-
/*position: relative;*/
+
position:relative;
float:none;
float:none;
margin:0;
margin:0;
Line 1,170: Line 620:
         -ms-transform: translateY(0%);
         -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;
 
}
}

Revision as of 16:00, 17 October 2014

/* Navigation Menu */ .navmenubkg { 

  position:relative;
  display:block;
  z-index:450;
  top:10px;
  height:50px;
  left:0;
  right:0;
  background:transparent;
  }
  1. 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;

}

  1. rightbarlogo {

padding-top: 1 px; position: absolute; right:-10px; bottom: 1px; }

  1. 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; 

}


  1. 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); }


  1. igemlogo:hover img {

opacity:1; }

  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*/

  1. ca-menu{ 
   padding:0;
   margin:0;

margin-left:15px; 

   width: 880px;

display:block; position:relative; float:left; }

  1. ca-menu ul{

list-style-type: none; list-style-image: none; 

   padding: 0;
   margin: 0;
   position:relative;

width:900px; }

  1. 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;

}

  1. ca-menu li a{ 
   text-align: left;
   width: 100%;
   height: 100%;
   display: block;
   color: #222;
   position: relative;

}

  1. 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(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;

}

  1. ca-icon2{

background:url(Wageningen_UR_overview_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon3{

background:url(Wageningen_UR_outreach_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon4{

background:url(Wageningen_UR_team_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon5{

background:url(Wageningen_UR_safety_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon6{

background:url(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;

}


  1. 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);

}

  1. ca-menu ul li:hover a {

-webkit-transform: none; 

   -moz-transform: none;  
   -ms-transform: none;   
   -o-transform: none;

transform:none; }

  1. ca-menu ul li:hover #ca-icon1{ 
  /* overflow:hidden;

color: #FFF372; 

   font-size:90px;*/

background:url(Wageningen_UR_cog2.png); background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center;

}

  1. ca-menu ul li:hover #ca-icon2{ 
  	background:url(Wageningen_UR_overview_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon3{ 
  	background:url(Wageningen_UR_outreach_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon4{ 
  	background:url(Wageningen_UR_team_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon5{ 
  	background:url(Wageningen_UR_safety_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon6{ 
  	background:url(Wageningen_UR_notebook_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. 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*/

  1. ca-menu li ul, #ca-menu li ul a {

visibility:hidden; height:0; position:fixed; background-color:tranparent; 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; }


  1. 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;

}

  1. 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;

}

  1. 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; }

  1. 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; }


  1. 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; }

  1. ca-menu li:hover li > a:after { 
   content:"\25B6";

float: right; font-size:8px; margin-right:1px; margin-left:-15px; }

  1. ca-menu li:hover li > a:only-child:after { 
   content: ;

}

  1. 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; }

  1. 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; }

  1. 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; }

  1. 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;

}

  1. 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*/

  1. ca-menu li li ul{

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; margin-top:1px;

-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; }

  1. ca-menu li li ul a{

visibility:hidden; height:150px; position:fixed; background-color:tranparent; 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; }

  1. 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; }

  1. ca-menu li:hover ul ul li a{

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; }

  1. 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; }

  1. 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; }

  1. 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; }

  1. ca-menu li:hover ul li:hover > ul li a{

width:138px; height:36px; visibility:visible; }

  1. 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;

}

  1. 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; }


@-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%);
   }

}

Retrieved from "http://2014.igem.org/Team:Wageningen_UR/css"