Team:technion/CSS
.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("
");
}
.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********************************/ /************************************************************************************/