Difference between revisions of "Template:Technion/CSS"
| Line 454: | Line 454: | ||
.sub2 a { | .sub2 a { | ||
background: #00a600; | background: #00a600; | ||
| − | background:rgb( | + | background:rgb(243, 225, 97); |
padding-left: 0px; | padding-left: 0px; | ||
padding-right: 0px; | padding-right: 0px; | ||
| Line 475: | Line 475: | ||
.btn-bg2 { | .btn-bg2 { | ||
background: #00a600; | background: #00a600; | ||
| − | background:rgb( | + | background:rgb(243, 225, 97); |
height: 50px; | height: 50px; | ||
width: 14px; | width: 14px; | ||
| Line 482: | Line 482: | ||
.sub2 a:hover { | .sub2 a:hover { | ||
background: #ffb733; | background: #ffb733; | ||
| − | background:rgb(247, | + | background:rgb(247, 213, 11); |
} | } | ||
/*************************two*****************************/ | /*************************two*****************************/ | ||
Revision as of 18:23, 1 September 2015
.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-color: rgb(255,235,200);
background-image: url("
");
/*background-size: 400px 667px;*/
background-size: 70%;
/*background-repeat: repeat;
background-position: center;
background-attachment: fixed;*/
}
.content { width: 800px; margin: auto; background:#7f7f7f; background:rgba(255,255,255,0.9); }
.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.8); 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: 124px; display: inline-block; background: #33f; background:rgba(0,0,0,0.8); 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,1); } /*************************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:rgb(255, 184, 106); padding-left: 0px; padding-right: 0px; } .main1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.main1 a { width: 124px; }
.main1:hover .sub1 { max-width: 999px; max-height: 50px; } .btn-bg1 { background: #ffb733; background:rgb(255, 184, 106); height: 50px; width: 14px; }
.sub1 a:hover { background: #ffb733; background:rgb(255, 144, 66); } /*************************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:rgb(243, 225, 97); padding-left: 0px; padding-right: 0px; } .main2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.main2 a { width: 124px; }
.main2:hover .sub2 { max-width: 999px; max-height: 50px; } .btn-bg2 { background: #00a600; background:rgb(243, 225, 97); height: 50px; width: 14px; }
.sub2 a:hover { background: #ffb733; background:rgb(247, 213, 11); } /*************************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:rgb(202, 174, 244); padding-left: 0px; padding-right: 0px; } .main3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.main3 a { width: 124px; }
.main3:hover .sub3 { max-width: 999px; max-height: 50px; } .btn-bg3 { background: #ff1a1a; background:rgb(202, 174, 244); height: 50px; width: 14px; }
.sub3 a:hover { background: #ffb733; background:rgb(162, 110, 241); } /*************************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:rgb(192, 163, 127); padding-left: 0px; padding-right: 0px; } .main4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.main4 a { width: 124px; max-height: 50px; overflow: hidden; }
.main4:hover .sub4 { max-width: 999px; max-height: 50px; } .btn-bg4 { background: #a600a6; background:rgb(192, 163, 127); height: 50px; width: 14px; }
.sub4 a:hover { background: #ffb733; background:rgb(162, 124, 78); } /*************************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:rgb(173, 201, 219); padding-left: 0px; padding-right: 0px; } .main5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.main5 a { width: 124px; }
.main5:hover .sub5 { max-width: 999px; max-height: 50px; } .btn-bg5 { background: #0000FF; background:rgb(173, 201, 219); height: 50px; width: 14px; }
.sub5 a:hover { background: #0000FF; background:rgb(111, 172, 212); } /*************************five*****************************/
/************************************************************************************/ /***********************************dropdown menu-end********************************/ /************************************************************************************/