Team:Sheffield/aaa

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Team:Sheffield}}
+
<!DOCTYPE HTML>
<html>
<html>
<head>
<head>
Line 15: Line 15:
-
/*
 
-
Author: W3layout
 
-
Author URL: http://w3layouts.com
 
-
License: Creative Commons Attribution 3.0 Unported
 
-
License URL: http://creativecommons.org/licenses/by/3.0/
 
-
*/
 
/* reset */
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
Line 92: Line 86:
margin:20px 0;
margin:20px 0;
}
}
-
/** Social Icons **/
+
 
-
.social-icons li:first-child {
+
-
border-left: 1px solid rgba(190, 190, 190, 0.25);
+
-
}
+
-
.social-icons ul li:first-child, ol li:first-child {
+
-
margin-top: 0px;
+
-
margin-left: 0px;
+
-
}
+
-
.social-icons li {
+
-
display:inline-block;
+
-
width: 40px;
+
-
height: 40px;
+
-
border-right: 1px solid rgba(190, 190, 190, 0.25);
+
-
background: none;
+
-
padding: 0px;
+
-
margin-left:10px;
+
-
}
+
-
.social-icons a.facebook:hover {
+
-
background-position: 0px top;
+
-
}
+
-
.social-icons a.facebook {
+
-
background-position: 0px bottom;
+
-
}
+
-
.social-icons li a {
+
-
height: 40px;
+
-
width: 40px;
+
-
display: block;
+
-
text-indent: -9999px;
+
-
background: url(../images/social_icons.png);
+
-
transition:all 0.5s ease;
+
-
-o-transition:all 0.5s ease;
+
-
-moz-transition:all 0.5s ease;
+
-
-webkit-transition:all 0.5s ease;
+
-
background-color:#FFF
+
-
}
+
-
.social-icons a.twitter {
+
-
background-position: -40px bottom;
+
-
}
+
-
.social-icons a.twitter:hover {
+
-
background-position: -40px top;
+
-
}
+
-
.social-icons a.googleplus {
+
-
background-position: -440px bottom;
+
-
}
+
-
.social-icons a.googleplus:hover {
+
-
background-position: -440px top;
+
-
}
+
-
.social-icons a.pinterest {
+
-
background-position: -480px bottom;
+
-
}
+
-
.social-icons a.pinterest:hover {
+
-
background-position: -480px top ;
+
-
}
+
-
.social-icons a.dribbble {
+
-
background-position: -160px  bottom;
+
-
}
+
-
.social-icons a.dribbble:hover {
+
-
background-position: -160px top;
+
-
}
+
-
.social-iconst a.dribbble:hover {
+
-
background-position: -160px top;
+
-
}
+
-
.social-icons a.vimeo {
+
-
background-position: -120px  bottom;
+
-
}
+
-
.social-icons a.vimeo:hover {
+
-
background-position: -120px top;
+
-
}
+
-
/*-------------
+
-
SEARCH
+
-
-------------*/
+
-
.search_box{
+
-
margin-top:15px;
+
-
    position:relative;
+
-
    outline:none;
+
-
    background: -webkit-linear-gradient(#eee, #fff);
+
-
    background: -moz-linear-gradient(#eee, #fff);
+
-
    background: -o-linear-gradient(#eee, #fff);
+
-
    background: -ms-linear-gradient(#eee, #fff);
+
-
    background: linear-gradient(#eee, #fff);
+
-
    -webkit-transition: all 0.3s ease-out;
+
-
    -moz-transition: all 0.3s ease-out;
+
-
    -o-transition: all 0.3s ease-out;
+
-
    -ms-transition: all 0.3s ease-out;
+
-
    transition: all 0.3s ease-out;
+
-
}
+
-
.text-box{
+
-
width:85%;
+
-
padding:8px 10px;
+
-
font-size:0.9em;
+
-
    color: #555;
+
-
    background:none;
+
-
    border:none;
+
-
    outline: none;
+
-
}
+
-
.search_box input[type="submit"]{
+
-
border:none;
+
-
cursor:pointer;
+
-
background: url(../images/search.png) no-repeat 0px 9px;
+
-
position: absolute;
+
-
width: 25px;
+
-
right:0px;
+
-
height: 30px;
+
-
}
+
-
/**** End Search Box ****************/
+
   .logo{
   .logo{
float:left;
float:left;
Line 407: Line 297:
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
-
}
 
-
/***** Details Page *****/
 
-
/**** Details Page *****/
 
-
.content h3{
 
-
padding:10px 0;
 
-
}
 
-
.content h3 a{
 
-
font-size:2.5em;
 
-
    color:#616161;
 
-
    padding-bottom:10px;
 
-
    font-family: 'bebas_neueregular';
 
-
}
 
-
.box1 h3 a:hover{
 
-
text-decoration:underline;
 
-
color:#444;
 
-
}
 
-
.box1{
 
-
    padding:15px 0;
 
-
}
 
-
.blog-img img{
 
-
padding:5px;
 
-
background:#FFF;
 
-
border:1px solid #DDD;
 
-
margin:20px 0;
 
-
}
 
-
.blog-data{
 
-
  width:100%;
 
-
}
 
-
.blog-data span a{
 
-
color:#EB7F1A;
 
-
font-size:1em;
 
-
}
 
-
.blog-data span a:hover{
 
-
text-decoration:underline;
 
-
}
 
-
.blog-data p{
 
-
    font-size:0.8em;
 
-
    line-height:2em;
 
-
    color:#6D6B6B;
 
-
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 
-
}
 
-
/*----artical-links---*/
 
-
.artical-links{
 
-
padding: 10px 0px;
 
-
border: 1px solid rgba(192, 192, 192, 0.22);
 
-
border-left: none;
 
-
margin-top: 5px;
 
-
border-right: none;
 
-
}
 
-
.artical-links ul li{
 
-
display:inline-block;
 
-
}
 
-
.artical-links ul li:last-child{
 
-
float:right;
 
-
}
 
-
.artical-links ul li img{
 
-
vertical-align:middle;
 
-
padding-right:10px;
 
-
}
 
-
.artical-links ul li a{
 
-
font: 400 14px/22px Arial;
 
-
color: #ADADAB;
 
-
padding-left: 20px;
 
-
}
 
-
.artical-links ul li a:hover{
 
-
color:#797D7E;
 
-
}
 
-
/****** Comment Area ******/
 
-
.comments-area h3{
 
-
color: rgb(80, 80, 80);
 
-
font-size: 1.5em;
 
-
font-family: 'bebas_neueregular';
 
-
text-transform: uppercase;
 
-
padding: 0px 0px 7px 0px;
 
-
margin-bottom: 15px;
 
-
border-bottom: 5px solid #D5D5D5;
 
-
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.05);
 
-
}
 
-
.comments-area h3 img{
 
-
vertical-align:middle;
 
-
padding-right:5px;
 
-
}
 
-
.comments-area{
 
-
margin-top:20px;
 
-
color: #666;
 
-
}
 
-
.comments-area p{
 
-
position: relative;
 
-
padding: 8px 0;
 
-
}
 
-
.comments-area label{
 
-
display: block;
 
-
font-family: 'bebas_neueregular';
 
-
font-size:1.1em;
 
-
padding-bottom: 5px;
 
-
}
 
-
.comments-area span{
 
-
color: #F05F3D;
 
-
position: absolute;
 
-
left: 4px;
 
-
top: 33px;
 
-
font-size: 1.4em;
 
-
}
 
-
.comments-area input[type="text"],.comments-area textarea{
 
-
padding: 10px 15px;
 
-
width: 30%;
 
-
color: #444;
 
-
font-size:1.2em;
 
-
border: none;
 
-
font-family: Arial, Helvetica, sans-serif;
 
-
font-size: 0.8em;
 
-
background:#FFF;
 
-
box-shadow: inset 0px 0px 3px #535353;
 
-
-webkit-box-shadow: inset 0px 0px 3px #535353;
 
-
-moz-box-shadow: inset 0px 0px 3px #535353;
 
-
-o-box-shadow: inset 0px 0px 3px #535353;
 
-
-webkit-appearance:none;
 
-
outline: none;
 
-
display: block;
 
-
 
-
}
 
-
.comments-area input[type="submit"]{
 
-
outline-style:none;
 
-
outline-width:medium;
 
-
font-size:1em;
 
-
text-transform:uppercase;
 
-
font-weight:bold;
 
-
padding:8px 25px;
 
-
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8543f), color-stop(100%, #d9331a));
 
-
  background: -webkit-linear-gradient(top, #e8543f, #d9331a);
 
-
  background: -moz-linear-gradient(top, #e8543f, #d9331a);
 
-
  background: -o-linear-gradient(top, #e8543f, #d9331a);
 
-
  background: linear-gradient(top, #e8543f, #d9331a);
 
-
  background-color: #e54028;
 
-
  color: white;
 
-
  text-shadow:0px 1px 0px rgba(255, 255, 255, 0.16);
 
-
  border:none;
 
-
  cursor:pointer;
 
-
}
 
-
.comments-area [type="submit"]:hover{
 
-
  background-color: #e54028;
 
-
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eb6855), color-stop(100%, #d9331a));
 
-
  background: -webkit-linear-gradient(top, #eb6855, #d9331a);
 
-
  background: -moz-linear-gradient(top, #eb6855, #d9331a);
 
-
  background: -o-linear-gradient(top, #eb6855, #d9331a);
 
-
  background: linear-gradient(top, #eb6855, #d9331a);
 
-
}
 
-
.comments-area [type="submit"]:active{
 
-
  color: #952312;
 
-
  background: #cd5240;
 
-
}
 
-
.comments-area textarea{
 
-
width: 50%;
 
-
height: 100px;
 
-
}
 
-
/*---comment box--*/
 
-
.comment{
 
-
position:relative;
 
-
margin:25px 0;
 
-
}
 
-
.comment h2{
 
-
margin:0;
 
-
border:1px solid #C4C4C4;
 
-
padding:10px 15px;
 
-
}
 
-
.comment h2 a,
 
-
.comment h2{
 
-
font-weight:normal;
 
-
font-size:12px;
 
-
color:rgb(155, 155, 155);
 
-
margin:0 0 10px 0;
 
-
}
 
-
.comment box{
 
-
float:left;
 
-
}
 
-
.comment box div{
 
-
padding:5px;
 
-
border:none;
 
-
}
 
-
.comment h2{
 
-
-moz-border-radius:.4em;
 
-
-webkit-border-radius:.4em;
 
-
border-radius:.4em;
 
-
font-size: 1.3em;
 
-
padding: 7px;
 
-
font-family: 'bebas_neueregular';
 
-
}
 
-
.comment h2 span{
 
-
color:#F05F3D;
 
-
}
 
-
.comment ul.list{
 
-
margin:0;
 
-
padding:0;
 
-
list-style:none;
 
-
}
 
-
.comment .list li{
 
-
display:block;
 
-
padding:10px 0;
 
-
margin:0 0 18px 0;
 
-
-moz-border-radius:.5em;
 
-
-webkit-border-radius:.5em;
 
-
border-radius:.5em;
 
-
}
 
-
.comment .preview,
 
-
.comment .data{
 
-
float:left;
 
-
}
 
-
.comment .preview{
 
-
width:85px;
 
-
padding:0 10px;
 
-
margin-right:15px;
 
-
}
 
-
.comment .preview img{
 
-
background: #fff;
 
-
}
 
-
.comment .preview img,
 
-
.comment .preview a{
 
-
display:block;
 
-
padding: 3px;
 
-
}
 
-
.comment .data{
 
-
width:92%;
 
-
padding:10px;
 
-
border: 1px solid #DDD;
 
-
background:#FFF;
 
-
position:relative;
 
-
}
 
-
.data span.comment-arrow{
 
-
background:url(../images/comment-arrow.png) no-repeat;
 
-
height:32px;
 
-
width:20px;
 
-
position:absolute;
 
-
top:12px;
 
-
left:-18px;
 
-
}
 
-
.comment .data .title{
 
-
color:#666;
 
-
font-size:16px;
 
-
margin:0 0 5px 0;
 
-
font-family: 'bebas_neueregular';
 
-
}
 
-
.comment .data a{
 
-
color:#F05F3D;
 
-
}
 
-
.comment .data .title a{
 
-
font-size:1em;
 
-
font-family: 'bebas_neueregular';
 
-
}
 
-
.comment .data p{
 
-
margin:0;
 
-
padding:0;
 
-
font-size:0.8123em;
 
-
    line-height:1.8em;
 
-
    color:#6D6B6B;
 
-
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 
-
}
 
-
.leave-reply{
 
-
margin: 10px 0;
 
-
}
 
-
.leave-comment a{
 
-
font-size: 1.1em;
 
-
}
 
-
.leave-reply{
 
-
color: #F05F3D;
 
-
margin: 10px 0;
 
-
font-size: 1em;
 
-
-webkit-border-radius:.3em;
 
-
  -moz-border-radius:.3em;
 
-
border-radius:.3em;
 
-
padding: 7px;
 
-
background: #ddd;
 
-
}
 
-
/*--respond---*/
 
-
#respond{
 
-
color: #666;
 
-
position: relative;
 
-
}
 
-
#reply-title{
 
-
color: #777;
 
-
font-size: 1em;
 
-
font-family: 'bebas_neueregular';
 
-
}
 
-
a#cancel-comment-reply-link{
 
-
color:#F05F3D;
 
-
padding-left:5px;
 
-
}
 
-
.comment-notes{
 
-
color:rgb(155, 155, 155);
 
-
}
 
-
#commentform p{
 
-
position: relative;
 
-
padding: 8px 0;
 
-
font-family: Arial, Helvetica, sans-serif;
 
-
font-size:1em;
 
-
}
 
-
#commentform label{
 
-
display: block;
 
-
font-family: 'bebas_neueregular';
 
-
padding-bottom: 5px;
 
-
font-size:1.1em;
 
-
}
 
-
#commentform span{
 
-
color:#F05F3D;
 
-
position: absolute;
 
-
font-size:1.5em;
 
-
}
 
-
#commentform input[type="text"]{
 
-
padding: 10px 15px;
 
-
width:30%;
 
-
color: #555;
 
-
border: none;
 
-
font-family: Arial, Helvetica, sans-serif;
 
-
font-size:0.8em;
 
-
color: rgb(155, 155, 155);
 
-
box-shadow: 0.2px 0.2px 1px #3C3C3C;
 
-
outline: none;
 
-
display: block;
 
-
}
 
-
#commentform input[type="submit"]{
 
-
color:#F05F3D;
 
-
background: #fff;
 
-
padding:8px 12px;
 
-
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  background-color: #eeeeee;
 
-
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1));
 
-
  background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
 
-
  background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
 
-
  background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
 
-
  background: linear-gradient(top, #fbfbfb, #e1e1e1);
 
-
  display: -moz-inline-stack;
 
-
  color: #666666;
 
-
  text-shadow: 0 1px 1px white;
 
-
  border: 1px solid #C9C7C7;
 
-
  font-size:0.9em;
 
-
  text-transform:uppercase;
 
-
  font-weight:bold;
 
-
}
 
-
#commentform [type="submit"]:hover{
 
-
  background-color: #eeeeee;
 
-
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dcdcdc));
 
-
  background: -webkit-linear-gradient(top, #ffffff, #dcdcdc);
 
-
  background: -moz-linear-gradient(top, #ffffff, #dcdcdc);
 
-
  background: -o-linear-gradient(top, #ffffff, #dcdcdc);
 
-
  background: linear-gradient(top, #ffffff, #dcdcdc);
 
-
}
 
-
#commentform [type="submit"]:active{
 
-
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
 
-
  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
 
-
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 1px 0px white;
 
-
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
 
-
  background: #eeeeee;
 
-
  color: #bbbbbb;
 
-
}
 
-
#commentform textarea{
 
-
padding: 10px 15px;
 
-
width:50%;
 
-
color: #555;
 
-
font-size: 16px;
 
-
outline: none;
 
-
height: 100px;
 
-
display: block;
 
-
border: none;
 
-
font-family: Arial, Helvetica, sans-serif;
 
-
color: rgb(155, 155, 155);
 
-
box-shadow: 0.2px 0.2px 1px #3C3C3C;
 
-
font-size:1em;
 
-
}
 
-
/**** End Comment Area ****/
 
-
/**** Inner Contact styling ***/
 
-
#contactable #contactable_inner {
 
-
background-image:url(../images/contact.png);
 
-
color:#FFFFFF;
 
-
background-color:#333333;
 
-
cursor:pointer;
 
-
height:102px;
 
-
left:0;
 
-
margin-left:-5px;
 
-
*margin-left:-5px;
 
-
overflow:hidden;
 
-
position:fixed;
 
-
*position:absolute;
 
-
text-indent:-100000px;
 
-
top:102px;
 
-
*margin-top:10px;
 
-
width:44px;
 
-
z-index:100000;
 
}
}
-
#contactable #contactForm {
 
-
background-color:#333;
 
-
border:2px solid #FFFFFF;
 
-
color:#FFFFFF;
 
-
left:0;
 
-
margin-left:-400px;
 
-
*margin-left:-434px;
 
-
margin-top:-160px;
 
-
overflow:hidden;
 
-
padding-left:30px;
 
-
position:fixed;
 
-
top:200px;
 
-
width:394px;
 
-
*width:394px;
 
-
z-index:99;
 
-
}
 
