Difference between revisions of "Template:Tel-Hai/css"

 
(46 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
 +
.icons-sprite, .icons-facebook, #bodyContent .footer .social ul li.social-facebook a, .icons-home-icon, .header .navbar ul li a.icon-home:before, .icons-human-practice-icon, .header .navbar ul li a.icon-human-practice:before, .icons-instagram, #bodyContent .footer .social ul li.social-instagram a, .icons-judging-icon, .header .navbar ul li a.icon-judging:before, .icons-parts-icon, .header .navbar ul li a.icon-parts:before, .icons-project-icon, .header .navbar ul li a.icon-project:before, .icons-team-icon, .header .navbar ul li a.icon-team:before, .icons-twitter, #bodyContent .footer .social ul li.social-twitter a {
 +
  background-image: url('../../images/icons-sbcce5e8c85.png');
 +
  background-repeat: no-repeat;
 +
}
 +
 +
.icons-facebook, #bodyContent .footer .social ul li.social-facebook a {
 +
  background-position: 0 -50px;
 +
  height: 50px;
 +
  width: 50px;
 +
}
 +
.icons-facebook:hover, #bodyContent .footer .social ul li.social-facebook a:hover, .icons-facebook.facebook-hover, #bodyContent .footer .social ul li.social-facebook a.facebook-hover {
 +
  background-position: 0 0;
 +
}
 +
 +
.icons-home-icon, .header .navbar ul li a.icon-home:before {
 +
  background-position: 0 -131px;
 +
  height: 31px;
 +
  width: 29px;
 +
}
 +
.icons-home-icon:hover, .header .navbar ul li a.icon-home:hover:before, .icons-home-icon.home-icon-hover, .header .navbar ul li a.home-icon-hover.icon-home:before {
 +
  background-position: 0 -100px;
 +
}
 +
 +
.icons-human-practice-icon, .header .navbar ul li a.icon-human-practice:before {
 +
  background-position: 0 -193px;
 +
  height: 31px;
 +
  width: 29px;
 +
}
 +
.icons-human-practice-icon:hover, .header .navbar ul li a.icon-human-practice:hover:before, .icons-human-practice-icon.human-practice-icon-hover, .header .navbar ul li a.human-practice-icon-hover.icon-human-practice:before {
 +
  background-position: 0 -162px;
 +
}
 +
 +
.icons-instagram, #bodyContent .footer .social ul li.social-instagram a {
 +
  background-position: 0 -274px;
 +
  height: 50px;
 +
  width: 50px;
 +
}
 +
.icons-instagram:hover, #bodyContent .footer .social ul li.social-instagram a:hover, .icons-instagram.instagram-hover, #bodyContent .footer .social ul li.social-instagram a.instagram-hover {
 +
  background-position: 0 -224px;
 +
}
 +
 +
.icons-judging-icon, .header .navbar ul li a.icon-judging:before {
 +
  background-position: 0 -355px;
 +
  height: 31px;
 +
  width: 29px;
 +
}
 +
.icons-judging-icon:hover, .header .navbar ul li a.icon-judging:hover:before, .icons-judging-icon.judging-icon-hover, .header .navbar ul li a.judging-icon-hover.icon-judging:before {
 +
  background-position: 0 -324px;
 +
}
 +
 +
.icons-parts-icon, .header .navbar ul li a.icon-parts:before {
 +
  background-position: 0 -417px;
 +
  height: 31px;
 +
  width: 29px;
 +
}
 +
.icons-parts-icon:hover, .header .navbar ul li a.icon-parts:hover:before, .icons-parts-icon.parts-icon-hover, .header .navbar ul li a.parts-icon-hover.icon-parts:before {
 +
  background-position: 0 -386px;
 +
}
 +
 +
.icons-project-icon, .header .navbar ul li a.icon-project:before {
 +
  background-position: 0 -479px;
 +
  height: 31px;
 +
  width: 29px;
 +
}
 +
