Team:Sheffield/Template:team1style.css

From 2014.igem.org

/* Author: W3layout Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/

/

h4, h5, h6, h1, h2, h3 {margin-top: 0;} ul, ol {margin: 0;} p {margin: 0;} html, body{

  font-family: 'PT Sans Caption', sans-serif;
  font-size: 100%;
  background:#fff;

} body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } /*-----start-header----*/ .header{ background: url(../images/2.jpg)no-repeat center top; background-size: 100% 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; position:relative; } .header_top { margin-top: 2em; } .logo{ float:left; } .menu{ float:right; margin-top:10px; } .menu li{ display:inline-block; }

.menu li:first-child{
  	margin-left:0;

} .menu li a{

 	display: block;

font-size:0.85em; color:#fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; text-transform: uppercase; padding:10px; }

nav .current a {

   color:#F0D4A8;
  -webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menu li a:hover ,.menu li.active a{ color:#F0D4A8; } .toggleMenu { display: none;

  	padding:4px 5px 0px 5px;
   border-radius:2em; 
   -webkit-border-radius:2em;
   -moz-border-radius:2em;
   -o-border-radius:2em;

} .nav:before, .nav:after {

   content: " "; 
   display: table;

} .nav:after {

   clear: both;

} .nav ul {

   list-style: none;

} @media screen and (max-width:800px) { .menu { margin:10px 0; }

   .active {
       display: block;
   }
   .menu li a{
   	text-align:left;
   	border-radius:0;
   	-webkit-border-radius:0;
   	-moz-border-radius:0;
   	-o-border-radius:0;
   }
   .nav {

list-style: none; *zoom: 1; width:95%; position: absolute; right:23px; background:#051619; top:88px; z-index: 9999; border:1px solid #eee;

   }
  .menu li a span.messages{
   	text-align:center;
   	top:15px;
   }
   .nav li ul{
   	width:100%;   	
   }
   .menu ul{
   	margin:0;
   }
   .nav > li.hover > ul {
       width:100%;
   }
   .nav > li {
       float: none;
       display:block;
   }
   .nav ul {
       display: block;
       width: 100%;
   }
  .nav > li.hover > ul , .nav li li.hover ul {
       position: static;
   }
   .nav li a{
   	border-top:1px solid #eee;
   	background:#fff;
   	color:#384254;
   }
    .nav li:first-child a{
    	border-top:none;
    }
}

.banner{ text-align:center; padding:25em 0 5em; } .banner h1{ color: #fff; font-family: 'Candal', sans-serif; font-size:8em; text-transform: uppercase; letter-spacing: 0.1em; } .banner h2{ color: #fff; font-family: 'Candal', sans-serif; font-size:4em; text-transform: uppercase; } /*--content--*/ .top_box{ text-align:center; padding:0em 0 5em; } .top_box h2{ color:#333; font-size:2em; font-weight:bold; text-transform:uppercase; } .top_box p{ color:#999; font-size:1em; line-height:1.8em; margin-top: 1em; } .content_top { padding:7em 0 8em; } .poll { margin-bottom: 2em; } .poll_desc{ color: #777; font-size: 1em; } .skills { width: 100%; margin: 10px 0; border: 1px solid #dcd9ae; height:20px; } .skills > div { height: 100%; display: block; background-color:#dcd9ae; } .contenttop_right h3{ color:#333; text-transform:uppercase; font-size:1.7em; margin-bottom: 1.5em; font-weight:bold; } .button{ text-align:center; margin-top:4em; } .con-button { color: white; background: #9f7a40; -webkit-box-shadow: 3px 3px 0px 0px #c7c7c7; -moz-box-shadow: 3px 3px 0px 0px #c7c7c7; box-shadow: 3px 3px 0px 0px #c7c7c7; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.3em; padding: 18px 35px; font-weight: bold; } .con-button:hover{ text-decoration:none; background:#8e7231; color:#fff; } /*--work--*/ .work{ background: url(https://2014.igem.org/Team:Sheffield/Template:team1style.css?action=raw&ctype=text/css); padding:6em 0; text-align: center; background-size: 100% 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; } /*--services--*/ .services{ background:#fff; padding:6em 0 7em; } i.icon1{ width: 124px; height: 124px; background: url(../images/img-sprite.png) no-repeat -100px -7px; display: inline-block; } .service_box:hover i.icon1{ width: 124px; height: 124px; background: url(../images/img-sprite.png) no-repeat -100px -138px; display: inline-block; } .service_box h3{ font-size:1.2em; margin:1em 0 0.5em; } .service_box h3 a{ color:#333; text-transform:uppercase; font-weight:bold; } .service_box:hover h3 a{ color:#9b7e3c; text-decoration:none; } .service_box p{ color: #555; font-size: 0.85em; line-height: 1.5em; width: 85%; margin: 0 auto; } i.icon2{ width: 124px; height: 124px; background: url(../images/img-sprite.png) no-repeat -230px -7px; display: inline-block; } .service_box:hover i.icon2{ width: 124px; height: 124px; background: url(../images/img-sprite.png) no-repeat -230px -138px; display: inline-block; } i.icon3{ width: 124px; height: 124px; background: url(../images/img-sprite.png) no-repeat -359px -7px; display: inline-block; } .service_box:hover i.icon3{ width: 124px; height: 124px; background: url(../images/img-sprite.png) no-repeat -359px -138px; display: inline-block; } /*--team--**/ .team{ padding:7em 0; background: url(../images/team.jpg)no-repeat center top; background-size: 100% 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; } ul.guy{ padding:0; list-style:none; margin-bottom:3em; } ul.guy li.guy_img{ float:left; width:30%; margin-right:2em; } ul.guy li.guy_img img, ul.guy li.guy_img1 img{ border-radius:200px; -webkit-border-radius:200px; -moz-border-radius:200px; -o-border-radius:200px; -o-box-shadow:4px 4px 0px 0px #aaa897; -webkit-box-shadow:4px 4px 0px 0px #aaa897; -moz-box-shadow:4px 4px 0px 0px #aaa897; box-shadow:4px 4px 0px 0px #aaa897; } ul.guy li.guy_desc{ float:left; width:65%; margin-top: 3em; } ul.guy li.guy_desc h3, ul.guy li.guy_desc1 h3{ margin-bottom:0; } ul.guy li.guy_desc h3 a, ul.guy li.guy_desc1 h3 a{ color:#333; font-size:0.85em; text-transform:uppercase; font-weight: bold; } ul.guy li.guy_desc h3 a:hover, ul.guy li.guy_desc1 h3 a:hover{ color:#9f7a40; text-decoration:none; } ul.guy li.guy_desc p, ul.guy li.guy_desc1 p{ color: #000; font-size: 0.85em; line-height: 1.8em; font-weight: 500; margin-top: 2em; } span.ceo{ color:#000; font-size:14px; } ul.guy li.guy_desc1{ float:left; width:65%; margin-top: 3em; margin-right:2em; } ul.guy li.guy_img1{ float:left; width:30%; } .container_wrapper{ width:50%; margin:0 auto; } /*--portfolio--*/ .portfolio{ padding:6em 0 0; background:#9b7e3c; } .top_box h3{ color:#fff; font-size: 2em; font-weight: bold; text-transform: uppercase; } /* Strip /*-----------------------------------------------------------------------------------*/ .b-link-stripe{ position:relative; display:inline-block; vertical-align:top; font-weight: 300; overflow:hidden; } .b-link-stripe .b-wrapper{ position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; color:#ffffff; overflow:hidden; } .b-link-stripe .b-line{ position:absolute; top:0; bottom:0; width:20%; background:rgba(155, 126, 60, 0.68); transition:all 0.5s linear; -moz-transition:all 0.5s linear; -ms-transition:all 0.5s linear; -o-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; opacity:0; visibility:hidden; /* lt-ie9 */ } /* lt-ie9 */ .b-link-stripe:hover .b-line{ visibility:visible; } .b-link-stripe .b-line1{ left:0; } .b-link-stripe .b-line2{ left:20%; transition-delay:0.1s !important; -moz-transition-delay:0.1s !important; -ms-transition-delay:0.1s !important; -o-transition-delay:0.1s !important; -webkit-transition-delay:0.1s !important; } .b-link-stripe .b-line3{ left:40%; transition-delay:0.2s !important; -moz-transition-delay:0.2s !important; -ms-transition-delay:0.2s !important; -o-transition-delay:0.2s !important; -webkit-transition-delay:0.2s !important; } .b-link-stripe .b-line4{ left:60%; transition-delay:0.3s !important; -moz-transition-delay:0.3s !important; -ms-transition-delay:0.3s !important; -o-transition-delay:0.3s !important; -webkit-transition-delay:0.3s !important; } .b-link-stripe .b-line5{ left:80%; transition-delay:0.4s !important; -moz-transition-delay:0.4s !important; -ms-transition-delay:0.4s !important; -o-transition-delay:0.4s !important; -webkit-transition-delay:0.4s !important; } .b-link-stripe:hover .b-line{ opacity:1; } /*-----------------------------------------------------------------------------------*/ /* Animation effects /*-----------------------------------------------------------------------------------*/ .b-animate-go{ text-decoration:none; } .b-animate{ transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; visibility: hidden; font-size:1.1em; text-transform: uppercase; font-family: 'PT Sans Caption', sans-serif; } .b-animate img{ margin-top:20%; display: -webkit-inline-box; } /* lt-ie9 */ .b-animate-go:hover .b-animate{ visibility:visible; } .b-from-left{ position:relative; left:-100%; } .b-animate-go:hover .b-from-left{ left:0; } ul.portfolio_grids{ padding:0; list-style:none; } ul.portfolio_grids li{ width:33.333%; float:left; } .view {

  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;

} .view .mask,.view .content { width: 528px; height: 352px; overflow: hidden; position: absolute; top: 0; left: 0; cursor: pointer; } .view img {

  display: block;
  position: relative;

} .info {

  display: inline-block;
  text-decoration: none;
  margin-top:8em;
  color: #fff;
  text-transform: uppercase;
}

.info: hover {

  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;

} .view-first img {

  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;

} .view-first .mask {

  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  background-color:rgba(157, 130, 67, 0.68);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  border:10px solid #dcd9ae;

} .view-first h2 {

  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  transform: translateY(-100px);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

} .view-first p {

  -webkit-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -o-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;

} .view-first:hover img {

  -webkit-transform: scale(1.1,1.1);
  -moz-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
  transform: scale(1.1,1.1);

} .view-first a.info {

  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

} .view-first:hover .mask {

  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;

} .view-first:hover h2, .view-first:hover p, .view-first:hover a.info {

  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);

} .view-first:hover p {

  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  transition-delay: 0.1s;

} .contact{ padding:6em 0 0; } .footer_bottom{ background:#dcd9ae; } ul.social { padding:5em 0 0; list-style: none; text-align:center; } ul.social li:first-child { margin-left: 0; } ul.social li { display: inline-block; margin-right: 5px; } ul.social li a i { width:70px; height:70px; display: block; background: url(../images/img-sprite.png)no-repeat #9b7e3c; border-radius:100px; -webkit-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; } ul.social li a i:hover { background: url(../images/img-sprite.png)no-repeat #8e7231; } ul.social li a i.fb { background-position:4px -271px; } ul.social li a i.tw { background-position:-56px -271px; } ul.social li a i.google { background-position:-120px -271px; } ul.social li a i.linkedin{ background-position:-189px -274px; } ul.social li a i.dribble{ background-position:-246px -273px; } .copy{ padding:1em 0; text-align:center; } .copy p{ font-size:0.85em; color:#333; } .copy p a{ color:#9b7e3c; }

toTop {

display: none; text-decoration: none; position: fixed; bottom: 10px; right: 10px; overflow: hidden; width: 48px; height: 48px; border: none; text-indent: 100%; background: url(../images/top_move.png) no-repeat 0px 0px; } /*--responsive design--*/ @media (max-width:1440px){ .info { margin-top:6.5em; } .view .mask, .view .content { width: 469px; height: 314px; } } @media (max-width:1366px){ .info { margin-top:6em; } .view .mask, .view .content { width:450px; height:300px; } } @media (max-width:1280px){ .container_wrapper { width: 54%; margin: 0 auto; } .info { margin-top:6em; } .view .mask, .view .content { width:415px; height:280px; } } @media (max-width:1024px){ .banner h2 { font-size: 2em; } .banner h1 { font-size: 5em; } .banner { padding: 22em 0 3em; } ul.guy li.guy_desc { width: 64%; margin-top: 0em; } ul.guy li.guy_desc1 { float: left; width: 64%; margin-top: 0em; } .view .mask, .view .content { width: 335px; height: 225px; } .info { margin-top: 4em; } } @media (max-width:800px){ .banner { padding: 15em 0 1em; } .banner h1 { font-size: 4em; } .top_box h2 { font-size: 1.5em; } .content_top { padding: 5em 0 6em; } .top_box { padding: 0em 0 3em; } .contenttop_right { margin-top: 3em; } .button { margin-top: 3em; } .con-button { font-size: 1em; padding: 16px 25px; } .service_box { margin-bottom: 2em; } .services { padding: 4em 0 3em; } .work{ padding:3em 0; } ul.guy li.guy_desc { width: 62%; margin-top: 0em; } ul.guy li.guy_desc p, ul.guy li.guy_desc1 p { font-size: 0.8125em; margin-top: 1em; } ul.guy li.guy_desc1 { width: 62%; } ul.guy li.guy_desc h3, ul.guy li.guy_desc1 h3 { font-size:18px; } .team { padding:3em 0 2em; } .portfolio { padding: 3em 0 0; } .info { margin-top:2em; } .view .mask, .view .content { width: 257px; height:170px; } } @media (max-width:768px){ .view .mask, .view .content { width: 250px; height:168px; } } @media (max-width:640px){ .container_wrapper { width: 65%; margin: 0 auto; } .contact { padding: 3em 0 0; } .view .mask, .view .content { width: 207px; height: 138px; } .info { margin-top: 1.5em; } } @media (max-width:480px){ .banner { padding: 8em 0 1em; } .banner h2 { font-size: 1.5em; } .banner h1 { font-size: 3em; } .nav { width: 92%; right: 19px; } .content_top { padding:3em 0 4em; } .button { margin-top: 1em; } .contenttop_right h3 { color: #333; font-size: 1.3em; margin-bottom: 1em; } .top_box p { font-size: 0.85em; } .top_box h2 { font-size: 1.3em; } .top_box { padding: 0em 0 1em; } .container_wrapper { width: 87%; } .top_box h3 { font-size: 1.3em; } ul.portfolio_grids li { width: 49.333%; float: left; } .view .mask, .view .content { width: 228px; height:152px; } .info { margin-top: 2em; } } @media (max-width:320px){ ul.guy li.guy_desc { width: 56%; } ul.guy li.guy_desc1 { width: 57%; } .team { padding: 3em 0 1em; } .info { margin-top: 0.5em; } .view .mask, .view .content { width: 150px; height:100px; } .view-first .mask { border: 5px solid #dcd9ae; } }