-
 
-
#contactable form#contactForm input, textarea {
 
-
background:#FFFFFF none repeat scroll 0 0;
 
-
outline-style:none;
 
-
outline-width:medium;
 
-
width:325px;
 
-
padding:5px;
 
-
border:1px solid #dfdfdf;
 
-
font-family:Arial, Helvetica, sans-serif;
 
-
font-size:1em;
 
-
margin-bottom:10px;
 
-
}
 
-
 
-
#contactable form#contactForm .submit {
 
-
outline-style:none;
 
-
outline-width:medium;
 
-
width:325px;
 
-
font-size:1em;
 
-
font-weight:bold;
 
-
padding:8px;
 
-
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 
-
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8543f), color-stop(100%, #d9331a));
 
-
  background: -webkit-linear-gradient(top, #e8543f, #d9331a);
 
-
  background: -moz-linear-gradient(top, #e8543f, #d9331a);
 
-
  background: -o-linear-gradient(top, #e8543f, #d9331a);
 
-
  background: linear-gradient(top, #e8543f, #d9331a);
 
-
  background-color: #e54028;
 
-
  border-color: #c22d18;
 
-
  color: white;
 
-
  text-shadow:0px 1px 0px rgba(255, 255, 255, 0.16)
 
-
  border:none;
 
-
border-radius:10px;
 
-
-moz-border-radius:10px;
 
-
-webkit-border-radius:10px;
 
-
-o-border-radius:10px;
 
-
cursor:pointer;
 
-
}
 
-
#contactable form#contactForm .submit:hover{
 
-
  color: #952312;
 
-
  background: #cd5240;
 
-
  background-color: #e54028;
 
-
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eb6855), color-stop(100%, #d9331a));
 
-
  background: -webkit-linear-gradient(top, #eb6855, #d9331a);
 
-
  background: -moz-linear-gradient(top, #eb6855, #d9331a);
 
-
  background: -o-linear-gradient(top, #eb6855, #d9331a);
 
-
  background: linear-gradient(top, #eb6855, #d9331a);
 
-
}
 
-
#contactable form#contactForm .submit:active{
 
-
  color: #952312;
 
-
}
 
-
#contactable form#contactForm p {
 
-
width:325px;
 
-
font-size:0.9em;
 
-
padding-bottom:10px;
 
-
}
 
-
 
-
#contactable form#contactForm .disclaimer {
 
-
*margin-left:20px;
 
-
}
 
-
 
-
#contactable #contactForm .red {
 
-
color: #F5410F;
 
-
}
 
-
 
-
#contactable #overlay {
 
-
background-color:#666666;
 
-
display:none;
 
-
height:100%;
 
-
left:0;
 
-
margin:0;
 
-
padding:0;
 
-
position:absolute;
 
-
top:0;
 
-
width:100%;
 
-
z-index:0;
 
-
}
 
-
#contactable .error { background-color: #EDBE9C; }
 
-
 
-
#contactable #name.error { background-color: #EDBE9C; }
 
-
#contactable #email.error { background-color: #EDBE9C; }
 
-
#contactable #comment.error { background-color: #EDBE9C; }
 
-
 
-
#contactable form#contactForm label{
 
-
*margin-left:20px;
 
-
margin-bottom:-10px;
 
-
display:block;
 
-
font-family: 'bebas_neueregular';
 
-
font-size:1.2em;
 
-
letter-spacing:1px;
 
-
}
 
-
 
-
#contactable form#contactForm #loading {
 
-
background: url(images/ajax-loader.gif) no-repeat;
 
-
width:55px;
 
-
height:55px;
 
-
margin: 100px auto;
 
-
display:none;
 
-
}
 
