Difference between revisions of "Team:technion/CSS"

(Created page with " .abstract { font-size: 130%; } #top_menu_14 { width: 100%; } #top_menu_inside { width: 100%; } #top_menu_under { width: 100%; } #globalWrapper { width: 10...")
 
(Blanked the page)
 
Line 1: Line 1:
.abstract {
 
font-size: 130%;
 
}
 
 
#top_menu_14 {
 
width: 100%;
 
}
 
  
#top_menu_inside {
 
width: 100%;
 
}
 
#top_menu_under {
 
width: 100%;
 
}
 
#globalWrapper {
 
width: 100%;
 
float: none;
 
}
 
#content {
 
width: 100%;
 
}
 
 
h1 {
 
border-bottom: none;
 
}
 
 
.main_menu, footer {
 
width: 650px;
 
margin: auto;
 
clear: both;
 
}
 
 
#igem_login {
 
float: right;
 
color: white;
 
background:#7f7f7f;
 
background:rgba(0,0,0,0.2);
 
}
 
 
#igem_login:hover {
 
color: blue;
 
}
 
 
#team_logo {
 
width: 400px;
 
height: auto;
 
display: block;
 
margin: auto;
 
}
 
 
.facebook_link {
 
margin-top: 5px;
 
}
 
 
body {
 
font-family: sans-serif;
 
background-image: url("https://static.igem.org/mediawiki/2015/1/1b/Team_Technion_Background_Hair.jpg");
 
}
 
 
.content {
 
width: 700px;
 
margin: auto;
 
background:#7f7f7f;
 
background:rgba(255,255,255,0.5);
 
}
 
 
.abstract {
 
position: relative;
 
text-align: left;
 
z-index: 1;
 
margin-left: 10px;
 
}
 
 
.abstract_title {
 
position: relative;
 
text-align: center;
 
z-index: 1;
 
}
 
 
 
 
/*************************footer****************/
 
footer .team_name  {
 
text-align: center;
 
color: white;
 
}
 
 
footer .connect_links {
 
width: 130px;
 
margin: auto;
 
}
 
 
footer {
 
background:#7f7f7f;
 
background:rgba(0,0,0,0.5);
 
width: 100%;
 
}
 
 
footer h3 {
 
margin-top: 0px;
 
margin-bottom: 0px;
 
color: white;
 
}
 
 
.connect_links {
 
display: flex;
 
}
 
/*************************footer-end*************/
 
 
 
 
 
 
/************************************************************************************/
 
/***********************************Buttons******************************************/
 
/************************************************************************************/
 
 
/*************************one****************/
 
.button_main1 {
 
background: #f33;
 
color: #fff;
 
border: 0;
 
padding: 1em 2em;
 
border-radius: 6px;
 
cursor: pointer;
 
border-bottom: 3px solid #e60000;
 
outline: none;
 
position: relative;
 
overflow: hidden;
 
}
 
.button_main1:hover {
 
border-bottom-width: 2px;
 
margin-top: 0px;
 
}
 
.button_main1:active,
 
.button_main1:focus {
 
border-bottom-width: 1px;
 
margin-top: 2px;
 
-webkit-animation: shakeBtn 20ms infinite;
 
animation: shakeBtn 20ms infinite;
 
}
 
.button_main1 .btn-text {
 
position: relative;
 
z-index: 1;
 
}
 
