"

From 2014.igem.org

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

• /

/* 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;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol,ul{list-style:none;margin:0;padding:0;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:;content:none;} table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */ .txt-center{text-align:center;}/* text align center */ .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ .underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ body{ font-family: 'Raleway', sans-serif; background:#1f253d; position:relative; background:url(../images/bg.jpg) no-repeat center fixed;

   -webkit-background-size: cover;

-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; } .wrap{ width:90%; margin:0 auto; transition:all .2s linear; -moz-transition:all .2s linear;/* firefox */ -webkit-transition:all .2s linear; /* safari and chrome */ -o-transition:all .2s linear; /* opera */ -ms-transition:all .2s linear; }

/********* Main ************/ .main{ padding:50px 0; } .grid1,.grid2,.grid3,.grid4 { float:left; margin-left:2%; -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .grid1{ width:20%; margin-left:0; background:#eff9f6; } .grid2{ width:29%; } .grid3{ width:25%; } .grid4{ width:20%; } /** Logo **/ .logo{ padding:80px 20px 20px; background:#7CDD4E url(../images/quotes.png) no-repeat 170px -32px; } .logo hr{ display: inline-block; padding: 0px 25px; color: #FFF; border: 2px solid #DFF5D4; } .logo h1{ font-size:2.8em; font-weight:100; color:#FFF; text-transform:uppercase; } .logo-desc{ padding:15px; background:#eff9f6; } .logo-desc h2{ color:#a7a7a7; font-size:14px; font-weight:600; } .logo-desc p{ color:#888888; font-size:13px; text-align:right; padding-top:20px; line-height:1.5em; } /** Project **/ .project{ background:#FFF; } .project img{ width:100%; } .project-details{ padding:20px 25px 20px 25px; } .project-desc{ float:left; } .project-desc h3{ font-size:0.95em; color:#666666; text-transform:uppercase; line-height:1.6em; } .project-desc h3 span{ font-weight:800; } .project-articles{ float:right; } .project-articles li{ display:inline-block; margin-left:5px; } .project-articles li:first-child{ margin-left:0; } .project-articles li a{ width:38px; height:38px; display:block; background:url(../images/sprite-img.png) no-repeat; } .project-articles li.likes a{ background-position:-7px 0px; } .project-articles li.likes a:hover{ background-position:-10px -42px; } .project-articles li.comments-icon a{ background-position:-58px -2px; } .project-articles li.comments-icon a:hover{ background-position:-58px -43px; } /********** Sign In to your account *********/ .grid4{ background:#fffffe; text-align:center; }

.heading{
	margin-bottom:20px;
	padding:20px;
	border-bottom:1px solid #c8e3e0;
}

.sign_in h3{ float:left; color:#888888; font-size:20px; text-transform: uppercase; font-weight:700; } .sign_in input[type="reset"]{ float:right; color:#80c65e; font-size:13px; text-transform: uppercase; font-weight:700; background:none; border:none; outline:none; margin: 0;

   padding: 0;
   font-family: 'Raleway', sans-serif;
   cursor:pointer;

} .sign_in span{ margin:15px 20px;

   display:block;   
}

.sign_in input[type="text"],.sign_in input[type="password"]{ padding:20px;

   color:#afafaf;
   font-size:0.85em;
   background:#FFF;   
   outline:none;
   border:1px solid #c8e3e0;
   margin:0px auto;
   width:83%;  
   -webkit-apperance:none;
   font-family: 'Raleway', sans-serif;
    transition: border-color 0.2s;

-o-transition: border-color 0.2s; -ms-transition: border-color 0.2s; -moz-transition: border-color 0.2s; -webkit-transition: border-color 0.2s; text-transform:uppercase; } .sign_in input[type="text"]:hover,.sign_in input[type="text"]:focus,.sign_in input[type="password"]:hover,.sign_in input[type="password"]:focus{ border-color:#AAE7DF; } .sign_in input[type="submit"]{ padding:15px 0; display:block; width:100%; color:#FFF; font-size:15px; font-weight:600; text-transform:uppercase; cursor:pointer; border:none; outline:none;

   background:#97e272;    

-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-apperance:none; font-family: 'Raleway', sans-serif; } .sign_in input[type="submit"]:hover{

       background:#82DD55;

} .sign_in p{ margin-top:20px; color:#999; font-size:13px; text-transform:uppercase; padding-bottom:20px; } .sign_in p a{ font-size:1em; font-weight:600; color:#97e272; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sign_in p a:hover{ color;#82DD55; text-decoration:underline; } /** Main Bottom **/ .main-bottom{ margin-top:30px; } .profile-grid{

float:left;
width:63%;	

} .profile{ background: #e2f5f4; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNlMmY1ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjRmN2YzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(left, #e2f5f4 46%, #f4f7f3 100%); background: -webkit-gradient(linear, left top, right top, color-stop(46%,#e2f5f4), color-stop(100%,#f4f7f3)); background: -webkit-linear-gradient(left, #e2f5f4 46%,#f4f7f3 100%); background: -o-linear-gradient(left, #e2f5f4 46%,#f4f7f3 100%); background: -ms-linear-gradient(left, #e2f5f4 46%,#f4f7f3 100%); background: linear-gradient(to right, #e2f5f4 46%,#f4f7f3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f5f4', endColorstr='#f4f7f3',GradientType=1 ); -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .profile-img img{ display:block; width:100%; } .profile-details{ padding:0 30px 30px 30px; } .profile-desc{ float:left; position:relative; width:65%; } .profile-pic{ margin-top:-40px; float:left; } .profile-pic img{ display:inline-block; padding:8%; background:#eaf5f3; } .user-details{ float:left; margin-left:5%; margin-top:25px; } .user-details h2{ font-size:1.3em; color:#666; text-transform:uppercase; font-weight:700; } .user-details p{ font-size:12px; color:#888888; padding:3px 0; } .user-details p span{ font-size:13px; } .user-followers{ float:right; margin-top:40px; } .user-followers li{ display:inline-block; margin-left:30px; font-size:13px; color:#888; line-height:1.6em; text-align:center; } .user-followers li span{ font-weight:600; color:#666; font-size:1.5em; font-family: 'Open Sans', sans-serif; } .user-followers li:first-child{ margin-left:0; } .profile-bottom{ margin-top:40px; } /* GRID OF THREE ============================================================================= */ .section { clear: both; padding: 0px; margin: 0px; } .group:before, .group:after {

   content:"";
   display:table;

} .group:after {

   clear:both;

} .group {

   zoom:1;

} .col_1_of_3{ display: block; float:left; margin:0% 0 0% 1.6%; background: #e1f5f3; } .col_1_of_3:first-child { margin-left: 0; }

.span_1_of_3 { width:32.2%; padding:5.6% 0; text-transform:uppercase; text-align:center; -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .span_1_of_3 h3{ color:#666; font-size:14px; font-weight:700; font-family:'Open Sans', sans-serif; } .span_1_of_3 p { font-size:0.85em; color: #888; padding:5px 0; margin-top:26px; }

/** Comments Section **/ .comments{ float:left; width:35%; margin-left:2%; background:#FFF; -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .comments h2{ color: #888; font-size:18px; text-transform: uppercase; font-weight: 700; padding:20px; } .comment-area{ background:#fcfaf5; padding:0 20px 20px 50px; border-top:1px solid #c6e2df; } .comment-area li { display:block; padding:15px 0; border-bottom:1px solid #c6e2df; background:url(../images/line.png) repeat-y ; } .comment-area li.subchild { border-bottom:none; padding-bottom:0; } .commnet-user{ float:left; width:14%; margin-left:-30px; } .commnet-user img{ display:block; } .commnet-desc{ float:left; margin-left:3%; width:89%; } .commnet-desc h3{ font-size:15px; color:#666; text-transform:uppercase; font-weight:700; display:inline-block; } .commnet-desc span.time{ font-size:12px; color:#888; padding-left:10px; } .commnet-desc p{ font-size:12px; color:#666666; line-height:1.6em; padding:8px 0; font-weight:500; } .reply-links li{ display:inline-block; margin-left:10px; padding:0; border:none; background:none; } .reply-links li:first-child{ margin-left:0; } .reply-links li a{ color:#1e73b5; font-size:11px; font-weight:600; text-transform:uppercase; } .reply-links li a:hover{ text-decoration:underline; } .subchilds{ padding-left:10%; border-top:1px solid #c6e2df; margin-top:20px; } .subchilds li{ background:none; } .subchilds .commnet-user{ margin-left:0; } .subchilds .commnet-desc{ width:83%; } .reply{ display:block; padding:20px; background:#FCFAF5; padding-top:0; } .reply a{

  	border:1px solid #c6e2df;
  	padding:14px;
  	font-size:13px;
  	color:#666;
  	text-transform:uppercase;
  	font-weight:700;
  	text-align:center;
  	display:block;
  	background:#FFF;
  	-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .reply a:hover{ background:#C6E2DF; color:#619992; } /*----copy-right-----*/ .copy-right{ text-align:center; padding:15px 0; } .copy-right p{ color:#FFF; font-size:1em; font-weight:700; } .copy-right p a{ color:#038191; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;

} .copy-right p a:hover{ color:#222; text-decoration:underline; }

/**** Responsice Layout *****/ @media only screen and (max-width: 1366px){ .wrap{ width:95%; } .logo{ background-position:138px -30px; } .sign_in input[type="text"], .sign_in input[type="password"]{ width:80%; } } @media only screen and (max-width: 1280px) { .wrap{ width:95%; } .logo h1{ font-size:2.5em; } } @media all and (max-width: 1024px) { .wrap { width:95%; } .profile-grid,.comments{ float:none; width:100%; } .comments{ margin-left:0; margin-top:30px; } .commnet-user{ width:7%; } .grid1{ width:45%; } .grid2{ width:53%; } .grid3{ margin-left:0; width:42%; margin-top:20px; } .grid4{ width:56%; margin-top:20px; } .project-details{ padding:5px 25px 7px 25px; } .logo {

      background-position: 308px -30px;
   }

} @media all and (max-width:800px) { .wrap { width:95%; } .logo { background-position: 215px -30px; } .grid3{ width:48%; } .grid4{ width:50%; } .project-details{ padding:15px 25px 27px 25px; } .logo-desc p{ padding-top:32px; } } @media all and (max-width:640px) { .wrap{ width:95%; } .logo { background-position: 145px -30px; } .profile-details{ padding:0 15px 20px 15px; } .user-followers{ margin-top:25px; } .profile-pic{ width:25%; } .user-details{ margin-top:15px; } .user-details{ margin-left:10%; } .user-followers li{ margin-left:10px; } .span_1_of_3{ width:100%; } .col_1_of_3{ margin-left:0; margin-top:20px; } .profile-bottom{ margin-top:0; } .commnet-user{ margin-left:-20px; } .main{ padding:30px 0; } } @media all and (max-width:480px) { .wrap{ width:95%; } .grid1,.grid2,.grid3,.grid4{ width:100%; margin-left:0; margin-bottom:20px; } .logo { background-position: 315px -30px; } .profile-desc{ width:100%; } .comment-area{ padding:0 15px 20px 30px; } .commnet-user{ width:12%; }

}

@media all and (max-width:320px) { .wrap{ width:95%; } .logo { background-position: 215px -30px; padding:50px 20px 10px; } .profile-pic{ margin-top:-10px; } .user-details{ margin-left:-6px; } .user-details{ margin-top:10px; } .profile-details{ padding:0 10px 20px 10px; } .user-details{ margin-left:5%; } .user-details h2{ font-size:1em; } .profile-pic img{ padding:5%; } .profile-pic{ width:15%; } }