-
 
-
#contactable #callback {
 
-
font-family: georgia;
 
-
font-size:1.1em;
 
-
color: #FFF;
 
-
width:325px;
 
-
margin: 100px auto;
 
-
display:none;
 
-
}
 
-
#contactable .holder {
 
-
margin:0 auto;
 
-
*margin-left:20px;
 
-
padding-top:20px;
 
-
}
 
-
.copy_right{
 
-
    padding:15px 0;
 
-
text-align:center; 
 
-
    margin-top:35px;
 
-
    border-top:2px ridge #FFF; 
 
-
  }
 
-
  .copy_right p{
 
-
font-size:0.8123em;
 
-
color: #6D6B6B;
 
-
line-height:1.8em;
 
-
  }
 
-
  .copy_right p a{
 
-
color: #6D6B6B;
 
-
font-size:1em;
 
-
text-decoration:underline;
 
-
  }
 
-
  .copy_right p a:hover{
 
-
color:#F05F3D;
 
-
text-decoration:none;
 
-
  }
 
-
 
 
-
/**************** Media Quries ************************/
 
-
 
-
@media all and (max-width:1024px){
 
-
.wrap{
 
-
width:90%;
 
-
}
 
-
.og-details h3 {
 
-
font-size:4em;
 
-
padding:0 0 10px;
 
-
margin-bottom:0;
 
-
}
 
-
.comment .preview {
 
-
margin-right:13px;
 
-
}
 
-
.comment .data {
 
-
  width: 89%;
 
-
    }
 
-
}
 
