Line 3: | Line 3: | ||
<style> | <style> | ||
+ | #home_logo, #sideMenu { display:none; } | ||
+ | #sideMenu, #top_title, .patrollink {display:none;} | ||
+ | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | ||
+ | body {background-color:white; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*anti igem css*/ | ||
+ | |||
+ | |||
+ | #HQ_page h1, h2, h3, h5 { | ||
+ | font-family: Didot, Didot LT STD, Lemon/Milk lIGHT, sans-serif; | ||
+ | font-weight: 400; | ||
+ | border : none; | ||
+ | border : white; | ||
+ | } | ||
+ | #mw-content-text h1 { | ||
+ | border : none; | ||
+ | border : white; | ||
+ | } | ||
+ | #HQ_page h4 { | ||
+ | color : rgb(64,64,64); | ||
+ | } | ||
+ | #HQ_page table { | ||
+ | border : none; | ||
+ | border-collapse : separate; | ||
+ | margin : 0; | ||
+ | } | ||
+ | #HQ_page ul { | ||
+ | list-style-type:disc; | ||
+ | list-style-image : none; | ||
+ | } | ||
+ | groupparts { | ||
+ | margin :margin-left : 50%; | ||
+ | } | ||
+ | /*General CSS*/ | ||
+ | body { | ||
+ | margin : 0; | ||
+ | padding:0; | ||
+ | width : 100%; | ||
+ | } | ||
+ | @media only screen and (max-width: 1200px) { | ||
+ | |||
+ | } | ||
+ | @media only screen and (max-width: 800px) { | ||
+ | body { | ||
+ | width : 800px; | ||
+ | } | ||
+ | #menu { | ||
+ | height : 130px !important; | ||
+ | } | ||
+ | .menulist { | ||
+ | width : 400px !important; | ||
+ | overflow : visible !important; | ||
+ | } | ||
+ | #fbnoticon{ | ||
+ | } | ||
+ | #instanoticon { | ||
+ | } | ||
+ | #twnoticon{ | ||
+ | } | ||
+ | |||
+ | } | ||
+ | #top-button { | ||
+ | position : fixed; | ||
+ | right : 20px; | ||
+ | bottom : 10px; | ||
+ | width : 25px; | ||
+ | height : 25px; | ||
+ | z-index : 100; | ||
+ | } | ||
+ | #top-button img { | ||
+ | width : 100%; | ||
+ | height : 100%; | ||
+ | } | ||
+ | .textbody img { | ||
+ | width : 100%; | ||
+ | } | ||
+ | .textbody span { | ||
+ | font-size : 12px; | ||
+ | text-align : justify; | ||
+ | } | ||
+ | .textbody h4 { | ||
+ | text-align : left; | ||
+ | font-size : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | color : rgb(64,64,64); | ||
+ | } | ||
+ | .textbody h6 { | ||
+ | text-align : center; | ||
+ | font-size : 15px; | ||
+ | } | ||
+ | .textbody table { | ||
+ | width : 100%; | ||
+ | word-wrap : break-word; | ||
+ | } | ||
+ | .textbody table tr td { | ||
+ | border : rgb(94,94,94) solid 1px; | ||
+ | text-align : left; | ||
+ | } | ||
+ | .textbody table tr td img { | ||
+ | width : 100%; | ||
+ | margin : 0; | ||
+ | } | ||
+ | .header { | ||
+ | width : 100%; | ||
+ | height : 100vh; | ||
+ | background-attachment: fixed; | ||
+ | background-position : center; | ||
+ | background-repeat : no-repeat; | ||
+ | background-size : cover; | ||
+ | background-color : rgb(200,200,200); | ||
+ | text-align : center; | ||
+ | line-height : 100px; | ||
+ | font-family : "Avenir", Lato, sans-serif; | ||
+ | font-size : 100px; | ||
+ | color : white; | ||
+ | font-weight : bold; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | .textbody { | ||
+ | width : 75%; | ||
+ | margin : 0 auto; | ||
+ | text-align : justify; | ||
+ | padding-top : 75px; | ||
+ | display : block; | ||
+ | font-family : "Futura", sans-serif; | ||
+ | color : rgb(64,64,64); | ||
+ | font-size : 15px; | ||
+ | margin-bottom : 50px; | ||
+ | text-indent : 15px; | ||
+ | } | ||
+ | |||
+ | #HQ_page .textbody p { | ||
+ | font-family : "Futura", sans-serif; | ||
+ | color : rgb(64,64,64); | ||
+ | font-size : 15px; | ||
+ | } | ||
+ | |||
+ | @supports (-webkit-appearance:none) { | ||
+ | .textbody { | ||
+ | color : #404040; | ||
+ | font-weight : 150; | ||
+ | } | ||
+ | } | ||
+ | .textbody h1 { | ||
+ | text-align : center; | ||
+ | font-size : 50px; | ||
+ | line-height : 50px; | ||
+ | margin-bottom : 75px; | ||
+ | font-family: Didot, Didot LT STD, Hoefler Text, Garamond, Times New Roman, serif; | ||
+ | color : rgb(56,78,119); | ||
+ | |||
+ | |||
+ | } | ||
+ | .textbody h2 { | ||
+ | font-size : 30px; | ||
+ | font-variant: small-caps; | ||
+ | line-height : 30px; | ||
+ | text-decoration : none; | ||
+ | |||
+ | } | ||
+ | .textbody ul { | ||
+ | list-style-position: inside; | ||
+ | list-style-type: circle; | ||
+ | } | ||
+ | .textbody a { | ||
+ | text-style : none; | ||
+ | color : rgb(64,64,64); | ||
+ | } | ||
+ | /* text in one block*/ | ||
+ | .text1 { | ||
+ | width : 100%; | ||
+ | display : inline-block; | ||
+ | margin-top : 25px; | ||
+ | position : relative; | ||
+ | font-size : 16px; | ||
+ | } | ||
+ | .text1 img { | ||
+ | width : 50%; | ||
+ | margin-left : 25%; | ||
+ | margin-right : 25%; | ||
+ | } | ||
+ | .text1 span { | ||
+ | width : 50%; | ||
+ | margin-left : 25%; | ||
+ | margin-right : 25%; | ||
+ | display : inline-block; | ||
+ | } | ||
+ | /*Text in two equal block*/ | ||
+ | .text2 { | ||
+ | width : 100%; | ||
+ | display : inline-block; | ||
+ | margin-top : 25px; | ||
+ | position : relative; | ||
+ | } | ||
+ | .text2left { | ||
+ | width : 45%; | ||
+ | display : inline-block; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | float : left; | ||
+ | } | ||
+ | .text2right { | ||
+ | width : 45%; | ||
+ | display : inline-block; | ||
+ | float : right; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | } | ||
+ | /*Text in three equal block*/ | ||
+ | .text3 { | ||
+ | width : 100%; | ||
+ | display : inline-block; | ||
+ | margin-top : 25px; | ||
+ | position : relative; | ||
+ | } | ||
+ | .text3left { | ||
+ | width : 30%; | ||
+ | display : inline-block; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | float : left; | ||
+ | } | ||
+ | .text3center { | ||
+ | width : 30%; | ||
+ | display : inline-block; | ||
+ | margin-left : 5%; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | float : left; | ||
+ | } | ||
+ | .text3right { | ||
+ | width : 30%; | ||
+ | float : right; | ||
+ | display : inline-block; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | } | ||
+ | /*Text in two block with the left one larger*/ | ||
+ | .text4 { | ||
+ | width : 100%; | ||
+ | display : inline-block; | ||
+ | margin-top : 25px; | ||
+ | position : relative; | ||
+ | } | ||
+ | .text4left { | ||
+ | width : 65%; | ||
+ | display : inline-block; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | } | ||
+ | .text4right { | ||
+ | width : 30%; | ||
+ | display : inline-block; | ||
+ | float : right; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | } | ||
+ | /*Text in two block with the right one larger*/ | ||
+ | .text5 { | ||
+ | width : 100%; | ||
+ | display : inline-block; | ||
+ | margin-top : 25px; | ||
+ | position : relative; | ||
+ | } | ||
+ | .text5left { | ||
+ | width : 30%; | ||
+ | display : inline-block; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | } | ||
+ | .text5right { | ||
+ | width : 65%; | ||
+ | display : inline-block; | ||
+ | float : right; | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | } | ||
+ | .text6 { | ||
+ | width : 60%; | ||
+ | display : inline-block | ||
+ | margin-top : 20px; | ||
+ | margin-bottom : 20px; | ||
+ | margin-left : 20%; | ||
+ | margin-rigth : 20%; | ||
+ | } | ||
+ | |||
+ | .divseparator { | ||
+ | width : 20%; | ||
+ | height : 0px; | ||
+ | border : solid 0.5px rgb(64,64,64); | ||
+ | margin : 25px auto; | ||
+ | position : relative; | ||
+ | display : block; | ||
+ | } | ||
+ | .horiline { | ||
+ | height: 3px; | ||
+ | width: 300px; | ||
+ | margin: -0.5em 0; | ||
+ | color: rgb(64,64,64) ; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto | ||
+ | } | ||
+ | /*Nav bar CSS*/ | ||
+ | /* | ||
+ | #menu { | ||
+ | position : fixed; | ||
+ | width : 100%; | ||
+ | background : rgb(94,94,94); | ||
+ | height : 65px; | ||
+ | z-index : 100; | ||
+ | } | ||
+ | |||
+ | #home { | ||
+ | width : 60px; | ||
+ | top : 0; | ||
+ | margin-left : 10px; | ||
+ | } | ||
+ | #mainpage { | ||
+ | float : left; | ||
+ | |||
+ | } | ||
+ | |||
+ | #menu ul li { | ||
+ | display: inline-block; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | |||
+ | #menu ul li a { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .menulist { | ||
+ | overflow: hidden; | ||
+ | margin : auto; | ||
+ | background : rgb(94,94,94); | ||
+ | margin-left : 100px !important; | ||
+ | padding : 0px; | ||
+ | margin-top : 0px; | ||
+ | height : 60px; | ||
+ | font-size : 16px; | ||
+ | } | ||
+ | |||
+ | .menulist .list a { | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | text-decoration : none; | ||
+ | color: white; | ||
+ | padding-left : 5px; | ||
+ | padding-right : 5px; | ||
+ | padding-top : 15px; | ||
+ | padding-bottom : 15px; | ||
+ | } | ||
+ | .menulist .list a:hover { | ||
+ | background-color: rgb(124, 124, 124); /*here to change the color when you pass the mouse over, look down a bit*/ | ||
+ | } | ||
+ | .menulist .list .dropdownlist { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | text-align : left; | ||
+ | margin-top : 0px; | ||
+ | padding-left : 5px; | ||
+ | padding-right : 5px; | ||
+ | background : rgb(255, 255, 255); | ||
+ | list-style-position : inside; | ||
+ | margin-left : 0px; | ||
+ | z-index : 99; | ||
+ | } | ||
+ | |||
+ | .dropdownlist li .droprightlist { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background : rgb(255, 255, 255); | ||
+ | padding-left : 5px; | ||
+ | padding-right : 5px; | ||
+ | margin-top : 0px; | ||
+ | text-align : left; | ||
+ | z-index : 100; | ||
+ | margin-left : 0px; | ||
+ | } | ||
+ | |||
+ | .menulist .list:hover .dropdownlist { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .menulist .list .dropdownlist li { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | text-align : center; | ||
+ | background : rgb(255, 255, 255); | ||
+ | z-index: 90; | ||
+ | padding : auto; | ||
+ | } | ||
+ | .menulist .list .dropdownlist li a:hover { | ||
+ | background-color: rgb(124, 124, 124); /*And here also*/ | ||
+ | } | ||
+ | .dropdownlist li .droprightlist li a { | ||
+ | color: white; | ||
+ | } | ||
+ | #menu u.dropdownlist li .droprightlist li { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | text-align : center; | ||
+ | background : rgb(255, 255, 255); | ||
+ | padding : auto; | ||
+ | } | ||
+ | |||
+ | .menulist .list .dropdownlist li a { | ||
+ | display: table-cell; | ||
+ | text-align: left; | ||
+ | text-align : center; | ||
+ | color: white; | ||
+ | text-decoration : none; | ||
+ | z-index : 99; | ||
+ | vertical-align : middle; | ||
+ | } | ||
+ | .dropdownlist li .droprightlist li a { | ||
+ | display: table-cell; | ||
+ | text-align: left; | ||
+ | text-align : center; | ||
+ | text-decoration : none; | ||
+ | color: white; | ||
+ | |||
+ | } | ||
+ | .list ul li { | ||
+ | display : table-cell; | ||
+ | |||
+ | } | ||
+ | .dropdownlist li .droprightlist { | ||
+ | top: 0; | ||
+ | left: 100%; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .dropdownlist li:hover .droprightlist { | ||
+ | display: block; | ||
+ | } | ||
+ | #exception { | ||
+ | line-height : normal; | ||
+ | |||
+ | } | ||
+ | #fbnoticon{ | ||
+ | margin-left : 90px; | ||
+ | } | ||
+ | #instanoticon { | ||
+ | margin-left : 135px; | ||
+ | margin-top : -19px; | ||
+ | } | ||
+ | #twnoticon{ | ||
+ | margin-left : 45px; | ||
+ | } | ||
+ | #igemlogo{ | ||
+ | } | ||
+ | .sidelogos { | ||
+ | } | ||
+ | #logolist { | ||
+ | float : right; | ||
+ | display : inline-block; | ||
+ | height : 60px; | ||
+ | width : 175px; | ||
+ | margin-top : -50px; | ||
+ | margin-right : 50px; | ||
+ | } | ||
+ | #twnoticon img, #fbnoticon img, #igemlogo img, #instanoticon img{ | ||
+ | width : 40px; | ||
+ | position : absolute; | ||
+ | display : inline-block; | ||
+ | } | ||
+ | |||
+ | |||
+ | #twitapp, #fbapp { | ||
+ | display:none; | ||
+ | width:250px; | ||
+ | height:auto; | ||
+ | background: white; | ||
+ | } | ||
+ | #fbapp{ | ||
+ | } | ||
+ | #twitapp{ | ||
+ | } | ||
+ | */ | ||
+ | .image-span{ | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .top50 { | ||
+ | margin-top: 50px; | ||
+ | } | ||
+ | body | ||
+ | { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-family: sans-serif; | ||
+ | |||
+ | |||
+ | } | ||
nav | nav | ||
{ | { | ||
Line 136: | Line 638: | ||
animation: zoomIn .3s ease-in; | animation: zoomIn .3s ease-in; | ||
} | } | ||
+ | |||
+ | .top-menu{ | ||
+ | background-color: rgb(255, 255, 255); color:white; | ||
+ | |||
+ | z-index: 2000; | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | padding-right: 30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .top5{ | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | #logoigem img{ | ||
+ | width:38px; | ||
+ | height:38px; | ||
+ | } | ||
+ | |||
+ | #home{ | ||
+ | margin-top: 2px; | ||
+ | margin-right: 10px; | ||
+ | |||
+ | |||
+ | width : 60px; | ||
+ | top : 0; | ||
+ | margin-left : 10px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #logolist2 div { | ||
+ | margin-right: 20px; | ||
+ | width: 38px; | ||
+ | } | ||
+ | |||
+ | #logolist2{ | ||
+ | float: right; | ||
+ | display: flex; | ||
+ | |||
+ | width: 175px; | ||
+ | margin-top: -54px; | ||
+ | margin-right: 50px; | ||
+ | |||
+ | } | ||
+ | #logolist2 a{ | ||
+ | |||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #logolist2 a i { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | |||
+ | #mainpage { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
</style> | </style> |
Revision as of 21:37, 3 October 2018