.icons-project-icon:hover, .header .navbar ul li a.icon-project:hover:before, .icons-project-icon.project-icon-hover, .header .navbar ul li a.project-icon-hover.icon-project:before {
 +
  background-position: 0 -448px;
 +
}
 +
 +
.icons-team-icon, .header .navbar ul li a.icon-team:before {
 +
  background-position: 0 -541px;
 +
  height: 31px;
 +
  width: 29px;
 +
}
 +
.icons-team-icon:hover, .header .navbar ul li a.icon-team:hover:before, .icons-team-icon.team-icon-hover, .header .navbar ul li a.team-icon-hover.icon-team:before {
 +
  background-position: 0 -510px;
 +
}
 +
 +
.icons-twitter, #bodyContent .footer .social ul li.social-twitter a {
 +
  background-position: 0 -622px;
 +
  height: 50px;
 +
  width: 50px;
 +
}
 +
.icons-twitter:hover, #bodyContent .footer .social ul li.social-twitter a:hover, .icons-twitter.twitter-hover, #bodyContent .footer .social ul li.social-twitter a.twitter-hover {
 +
  background-position: 0 -572px;
 +
}
 +
 
#content {
 
#content {
 
   width: 100%;
 
   width: 100%;
Line 18: Line 104:
 
#globalWrapper {
 
#globalWrapper {
 
   padding-bottom: 0;
 
   padding-bottom: 0;
 +
}
 +
 +
img {
 +
  max-width: 100%;
 +
  height: auto;
 
}
 
}
  
Line 71: Line 162:
 
   font-size: 15px;
 
   font-size: 15px;
 
}
 
}
−
.header .navbar ul li a.icon-home:before {
+
.header .navbar ul li a.menu-icon:before {
 
   content: ' ';
 
   content: ' ';
 
   margin: 0 auto 8px;
 
   margin: 0 auto 8px;
−
  width: 30px;
 
−
  height: 28px;
 
 
   display: block;
 
   display: block;
−
  background: url("../../images/menu-icons-home.png");
 
 
}
 
}
 