-
@media all and (max-width:800px){
 
-
.wrap{
 
-
width:95%;
 
-
}
 
-
.og-details a {
 
-
margin:0;
 
-
}
 
-
.og-details h3 {
 
-
font-size:3em;
 
-
}
 
-
.comments-area input[type="text"], .comments-area textarea {
 
-
width:50%;
 
-
}
 
-
.comments-area textarea {
 
-
        width: 65%;
 
-
  }
 
-
  .comment .preview {
 
-
margin-right:10px;
 
-
}
 
-
.comment .data {
 
-
  width: 87%;
 
-
    }
 
-
    .comment .data p {
 
-
    font-family:Arial, Helvetica, sans-serif;
 
-
    }
 
-
    #commentform input[type="text"] {
 
-
    width:50%;
 
-
    }
 
-
    #commentform textarea {
 
-
    width:65%;
 
-
    }
 
-
    #commentform p {
 
-
    font-size:0.8123em;
 
-
    line-height:1.8em;
 
-
    }
 
-
}
 
-
@media all and (max-width:640px){
 
-
.wrap{
 
-
width:95%;
 
-
}
 
-
.social-icons li {
 
-
margin-left:0;
 
-
}
 
-
.logo h1 {
 
-
font-size: 3.5em;
 
-
padding:28px 0;
 
-
    }
 
-
.comments-area input[type="text"], .comments-area textarea {
 
-
  width:95%;
 
-
  }
 
-
  #commentform input[type="text"] {
 
-
width: 95%;
 
-
  }
 
