Difference between revisions of "Template:Technion/CSS"

Line 115: Line 115:
 
}
 
}
 
/*************************footer-end*************/
 
/*************************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: MV Boli;
 
−
}
 
−
 
−
.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********************************/
 
−
/************************************************************************************/
 

Revision as of 09:03, 11 September 2015

.abstract { font-size: 130%; }

  1. top_menu_14 {

width: 100%; }

  1. top_menu_inside {

width: 100%; }

  1. top_menu_under {

width: 100%; }

  1. globalWrapper {

width: 100%; float: none; }

  1. 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("Technion_2015_Background.png"); /*background-size: 400px 667px;*/ background-size: 70%; /*background-repeat: repeat; background-position: center; background-attachment: fixed;*/ }

.content { width: 914px; margin: auto; background:#7f7f7f; background:rgba(255,255,255,0.9); box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.5); border-radius: 3px; }

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