.button_main1 .btn-bg {
 
position: absolute;
 
background: -webkit-linear-gradient(top, #f99, #ff1a1a);
 
background: linear-gradient(to bottom, #f99, #ff1a1a);
 
top: -100%;
 
left: 0;
 
width: 100%;
 
height: 200%;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.button_main1:hover .btn-bg {
 
top: 0;
 
}
 
/*************************one-end*************/
 
/*************************two****************/
 
.button_main2 {
 
background: #f33;
 
color: #fff;
 
border: 0;
 
padding: 1em 2em;
 
border-radius: 6px;
 
cursor: pointer;
 
border-bottom: 3px solid #e60000;
 
outline: none;
 
position: relative;
 
overflow: hidden;
 
}
 
.button_main2:hover {
 
border-bottom-width: 2px;
 
margin-top: 0px;
 
}
 
.button_main2:active,
 
.button_main2:focus {
 
border-bottom-width: 1px;
 
margin-top: 2px;
 
-webkit-animation: shakeBtn 20ms infinite;
 
animation: shakeBtn 20ms infinite;
 
}
 
.button_main2 .btn-text {
 
position: relative;
 
z-index: 1;
 
}
 
.button_main2 .btn-bg {
 
position: absolute;
 
background: -webkit-linear-gradient(top, #f99, #ff1a1a);
 
background: linear-gradient(to bottom, #f99, #ff1a1a);
 
top: -100%;
 
left: 0;
 
width: 100%;
 
height: 200%;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.button_main2:hover .btn-bg {
 
top: 0;
 
}
 
/*************************two-end*************/
 
/*************************three****************/
 
.button_main3 {
 
background: #f33;
 
color: #fff;
 
border: 0;
 
padding: 1em 2em;
 
border-radius: 6px;
 
cursor: pointer;
 
border-bottom: 3px solid #e60000;
 
outline: none;
 
position: relative;
 
overflow: hidden;
 
}
 
.button_main3:hover {
 
border-bottom-width: 2px;
 
margin-top: 0px;
 
}
 
.button_main3:active,
 
.button_main3:focus {
 
border-bottom-width: 1px;
 
margin-top: 2px;
 
-webkit-animation: shakeBtn 20ms infinite;
 
animation: shakeBtn 20ms infinite;
 
}
 
.button_main3 .btn-text {
 
position: relative;
 
z-index: 1;
 
}
 
.button_main3 .btn-bg {
 
position: absolute;
 
background: -webkit-linear-gradient(top, #f99, #ff1a1a);
 
background: linear-gradient(to bottom, #f99, #ff1a1a);
 
top: -100%;
 
left: 0;
 
width: 100%;
 
height: 200%;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.button_main3:hover .btn-bg {
 
top: 0;
 
}
 
/*************************three-end*************/
 
/*************************four****************/
 
.button_main4 {
 
background: #f33;
 
color: #fff;
 
border: 0;
 
padding: 1em 2em;
 
border-radius: 6px;
 
cursor: pointer;
 
border-bottom: 3px solid #e60000;
 
outline: none;
 
position: relative;
 
overflow: hidden;
 
}
 
.button_main4:hover {
 
border-bottom-width: 2px;
 
margin-top: 0px;
 
}
 
.button_main4:active,
 
.button_main4:focus {
 
border-bottom-width: 1px;
 
margin-top: 2px;
 
-webkit-animation: shakeBtn 20ms infinite;
 
animation: shakeBtn 20ms infinite;
 
}
 
.button_main4 .btn-text {
 
position: relative;
 
z-index: 1;
 
}
 
.button_main4 .btn-bg {
 
position: absolute;
 
background: -webkit-linear-gradient(top, #f99, #ff1a1a);
 
background: linear-gradient(to bottom, #f99, #ff1a1a);
 
top: -100%;
 
left: 0;
 
width: 100%;
 
height: 200%;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.button_main4:hover .btn-bg {
 
top: 0;
 
}
 
/*************************four-end*************/
 
/*************************five****************/
 
.button_main5 {
 
background: #f33;
 
color: #fff;
 
border: 0;
 
padding: 1em 2em;
 
border-radius: 6px;
 
cursor: pointer;
 
border-bottom: 3px solid #e60000;
 
outline: none;
 
position: relative;
 
overflow: hidden;
 
}
 
.button_main5:hover {
 
border-bottom-width: 2px;
 
margin-top: 0px;
 
}
 
.button_main5:active,
 
.button_main5:focus {
 
border-bottom-width: 1px;
 
margin-top: 2px;
 
-webkit-animation: shakeBtn 20ms infinite;
 
animation: shakeBtn 20ms infinite;
 
}
 
.button_main5 .btn-text {
 
position: relative;
 
z-index: 1;
 
}
 
.button_main5 .btn-bg {
 
position: absolute;
 
background: -webkit-linear-gradient(top, #f99, #ff1a1a);
 
background: linear-gradient(to bottom, #f99, #ff1a1a);
 
top: -100%;
 
left: 0;
 
width: 100%;
 
height: 200%;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.button_main5:hover .btn-bg {
 
top: 0;
 
}
 
/*************************five-end*************/
 
 
/************************************************************************************/
 
/***********************************Buttons-end**************************************/
 
/************************************************************************************/
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/************************************************************************************/
 
/***********************************dropdown menu************************************/
 
/************************************************************************************/
 
 
.dropdown {
 
position: fixed;
 
top: 10px;
 
display: inline-block;
 
float: left;
 
z-index: 999;
 
}
 
.dropdown nav {
 
max-height: 0px;
 
overflow: hidden;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.dropdown nav a {
 
display: block;
 
}
 
.dropdown:hover nav {
 
max-height: 999px;
 
}
 
.dropdown a {
 
width: 155px;
 
display: inline-block;
 
background: #33f;
 
background:rgba(0,0,0,0.4);
 
color: #fff;
 
text-decoration: none;
 
text-align: center;
 
padding: 1em 2em;
 
font-family: sans-serif;
 
}
 
 
.dropdown a:hover {
 
background: #33f;
 
background:rgba(0,0,0,0.8);
 
}
 
/*************************one*****************************/
 
.sub1 {
 
overflow: hidden;
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
max-width: 0;
 
max-height: 50px;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.sub1 a {
 
background: #ffb733;
 
background:rgba(255,183,51,0.4);
 
}
 
.main1 {
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
}
 
 
.main1 a {
 
width: 140px;
 
}
 
 
.main1:hover .sub1 {
 
max-width: 999px;
 
max-height: 50px;
 
}
 
.btn-bg1 {
 
background: #ffb733;
 
background:rgba(255,183,51,0.4);
 
height: 50px;
 
width: 14px;
 
}
 
 
.sub1 a:hover {
 
background: #ffb733;
 
background:rgba(255,183,51,0.8);
 
}
 
/*************************one*****************************/
 
/*************************two*****************************/
 
.sub2 {
 
overflow: hidden;
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
max-width: 0;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.sub2 a {
 
background: #00a600;
 
background:rgba(0,166,0,0.4);
 
}
 
.main2 {
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
}
 
 
.main2 a {
 
width: 140px;
 
}
 
 
.main2:hover .sub2 {
 
max-width: 999px;
 
max-height: 50px;
 
}
 
.btn-bg2 {
 
background: #00a600;
 
background:rgba(0,166,0,0.4);
 
height: 50px;
 
width: 14px;
 
}
 
 
.sub2 a:hover {
 
background: #ffb733;
 
background:rgba(0,166,0,0.8);
 
}
 
/*************************two*****************************/
 
/*************************three*****************************/
 
.sub3 {
 
overflow: hidden;
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
max-width: 0;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.sub3 a {
 
background: #ff1a1a;
 
background:rgba(255,26,26,0.4);
 
}
 
.main3 {
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
}
 
 
.main3 a {
 
width: 140px;
 
}
 
 
.main3:hover .sub3 {
 
max-width: 999px;
 
max-height: 50px;
 
}
 
.btn-bg3 {
 
background: #ff1a1a;
 
background:rgba(255,26,26,0.4);
 
height: 50px;
 
width: 14px;
 
}
 
 
.sub3 a:hover {
 
background: #ffb733;
 
background:rgba(255,26,26,0.8);
 
}
 
/*************************three*****************************/
 
/*************************four*****************************/
 
.sub4 {
 
overflow: hidden;
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
max-width: 0;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.sub4 a {
 
background: #a600a6;
 
background:rgba(166,0,166,0.4);
 
}
 
.main4 {
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
}
 
 
.main4 a {
 
width: 140px;
 
}
 
 
.main4:hover .sub4 {
 
max-width: 999px;
 
max-height: 50px;
 
}
 
.btn-bg4 {
 
background: #a600a6;
 
background:rgba(166,0,166,0.4);
 
height: 50px;
 
width: 14px;
 
}
 
 
.sub4 a:hover {
 
background: #ffb733;
 
background:rgba(166,0,166,0.8);
 
}
 
/*************************four*****************************/
 
/*************************five*****************************/
 
.sub5 {
 
overflow: hidden;
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
max-width: 0;
 
-webkit-transition: all 600ms ease;
 
transition: all 600ms ease;
 
}
 
.sub5 a {
 
background: #0000FF;
 
background:rgba(0,0,255,0.4);
 
}
 
.main5 {
 
display: -webkit-box;
 
display: -webkit-flex;
 
display: -ms-flexbox;
 
display: flex;
 
}
 
 
.main5 a {
 
width: 140px;
 
}
 
 
.main5:hover .sub5 {
 
max-width: 999px;
 
max-height: 50px;
 
}
 
.btn-bg5 {
 
background: #0000FF;
 
background:rgba(0,0,255,0.4);
 
height: 50px;
 
width: 14px;
 
}
 
 
.sub5 a:hover {
 
background: #0000FF;
 
background:rgba(0,0,255,0.8);
 
}
 
/*************************five*****************************/
 
 
/************************************************************************************/
 
/***********************************dropdown menu-end********************************/
 
/************************************************************************************/
 

Latest revision as of 13:30, 25 July 2015