-
  #commentform textarea {
 
-
width: 95%;
 
-
}
 
-
.comment .preview {
 
-
margin-right:8px;
 
-
}
 
-
.comment .data {
 
-
    width:84%;
 
-
}
 
-
.og-grid li{
 
-
margin:10px 2px 0 2px;
 
-
}
 
-
.og-expander-inner {
 
-
    padding: 20px 30px;
 
-
}
 
-
.og-fullimg{
 
-
    display:none;
 
-
}
 
-
  .og-details {
 
-
    width: 100%;
 
-
float: none;
 
-
padding-top: 25px;
 
-
}
 
-
.og-close {
 
-
right:10px;
 
-
}
 
-
.og-details a {
 
-
margin:30px 0 0;
 
-
}
 
-
.og-details h3 {
 
-
font-size:5em;
 
-
}
 
-
}
 
-
@media all and (max-width:480px){
 
-
.wrap{
 
-
width:95%;
 
-
}
 
-
.logo,.header_top{
 
-
float:inherit;
 
-
width:100%;
 
-
}
 
-
.logo h1 {
 
-
padding:0;
 
-
text-align:center;
 
-
}
 
-
.social-icons {
 
-
text-align:center;
 
-
}
 
-
.search_box {
 
-
margin:5px 0 10px 0;
 
-
}
 
-
.og-close {
 
-
right:5px;
 
-
top:10px;
 
-
}
 
-
.og-details h3 {
 
-
font-size:3em;
 
-
padding-bottom:0;
 
-
  }
 
-
.artical-links ul li a {
 
-
font: 400 13px/22px Arial;
 
-
padding-left: 5px;
 
-
}
 
-
.artical-links ul li img {
 
-
padding-right: 3px;
 
-
  }
 
-
  .comment .data {
 
-
width: 78%;
 
-
  }
 
-
}
 
