Line 540: | Line 540: | ||
#mobileSideBar li:hover{ | #mobileSideBar li:hover{ | ||
cursor: pointer; | cursor: pointer; | ||
− | |||
border: 1px solid green; | border: 1px solid green; | ||
+ | border-right: 5px solid green; | ||
} | } | ||
Revision as of 17:25, 24 July 2016
/*clear wiki syling*/
- contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;}
- globalWrapper, #content { /*-- changes default wiki settings --*/
width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px;
}
/* Remove wiki style DTU Denmark */
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
- top-section {
border: none; height: 0px;}
- content {
border: none;}
- iGEM2016
{ position: fixed; height:50px; top: 22px !important; margin-left: -20px !important; background-color: transparent; vertical-align: sub; }
- sideMenu{display: none;}
div.logo_2016 {display: none;}
- top_menu_inside{ margin: 0 auto;}
- top_title{ margin: 0;}
- HQ_page p{ margin: 0;}
html,body{
margin: 0; padding: 0; width:100%; height:100%;
}
body{
background-size: cover; background-image: url(); background-repeat: no-repeatY; background-position: center; background-attachment: fixed; transition: background-position 0.1s;
}
/*general styling from here*/
/*menu styling*/ header{
background-color: black; text-align: center; width: 100%; position: fixed; height: 4em; z-index: 999; display: inline-flex;
}
.menu-bar {
margin: auto; padding: 0; height: 100%; line-height: 100%; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; box-shadow: 0px 0px 0px #666666; -webkit-box-shadow: 0px 0px 0px #666666; -moz-box-shadow: 0px 0px 0px #666666; background: #000000; position:relative; z-index:999;
} .menu-bar li {
line-height: 100%; height: 100%; margin: 0px 0px 6px 0px; padding: 0px 6px 0px 6px; float: left; position: relative; list-style: none;
} .menu-bar a {
z-index: 5; line-height: 2.5em; height: 100%; font-weight: bold; font-family: arial; font-style: normal; font-size: large; color: #FFFDFD; text-decoration: none; display: block; padding: 6px 20px 0px 20px; margin: 0; margin-bottom: 6px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; text-shadow: 0px 0px 0px #000000;
} .menu-bar li ul li a {
margin: 0; padding-left: 15px; padding-top: 0; line-height: 40px;
} .menu-bar .active a, .menu-bar li:hover > a {
background: #5E5E5E; color: #FFFFFF; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 0px 0px 0px #FFFFFF;
} .menu-bar ul li:hover a, .menu-bar li:hover li a {
background: none; border: none; color: #666; -box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
} .menu-bar ul a:hover {
background: #403f3f !important; color: #FFFFFF !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0px 0px 0px #FFFFFF;
} .menu-bar li:hover > ul {
display: block;
} .menu-bar ul {
background: #000000; display: none; margin-top: 1.65em; padding: 0; width: 185px; height: 40px; position: absolute; top: 30px; /*left: 0;*/ border: solid 0px #B4B4B4; border-bottom-left-radius:20px; border-bottom-right-radius:20px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -webkit-box-shadow: 0px 0px 0px #222222; -moz-box-shadow: 0px 0px 0px #222222; box-shadow: 0px 0px 0px #222222;
} .menu-bar ul li {
float: none; margin: 0; padding: 0;
} .menu-bar ul a {
padding-left: 15px; margin-top: 1em; color:#FFFFFF !important; font-size:12px; font-style:normal; font-family:arial; font-weight: normal; text-shadow: 0px 0px 0px #FFFFFF;
} .menu-bar ul li:first-child > a {
border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topright: 0px;
} .menu-bar ul li:last-child > a {
border-bottom-left-radius: 20px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-right-radius: 20px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomright: 0px;
} .menu-bar:after {
content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;
} .menu-bar {
display: inline-block;
}
html[xmlns] .menu-bar { display: block;
}
- html .menu-bar {
height: 1%;
}
.menu-bar ul li a{ background-color: #1b1818!important;}
.drop_menu{left: -4.3em;}
- hp_drop_menu{left: -1em;}
- menu_right_margin{margin-right: 0em !important; }
- top_menu_inside a{
font-size: 12px !important; line-height: 0 !important;
}
.s_menu{
font-size: 16px !important; line-height: 3em !important;
}
- r_menu{
margin: auto; padding: 0;
}
- l_menu{
margin: auto; padding:0;
}
.menu-bar li.active{ z-index:1;}
/*main logo*/
.hype_it{
width: 250px !important; padding-top:0 !important; z-index: 1000 !important;
}
- hype_it{
position: relative; z-index: -1;; margin: auto; padding-top: 10%; width: 40%; transition: width 0.8s, padding-top 0.8s;
}
- hype_it img :hover{
cursor: pointer; box-shadow: 0px 0px 5px #fff;
}
/*container*/
- HQ_page p{
font-family: 'Josefin Sans', sans-serif; font-size: large;
}
- cont{
position: absolute ; margin: 0; height: 100%; width: 100%;
}
h2{
font-family: 'Josefin Sans', sans-serif; position: absolute; color: white; margin-left: 6% !important; margin-top: 3% !important; font-size: 40px; padding-bottom: 15px;
}
.sec_div{
width:100%; margin: 0; padding: 0; background-color: black; height: 5%;
}
.sec{
width: 100%; height: 90%; margin: 0; padding: 0;
}
- sec_abstract_p, #sec_egProblem_p {
margin-top: 7% !important;
}
- sec_abstract{
position: fixed; margin-top: 4em; background: url(); background-repeat: no-repeat; background-size:cover; background-attachment: fixed; background-position: 85%; transition: background 2s;
}
.radio{
display: block; margin-top: 4px; margin-bottom: 4px;
}
input[type=radio] {
display: none;
}
input[type=radio] {
display:block; width:15px; height:19px; padding: 5px; vertical-align:middle; cursor:pointer;
}
- radioContainer{
margin-left: 10px; top: 40%; position: fixed; border-radius: 10px; padding: 2px;
}
- lside_menu{
position: fixed; display: none;
}
.pl2{
position: fixed !important; margin-top: 4em !important; background: url(https://static.igem.org/mediawiki/2016/f/f2/T--Valencia_UPV--pb2.png)!important; background-repeat: no-repeat !important; background-size:cover !important; background-attachment: fixed !important; background-position: 85% !important; transition: background 1s !important;
}
.pl3{
position: fixed !important; margin-top: 4em !important; background: url() !important; background-repeat: no-repeat !important; background-size:cover !important; background-attachment: fixed !important; background-position: 85% !important; transition: background 1s !important;
}
.pl4{
position: fixed !important; margin-top: 4em !important; background: url() !important; background-repeat: no-repeat !important; background-size:cover !important; background-attachment: fixed !important; background-position: 85% !important; transition: background 1s !important;
}
.pl5{
position: fixed !important; margin-top: 4em !important; background: url() !important; background-repeat: no-repeat !important; background-size:cover !important; background-attachment: fixed !important; background-position: 85% !important; transition: background 1s !important;
}
.pl6{
position: fixed !important; margin-top: 4em !important; background: url(https://static.igem.org/mediawiki/2016/e/ec/T--Valencia_UPV--pb6.png)!important; background-repeat: no-repeat !important; background-size:cover !important; background-attachment: fixed !important; background-position: 85% !important; transition: background 1s !important;
}
- sec_egProblem{
}
- solution_img{
margin-top:10%; position:absolute;
}
- solution_img ul{
display: flex; list-style: outside none none; margin-top: 20px; margin-left: 140px;
}
- solution_img_li{
margin: 10px;
}
- solution_img_logo{
width: 200px; margin-left: 200px;
}
.sImg {
width: 80px; transition: width 0.5s;
}
.sImg :hover{
width: 120px;
}
- solution_img_virus {
margin-right: 10px; margin-top: 10px;
}
- solution_img ul li {
font-size: x-large; text-align: center; font-style: inherit;
}
- sec_solution{
}
- sec_db{
}
- sec_gts{
}
- sec_split{
}
- sec_toolkit{
}
.left_p{
width: 40%; position: absolute; margin-left: 5% !important; margin-top: 30% !important; opacity: 1; padding: 20px; color: white;
} /*footer*/
- foot{
width: 100%; height: 3em; background-color: black; bottom: 0; position: fixed;
}
.foot_img{
margin-top: 5px !important; margin-left: 10px; height: 2.2em;
}
.foot_a{
height: 4em !important;
}
/*general !home pages styling*/
- mainContent {
width: 80%; background-color: white; left: 5%; margin-top: 10%; position: absolute; border-radius: 2%; padding: 50px;
}
/*mobile side menu*/
- mobileSideBar{
position: fixed; left: 0; height: 100%; color: white; background-color: black;
}
- mobileSideBar ul{
list-style: none; margin: 0; text-align: left; padding: 0; padding-top: 8em;
}
- mobileSideBar li{
padding: 10px; padding-right: 20px;
}
- mobileSideBar li:hover{
cursor: pointer; border: 1px solid green; border-right: 5px solid green;
}
- mobileSideBar a{
text-decoration: none; font-family: inherit; color: white;
}
- mobileSideBar a:visited{
color: white;
}
.side_drop{
color: white; padding: 0 !important; background-color: black; display: none;
}
- mobileSideBar li ul li {
margin-top: 10px;
}
- jambarga{
position: fixed; z-index: 99; width: 14%; display: none;
}
/*media queries shit*/
@media screen and (max-width:480px) {
}
@media screen and (max-width:640px) {
}
@media screen and (max-width:770px) {
#l_menu{ display: none; } #r_menu{ display: none; } #jambarga{ display: block; } #hype_it{ width: 250px !important; padding-top:0 !important; z-index: 1000 !important; } h2{ width: 85% !important; text-align: center; font-size:30px; } .left_p{ width: 75%; background-color: whitesmoke; color: black; margin-left: 7% !important; border-radius: 10px; margin-top: 75% !important; font-size:small !important; } #solution_img{ margin-left: 60px; margin-top: 50px; } #solution_img_logo{ margin-left: 25px; } #solution_img ul { margin-left: -40px; } input[type=radio] { display: none; } #sec_abstract_p, #sec_egProblem_p{ margin-top: 23% !important; }
}
}
@media screen and (max-width:1024px) {
}
@media screen and (max-width:1150px){
.menu-bar a{ font-size: 15px !important; line-height: 3em; } #hype_it{ width: 200px; } #hp_drop_menu { left: -2em; }
}
@media screen and (min-width:1280px) {
.left_p{ margin-top: 30% !important; }
}
@media screen and (min-width:1280px), screen and (min-height:1024px) {
.left_p{ margin-top: 40% !important; }
}
@media screen and (min-width: 1366px){
#hype_it{ padding-top: 0%; } .left_p{ margin-top: 22% !important; } #sec_egProblem_p{ margin-top: 6% !important; } #solution_img{ margin-top:8% !important; margin-left: 3% !important; }
}
@media screen and (min-width:1580px) {
#solution_img_logo { width: 300px; } .sImg{ width:100px; } #solution_img ul { margin-top: 10%; margin-left: 145px; } .left_p{ margin-top: 30% !important }
}
@media screen and (min-width:1800px){
#solution_img_logo { width: 400px; margin-left: 220px; } .sImg{ width:150px; transition: width 1s; } .sImg :hover{ width:200px; } #solution_img ul { margin-top: 10%; margin-left: 130px; }
}