.header .navbar ul li a:hover, .header .navbar ul li a:focus {
 
.header .navbar ul li a:hover, .header .navbar ul li a:focus {
Line 144: Line 232:
 
.home-content .section1 {
 
.home-content .section1 {
 
   text-align: center;
 
   text-align: center;
−
   margin-bottom: 30px;
+
   margin-bottom: 50px;
 
}
 
}
 
.home-content .section1 h2 {
 
.home-content .section1 h2 {
Line 176: Line 264:
 
}
 
}
 
.home-content .section2 {
 
.home-content .section2 {
−
  margin-bottom: 30px;
 
 
   color: #444444;
 
   color: #444444;
 
}
 
}
 
.home-content .section2 p {
 
.home-content .section2 p {
 
   font-size: 18px !important;
 
   font-size: 18px !important;
 +
  line-height: 1.3 !important;
 +
}
 +
.home-content .section2 .hp-text {
 +
  margin-bottom: 50px;
 +
}
 +
.home-content .section2 .hp-img {
 +
  margin-bottom: 50px;
 
}
 
}
 
.home-content .video-section {
 
.home-content .video-section {
Line 203: Line 297:
 
}
 
}
  
−
.footer {
+
.page-title {
 +
  padding: 50px 0;
 +
  background-color: #F5F5F5;
 +
  border-bottom: 1px solid #EEE;
 +
  margin-bottom: 50px;
 +
}
 +
.page-title h1 {
 +
  padding: 0;
 +
  margin: 0 !important;
 +
  line-height: 1;
 +
  font-weight: 600;
 +
  color: #333;
 +
  font-size: 28px;
 +
  text-transform: uppercase;
 +
  text-align: center;
 +
}
 +
 
 +
.page-content {
 +
  min-height: 550px;
 +
}
 +
.page-content .title {
 +
  text-align: center;
 +
}
 +
.page-content .title h2 {
 +
  text-align: center;
 +
  color: #000;
 +
  font-size: 44px;
 +
  font-weight: normal;
 +
  border-bottom: solid 5px #d81f25;
 +
  display: inline-block;
 +
  margin: 0 0 20px !important;
 +
  line-height: 1;
 +
}
 +
.page-content h3 {
 +
  text-align: center;
 +
  color: #d81f25;
 +
  font-size: 25px;
 +
  font-weight: normal;
 +
  margin: 0 auto 30px !important;
 +
  line-height: 1.2;
 +
}
 +
.page-content h3:first-letter {
 +
  font-size: 44px;
 +
  margin-right: -2px;
 +
}
 +
.page-content h4 {
 +
  font-size: 18px;
 +
}
 +
.page-content p, .page-content ol, .page-content li, .page-content small {
 +
  text-align: left !important;
 +
  color: #444;
 +
  font-size: 18px !important;
 +
  line-height: 1.3 !important;
 +
}
 +
.page-content p.font-red, .page-content ol.font-red, .page-content li.font-red, .page-content small.font-red {
 +
  color: #d81f25;
 +
}
 +
.page-content p.capital-first:first-letter, .page-content ol.capital-first:first-letter, .page-content li.capital-first:first-letter, .page-content small.capital-first:first-letter {
 +
  font-size: 150% !important;
 +
}
 +
.page-content p.text-center, .page-content ol.text-center, .page-content li.text-center, .page-content small.text-center {
 +
  text-align: center !important;
 +
}
 +
.page-content p.mb50, .page-content ol.mb50, .page-content li.mb50, .page-content small.mb50 {
 +
  margin-bottom: 50px;
 +
}
 +
.page-content p.c-red, .page-content ol.c-red, .page-content li.c-red, .page-content small.c-red {
 +
  color: #ff0000;
 +
}
 +
.page-content p.c-green, .page-content ol.c-green, .page-content li.c-green, .page-content small.c-green {
 +
  color: #76923c;
 +
}
 +
.page-content p.c-blue, .page-content ol.c-blue, .page-content li.c-blue, .page-content small.c-blue {
 +
  color: #548dd4;
 +
}
 +
.page-content p.c-orange, .page-content ol.c-orange, .page-content li.c-orange, .page-content small.c-orange {
 +
  color: #f79646;
 +
}
 +
.page-content p.c-purple, .page-content ol.c-purple, .page-content li.c-purple, .page-content small.c-purple {
 +
  color: #8064a2;
 +
}
 +
.page-content p small, .page-content ol small, .page-content li small, .page-content small small {
 +
  display: block;
 +
  font-size: 14px !important;
 +
}
 +
.page-content .spacer50 {
 +
  padding-bottom: 50px;
 +
}
 +
.page-content.page-notebook-content h4 {
 +
  margin-top: 30px;
 +
  margin-bottom: 20px;
 +
}
 +
 
 +
.team-list {
 +
  padding-top: 50px;
 +
}
 +
.team-list .col-lg-6 {
 +
  margin-bottom: 50px;
 +
}
 +
.team-list .team-image {
 +
  width: 250px;
 +
  float: left;
 +
  margin-right: 30px;
 +
}
 +
.team-list .team-image img {
 +
  max-width: 100%;
 +
  height: auto;
 +
}
 +
@media (max-width: 480px) {
 +
  .team-list .team-image {
 +
    float: none;
 +
    margin-right: 0;
 +
    margin-bottom: 10px;
 +
    width: 100%;
 +
  }
 +
}
 +
.team-list .team-desc h3 {
 +
  display: block;
 +
  font-size: 19px !important;
 +
  text-transform: uppercase;
 +
  font-weight: 700;
 +
  color: #444;
 +
  letter-spacing: 1px;
 +
  margin: 0 !important;
 +
  text-align: left !important;
 +
}
 +
.team-list .team-desc h3:first-letter {
 +
  font-size: 100%;
 +
  margin: 0;
 +
}
 +
.team-list .team-desc p {
 +
  font-size: 14px !important;
 +
  color: #777;
 +
  line-height: 1.8 !important;
 +
  text-align: left !important;
 +
}
 +
 
 +
#bodyContent .footer {
 
   background-color: #333;
 
   background-color: #333;
 
   padding: 30px;
 
   padding: 30px;
 +
  margin-top: 50px;
 
}
 
}
−
.footer:after {
+
#bodyContent .footer:after {
 
   content: ' ';
 
   content: ' ';
 
   clear: both;
 
   clear: both;
 
   display: block;
 
   display: block;
 
}
 
}
−
.footer .copyright {
+
#bodyContent .footer .copyright {
 
   float: left;
 
   float: left;
 
   color: #ccc;
 
   color: #ccc;
 +
  padding-top: 15px;
 
}
 
}
−
.footer .social {
+
#bodyContent .footer .social {
 
   float: right;
 
   float: right;
 
}
 
}
−
.footer .social ul {
+
#bodyContent .footer .social ul {
 
   list-style: none;
 
   list-style: none;
 
   padding: 0;
 
   padding: 0;
Line 225: Line 458:
 
   float: right;
 
   float: right;
 
}
 
}
−
.footer .social ul li {
+
#bodyContent .footer .social ul li {
 
   float: left;
 
   float: left;
 
   margin: 0 0 0 10px;
 
   margin: 0 0 0 10px;
 
}
 
}
−
.footer .social ul li a {
+
#bodyContent .footer .social ul li a {
 
   color: #fff;
 
   color: #fff;
 +
  overflow: hidden;
 +
  text-indent: -9999px;
 +
  display: block;
 +
}
 +
 +
