Team:Valencia UPV/main

/*clear wiki syling*/

  1. contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;}
  2. globalWrapper, #content { /*-- changes default wiki settings --*/
 width: 100%; 
 height: 100%;
 border: 0px;
 background-color: transparent;
 margin: 0px;
 padding: 0px;

}

/* Remove wiki style DTU Denmark */

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;}
  1. top-section {
   border: none;
   height: 0px;}
  1. content {
   border: none;}
  1. iGEM2016

{ position: fixed; height:50px; top: 22px !important; margin-left: -20px !important; background-color: transparent; vertical-align: sub; }


  1. sideMenu{display: none;}

div.logo_2016 {display: none;}

  1. top_menu_inside{ margin: 0 auto;}
  1. top_title{ margin: 0;}
  1. HQ_page p{ margin: 0;}

html,body{ 

 margin: 0;
 padding: 0;
 width:100%;
 height:100%;

}

body{ 

   background-size: cover;
   background-image: url(T--Valencia_UPV--background-rotate.jpg);
   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;}

  1. hp_drop_menu{left: -1em;}
  1. menu_right_margin{margin-right: 0em !important; }
  1. top_menu_inside a{
   font-size: 12px !important;
   line-height: 0 !important;

}

.s_menu{ 

   font-size: 16px !important;
   line-height: 3em !important;

}

  1. r_menu{
   margin: auto;
   padding: 0;

}

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

}

  1. hype_it{
 position: relative;
 z-index: -1;;
 margin: auto;
 padding-top: 10%;
 width: 40%;
 transition: width 0.8s, padding-top 0.8s;

}

  1. hype_it img :hover{
 cursor: pointer;
 box-shadow: 0px 0px 5px #fff;

}

/*container*/

  1. HQ_page p{
 font-family: 'Josefin Sans', sans-serif;
 font-size: large;

}

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

}


  1. sec_abstract_p, #sec_egProblem_p {
   margin-top: 7% !important;

}

  1. sec_abstract{
   position: fixed;
   margin-top: 4em;
   background: url(T--Valencia_UPV--pb0.png);
   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;

}

  1. radioContainer{
   margin-left: 10px;
   top: 40%;
   position: fixed;
   border-radius: 10px;
   padding: 2px;

}

  1. 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(T--Valencia_UPV--pb3.png) !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(T--Valencia_UPV--pb4.png) !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(T--Valencia_UPV--pb5.png) !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;

}

  1. sec_egProblem{

}

  1. solution_img{
  margin-top:10%;
  position:absolute;

}

  1. solution_img ul{
  display: flex;
  list-style: outside none none;
  margin-top: 20px;
  margin-left: 140px;

}

  1. solution_img_li{
  margin: 10px;

}

  1. solution_img_logo{
  width: 200px;
  margin-left: 200px;

}

.sImg { 

  width: 80px;
  transition: width 0.5s;

}

.sImg :hover{ 

  width: 120px;

}

  1. solution_img_virus {
   margin-right: 10px;
   margin-top: 10px;

}

  1. solution_img ul li {
   font-size: x-large;
   text-align: center;
   font-style: inherit;

}

  1. solution_img ul li p {
   margin: 0;
   position: absolute;
   width: 5em;
   margin-left: 0em;
   margin-top: 1em;
   font-size: 30px;
   color: white;

}

  1. sec_solution{

}


  1. sec_db{

}

  1. sec_gts{

}

  1. sec_split{

}

  1. sec_toolkit{

}


.left_p{ 

   width: 40%;
   position: absolute;
   margin-left: 5% !important;
   margin-top: 30% !important;
   opacity: 1;
   padding: 20px;
   color: white;

} /*footer*/

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

  1. mainContent {
   width: 80%;
   background-color: white;
   left: 5%;
   margin-top: 10%;
   position: absolute;
   border-radius: 2%;
   padding: 50px;

}

/*mobile side menu*/

  1. mobileSideBar{
   position: fixed;
   left: 0;
   height: 100%;
   color: white;
   background-color: black;

}

  1. mobileSideBar ul{
   font-family: 'Josefin Sans', sans-serif;
   list-style: none;
   margin: 0;
   text-align: left;
   padding: 0;
   padding-top: 8em;

}

  1. mobileSideBar li{
   padding: 10px;
   padding-right: 20px;

}

  1. mobileSideBar li:hover{
   cursor: pointer;
   border: 1px solid green;
   border-right: 5px solid green;

}

  1. mobileSideBar a{
   text-decoration: none;
   font-family: inherit;
   color: white;

}

  1. mobileSideBar a:visited{
   color: white;

}

.side_drop{ 

   color: white;
   padding: 0 !important;
   background-color: black;
   display: none;

}

  1. mobileSideBar li ul li {
   margin-top: 10px;

}

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

  #mainContent{
   width: 80% !important;
   margin-left: 0;
   font-size: small !important;
   padding: 23px;
   margin-top: 30%;
  }   

  #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: 400px;
 }
 
 #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;
   }

}