Difference between revisions of "Template:Technion/CSS"

 
(19 intermediate revisions by the same user not shown)
Line 65: Line 65:
 
 
 
.content {
 
.content {
−
width: 800px;
+
width: 914px;
 
margin: auto;
 
margin: auto;
 
background:#7f7f7f;
 
background:#7f7f7f;
Line 115: Line 115:
 
}
 
}
 
/*************************footer-end*************/
 
/*************************footer-end*************/
−
+
 
−
+
/***************up-button************************/
−
+
.up_button {
−
+
position: fixed;
−
+
bottom: -20px;
−
/************************************************************************************/
+
right: 10px;
−
/***********************************Buttons******************************************/
+
/*display: none;*/
−
/************************************************************************************/
+
z-index: 2000;
−
+
overflow: none;
−
/*************************one****************/
+
                                text-decoration: none;
−
.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 {
+
.up_button img {
−
border-bottom-width: 2px;
+
width: 150px;
−
margin-top: 0px;
+
height: auto;
 +
opacity: 0.8;
 
}
 
}
−
.button_main1:active,
+
 
−
.button_main1:focus {
+
.up_button:hover img {
−
border-bottom-width: 1px;
+
opacity: 1;
−
margin-top: 2px;
+
−
-webkit-animation: shakeBtn 20ms infinite;
+
−
animation: shakeBtn 20ms infinite;
+
 
}
 
}
−
.button_main1 .btn-text {
+
 
−
position: relative;
+
.up_button_text {
−
z-index: 1;
+
text-align: center; color: rgba(0,0,0,1); font-size: 2em; font-family: MV Boli; margin-bottom: 5px;
−
}
+
}
−
.button_main1 .btn-bg {
+
 
−
position: absolute;
+
/***************up-button-end********************/
−
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********************************/
+
−
/************************************************************************************/
+

Latest revision as of 03:37, 19 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*************/

/***************up-button************************/ .up_button { position: fixed; bottom: -20px; right: 10px; /*display: none;*/ z-index: 2000; overflow: none; 

                               text-decoration: none;

} .up_button img { width: 150px; height: auto; opacity: 0.8; }

.up_button:hover img { opacity: 1; }

.up_button_text { text-align: center; color: rgba(0,0,0,1); font-size: 2em; font-family: MV Boli; margin-bottom: 5px; }

/***************up-button-end********************/