#parts-table {
 +
  width: 100%;
 +
  margin-left: 0 !important;
 +
  margin-right: 0 !important;
 +
}
 +
 +
.icons-sprite, .icons-facebook, #bodyContent .footer .social ul li.social-facebook a, .icons-home-icon, .header .navbar ul li a.icon-home:before, .icons-human-practice-icon, .header .navbar ul li a.icon-human-practice:before, .icons-instagram, #bodyContent .footer .social ul li.social-instagram a, .icons-judging-icon, .header .navbar ul li a.icon-judging:before, .icons-parts-icon, .header .navbar ul li a.icon-parts:before, .icons-project-icon, .header .navbar ul li a.icon-project:before, .icons-team-icon, .header .navbar ul li a.icon-team:before, .icons-twitter, #bodyContent .footer .social ul li.social-twitter a, .icons-facebook, #bodyContent .footer .social ul li.social-facebook a, #bodyContent .footer .social ul li.social-facebook a, .icons-home-icon, .header .navbar ul li a.icon-home:before, .header .navbar ul li a.icon-home:before, .icons-human-practice-icon, .header .navbar ul li a.icon-human-practice:before, .header .navbar ul li a.icon-human-practice:before, .icons-instagram, #bodyContent .footer .social ul li.social-instagram a, #bodyContent .footer .social ul li.social-instagram a, .icons-judging-icon, .header .navbar ul li a.icon-judging:before, .header .navbar ul li a.icon-judging:before, .icons-parts-icon, .header .navbar ul li a.icon-parts:before, .header .navbar ul li a.icon-parts:before, .icons-project-icon, .header .navbar ul li a.icon-project:before, .header .navbar ul li a.icon-project:before, .icons-team-icon, .header .navbar ul li a.icon-team:before, .header .navbar ul li a.icon-team:before, .icons-twitter, #bodyContent .footer .social ul li.social-twitter a, #bodyContent .footer .social ul li.social-twitter a {
 +
  background-image: url("https://static.igem.org/mediawiki/2017/8/86/T--Tel-Hai--icons.png");
 +
  background-repeat: no-repeat;
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 15:33, 31 October 2017