-
@media all and (max-width:320px){
 
-
.wrap{
 
-
width:95%;
 
-
}
 
-
.og-expander-inner {
 
-
padding: 20px 0px;
 
-
  }
 
-
  .og-details {
 
-
padding: 0 10px 0 10px;
 
-
    margin-top:25px;
 
-
  }
 
-
  .content h3 a {
 
-
  font-size:1.5em;
 
-
  }
 
-
  .blog-img img {
 
-
  margin:0;
 
-
  }
 
-
  .blog-data p {
 
-
  line-height:1.8em;
 
-
  }
 
-
  .artical-links ul li {
 
-
  line-height:2em;
 
-
  }
 
-
  .comment .preview {
 
-
margin-right: 5px;
 
-
padding:0 5px;
 
-
width:75px;
 
-
  }
 
-
  .comment .data {
 
-
width: 72%;
 
-
  }
 
-
  #contactable #contactForm {
 
-
  width:275px;
 
-
  padding-left:15px;
 
-
  }
 
-
  #contactable form#contactForm input, textarea {
 
-
  width:97%;
 
-
  }
 
-
  #contactable form#contactForm .submit {
 
-
  width:240px;
 
-
  }
 
-
  #contactable form#contactForm p {
 
-
width: 255px;
 
-
}
 
</style>
</style>
Line 1,170: Line 333:
<ul id="og-grid" class="og-grid">
<ul id="og-grid" class="og-grid">
<li>
<li>
-
<a href="#" data-largesrc="https://static.igem.org/mediawiki/2014/f/f0/IGEM_logo.png" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
+
<a data-largesrc="./images/img2_b.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="https://static.igem.org/mediawiki/2014/f/f0/IGEM_logo.png" width="200px">
<img src="https://static.igem.org/mediawiki/2014/f/f0/IGEM_logo.png" width="200px">
</a>
</a>
Line 1,188: Line 351:
</div>
</div>
</div><!-- /container -->
</div><!-- /container -->
-
<script type="text/javascript">/*
+
<script type="text/javascript">
-
* debouncedresize: special jQuery event that happens once after a window resize
+
-
*
+
-
* latest version and complete README available on Github:
+
-
* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
+
-
*
+
-
* Copyright 2011 @louis_remi
+
-
* Licensed under the MIT license.
+
-
*/
+
var $event = $.event,
var $event = $.event,
$special,
$special,

Revision as of 15:22, 22 September 2014

<!DOCTYPE HTML> Free Photo Cart Website Template | Home :: w3layouts