Template:CSS/team

From 2014.igem.org

(Difference between revisions)
 
(480 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
-
@font-face {
+
 
-
  font-family: 'Bitter';
+
.container_team{
-
  font-style: normal;
+
width:100%;
-
  font-weight: 400;
+
height:3600px;
-
  src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/2PcBT6-VmYhQCus-O11S5-vvDin1pK8aKteLpeZ5c0A.woff) format('woff');
+
background-image: url(https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png);
 +
position:absolute;
 +
top:-10px;
 +
left:0px;
 +
padding:0px;
 +
margin:0px;
}
}
-
@font-face {
+
 
-
  font-family: 'Bitter';
+
.grouppic{
-
  font-style: normal;
+
width:920px;
-
  font-weight: 700;
+
height:360px;
-
  src: local('Bitter-Bold'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/evC1haE-MsorTl_A7_uSGbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
+
position:absolute;
 +
top:120px;
 +
left:220px;
 +
background-image:url(https://static.igem.org/mediawiki/2014/1/1b/Grouppic_iitd.jpg);
 +
border-radius:10px;
 +
 
}
}
-
@font-face {
+
.pic{
-
font-family: 'Droid Sans';
+
width:100px;
-
font-style: normal;
+
height:100px;
-
font-weight: 400;
+
border-radius:100px;
-
src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
+
z-index:52;
}
}
-
@font-face {
+
.picbig{
-
font-family: 'Droid Sans';
+
position: absolute;
-
font-style: normal;
+
left:100px;
-
font-weight: 700;
+
top:-120px;
-
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
+
width:0px;
 +
border-radius:200px;
 +
-webkit-transition:width 0.3s linear 0s;
 +
z-index:52;
}
}
 +
.pic:hover + .picbig{
 +
width:300px;
 +
border-radius:200px;
 +
}
-
body {
+
.coverpic{
-
font-family: 'Droid Sans', Helvetica, sans-serif;
+
position:absolute;
-
font-size: 16px;
+
top:0px;
-
line-height: 18px;
+
left:0px;
 +
width:300px;
 +
height:120px;
 +
border:solid thin black;
 +
background-color:orange;
 +
border-radius:30px 30px 0px 0px;
}
}
-
h1, h2, h3, h4, h5, h6 {
+
.coverimage{
-
font-family: 'Bitter', serif;
+
position:absolute;
-
font-weight: normal;
+
top:0px;
-
color: #000;
+
left:0px;
-
border-bottom: none;
+
width:300px;
-
margin-bottom: none;
+
height:120px;
 +
border:solid thin black;
 +
background-color:orange;
 +
border-radius:30px 30px 0px 0px;
}
}
-
h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered {
+
.answer_list{
-
text-align: center;
+
position:absolute;
 +
top:25px;
 +
left:20px;
}
}
-
div.clearfix {
+
.answer_list p{
-
content: ".";
+
font-family:Open sans, helvetica, Arial;
-
display: block;
+
font-size:14px;
-
clear: both;
+
color:black;
-
visibility: hidden;
+
font-weight:400;
-
line-height: 0;
+
-
height: 0;
+
}
}
-
div.twelve.columns.no-pad {
+
.name{
-
padding: 0px;
+
position:absolute;
 +
bottom:-5px;
 +
left:130px;
 +
display:inline;
 +
width:300px;
}
}
-
.off-canvas {
+
.name p{
-
width: 100%;
+
font-family:Open sans, helvetica, Arial;
 +
font-size:16px;
 +
color:white;
 +
font-weight:600;
 +
text-shadow: 2px 2px 2px black;
}
}
-
a, a:visited {
+
 
-
color: #b31b1b;
+
.post{
-
text-decoration: none;
+
position:absolute;
 +
top:2px;
 +
left:120px;
}
}
-
a:hover {
+
.post p{
-
color: #871414;
+
font-family:Open sans, helvetica, Arial;
-
text-decoration: none;
+
font-size:12px;
 +
color:black;
 +
font-weight:600;
}
}
 +
.radiobuttonbox{
 +
position:absolute;
 +
top:110px;
 +
left:0px;
 +
width:300px;
 +
height:30px;
 +
border-radius:0px 0px 30px 30px;
 +
z-index:53;
 +
}
 +
.Contributionbutton{
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:149px;
 +
height:28px;
 +
border-radius:0px 0px 0px 30px;
 +
z-index:53;
 +
}
 +
.Contributionbutton:focus {outline:0;}
-
/* -----------------------------------------
+
.Generalinfobutton{
-
Team Page
+
position:absolute;
-
----------------------------------------- */
+
top:0px;
 +
left:150px;
 +
width:149px;
 +
height:28px;
 +
border-radius:0px 0px 30px 0px;
 +
z-index:53;
 +
}
 +
.Generalinfobutton:focus {outline:0;}
-
div.team-bios-container div.row {
+
 
-
padding: 0px 0px 10px;
+
.teamfblink{
-
border-bottom: 1px solid #ddd;
+
position:absolute;
 +
top:2px;
 +
left:2px;
 +
width:25px;
 +
height:25px;
 +
}
 +
.teamfblink img{
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:25px;
 +
height:25px;
}
}
-
div.team-bios-container div.last-ele {
+
 
-
border-bottom: none;
+
.coordinator{
 +
position:absolute;
 +
top:550px;
 +
left:100px;
 +
width:1200px;
 +
 
 +
}
 +
.coordinator p{
 +
font-size:20px;
 +
font-weight:800;
}
}
-
div.team-bios-container img {
+
 
-
max-height: 200px;
+
 
-
margin: 15px 0px;
+
/*=======================================*/
 +
.outerrect{
 +
position:absolute;
 +
top:640px;
 +
left:500px;
 +
width:300px;
 +
height:250px;
 +
background-color:grey;
 +
border-radius:30px;
 +
}
 +
.testing{
 +
position:absolute;
 +
top:690px;
 +
left:520px;
 +
width:300px;
 +
height:250px;
 +
border-radius:10px;
 +
z-index:52;
}
}
-
div.team-bios-container img.inline {
+
.textblock{
-
max-height: none;
+
position:absolute;
 +
background-image:url(https://static.igem.org/mediawiki/2014/5/57/Textbackground.jpg);
 +
top:120px;
 +
left:0px;
 +
width:300px;
 +
height:140px;
 +
border:solid thin black;
 +
border-radius:0px 0px 30px 30px;
}
}
-
div#grd-members, div#fac-members {
+
/*=======================================*/
-
margin-top: 80px;
+
.outerrect1{
 +
position:absolute;
 +
top:975px;
 +
left:90px;
 +
width:300px;
 +
height:250px;
 +
background-color:grey;
 +
border-radius:30px;
 +
}
 +
.testing1{
 +
position:absolute;
 +
top:1025px;
 +
left:110px;
 +
width:300px;
 +
height:250px;
 +
border-radius:10px;
 +
z-index:52;
 +
}
 +
.textblock1{
 +
position:absolute;
 +
background-image:url(https://static.igem.org/mediawiki/2014/5/57/Textbackground.jpg);
 +
top:120px;
 +
left:0px;
 +
width:300px;
 +
height:140px;
 +
border:solid thin black;
 +
border-radius:0px 0px 30px 30px;
 +
}
 +
/*=======================================*/
 +
.outerrect2{
 +
position:absolute;
 +
top:975px;
 +
left:500px;
 +
width:300px;
 +
height:250px;
 +
background-color:grey;
 +
border-radius:30px;
 +
}
 +
.testing2{
 +
position:absolute;
 +
top:1025px;
 +
left:520px;
 +
width:300px;
 +
height:250px;
 +
border-radius:10px;
 +
z-index:52;
}
}
-
div.bio-pic-container {
+
.textblock2{
-
position: relative;
+
position:absolute;
-
margin: 20px 0px;
+
background-image:url(https://static.igem.org/mediawiki/2014/5/57/Textbackground.jpg);
-
height: 166px;
+
top:120px;
 +
left:0px;
 +
width:300px;
 +
height:140px;
 +
border:solid thin black;
 +
border-radius:0px 0px 30px 30px;
}
}
-
div.bio-pic-container img {
+
/*=======================================*/
-
position: absolute;
+
 
-
margin: 0px;
+
.outerrect3{
-
top: 0px;
+
position:absolute;
-
z-index: 2;
+
top:975px;
 +
left:910px;
 +
width:300px;
 +
height:250px;
 +
background-color:grey;
 +
border-radius:30px;
 +
}
 +
.testing3{
 +
position:absolute;
 +
top:1025px;
 +
left:930px;
 +
width:300px;
 +
height:250px;
 +
border-radius:10px;
 +
z-index:52;
}
}
-
div.bio-pic-container img.bio-pic-bw {
+
.textblock3{
-
z-index: 5;
+
position:absolute;
 +
background-image:url(https://static.igem.org/mediawiki/2014/5/57/Textbackground.jpg);
 +
top:120px;
 +
left:0px;
 +
width:300px;
 +
height:140px;
 +
border:solid thin black;
 +
border-radius:0px 0px 30px 30px;
}
}
-
.row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
+
/*=======================================*/
-
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 0px; }
+
-
.row.collapse .column, .row.collapse .columns { padding: 0; }
+
-
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 0px; }
+
-
.row .row.collapse { margin: 0; }
+
-
.column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
 
-
.column.centered, .columns.centered { float: none; margin: 0 auto; }
 
-
[class*="column"] + [class*="column"]:last-child { float: right; }
+
/*=======================================*/
 +
.outerrect{
 +
position:absolute;
 +
top:640px;
 +
left:500px;
 +
width:300px;
 +
height:250px;
 +
background-color:grey;
 +
border-radius:30px;
 +
}
 +
.testing{
 +
position:absolute;
 +
top:690px;
 +
left:520px;
 +
width:300px;
 +
height:250px;
 +
border-radius:10px;
 +
z-index:52;
 +
}
-
[class*="column"] + [class*="column"].end { float: left; }
+
.textblock{
 +
position:absolute;
 +
background-image:url(https://static.igem.org/mediawiki/2014/5/57/Textbackground.jpg);
 +
top:120px;
 +
left:0px;
 +
width:300px;
 +
height:140px;
 +
border:solid thin black;
 +
border-radius:0px 0px 30px 30px;
 +
}
-
.one, .row .one { width: 8.33333%; }
 
-
.two, .row .two { width: 16.66667%; }
+
.team_iitd{
 +
position:absolute;
 +
top:1260px;
 +
left:100px;
 +
width:1200px;
-
.three, .row .three { width: 25%; }
+
}
 +
.team_iitd p{
 +
font-size:20px;
 +
font-weight:800;
 +
}
 +
/*==========Member1==============================================*/
-
.four, .row .four { width: 33.33333%; }
 
-
.five, .row .five { width: 41.66667%; }
 
-
.six, .row .six { width: 50%; }
+
.member1{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1360px;
 +
left:90px;
 +
}
-
.seven, .row .seven { width: 58.33333%; }
 
-
.eight, .row .eight { width: 66.66667%; }
+
.member2{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1360px;
 +
left:400px;
-
.nine, .row .nine { width: 75%; }
+
}
-
.ten, .row .ten { width: 83.33333%; }
+
.member3{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1360px;
 +
left:700px;
 +
}
-
.eleven, .row .eleven { width: 91.66667%; }
 
-
.twelve, .row .twelve { width: 100%; }
+
.member4{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1360px;
 +
left:1000px;
 +
}
-
.row .offset-by-one { margin-left: 8.33333%; }
 
-
.row .offset-by-two { margin-left: 16.66667%; }
+
.member5{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1700px;
 +
left:90px;
 +
}
-
.row .offset-by-three { margin-left: 25%; }
 
-
.row .offset-by-four { margin-left: 33.33333%; }
+
.member6{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1700px;
 +
left:400px;
 +
}
-
.row .offset-by-five { margin-left: 41.66667%; }
+
.member7{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1700px;
 +
left:700px;
 +
}
-
.row .offset-by-six { margin-left: 50%; }
 
-
.row .offset-by-seven { margin-left: 58.33333%; }
+
.member8{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:1700px;
 +
left:1000px;
 +
}
-
.row .offset-by-eight { margin-left: 66.66667%; }
+
.member9{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2040px;
 +
left:90px;
 +
}
-
.row .offset-by-nine { margin-left: 75%; }
 
-
.row .offset-by-ten { margin-left: 83.33333%; }
+
.member10{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2040px;
 +
left:400px;
 +
}
-
.push-two { left: 16.66667%; }
+
.member11{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2040px;
 +
left:700px;
 +
}
-
.pull-two { right: 16.66667%; }
 
-
.push-three { left: 25%; }
+
.member12{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2040px;
 +
left:1000px;
 +
}
-
.pull-three { right: 25%; }
+
.member13{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2380px;
 +
left:90px;
 +
}
-
.push-four { left: 33.33333%; }
 
-
.pull-four { right: 33.33333%; }
+
.member14{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2380px;
 +
left:400px;
 +
}
-
.push-five { left: 41.66667%; }
+
.member15{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2380px;
 +
left:700px;
 +
}
-
.pull-five { right: 41.66667%; }
 
-
.push-six { left: 50%; }
+
.member16{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2380px;
 +
left:1000px;
 +
}
-
.pull-six { right: 50%; }
 
-
.push-seven { left: 58.33333%; }
+
.phd_iitd{
 +
position:absolute;
 +
top:2750px;
 +
left:100px;
 +
width:1200px;
-
.pull-seven { right: 58.33333%; }
+
}
 +
.phd_iitd p{
 +
font-size:20px;
 +
font-weight:800;
 +
}
-
.push-eight { left: 66.66667%; }
+
.member17{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2820px;
 +
left:350px;
 +
}
-
.pull-eight { right: 66.66667%; }
+
.member18{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2820px;
 +
left:550px;
 +
}
-
.push-nine { left: 75%; }
+
.member19{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:2820px;
 +
left:700px;
 +
}
-
.pull-nine { right: 75%; }
 
-
.push-ten { left: 83.33333%; }
 
-
.pull-ten { right: 83.33333%; }
 
-
img, object, embed { max-width: 100%; height: auto; }
+
/*========================================================*/
-
object, embed { height: 100%; }
+
.memberprofilepic{
 +
width:200px;
 +
height:200px;
 +
position:absolute;
 +
top:0px;
 +
left:25px;
 +
float:left;
 +
overflow:hidden;
 +
cursor:pointer;
 +
z-index:12;
 +
}
-
img { -ms-interpolation-mode: bicubic; }
+
.memberimage{
 +
width:100px;
 +
height:100px;
 +
border-radius:100px;
 +
display:block;
 +
margin:auto auto;
 +
border:solid thin grey;
-
#map_canvas img, .map_canvas img { max-width: none!important; }
+
  -webkit-transition: all .2s ease;
-
+
    -moz-transition: all .2s ease;
 +
      -o-transition: all .2s ease;
 +
      -ms-transition: all .2s ease;
 +
          transition: all .2s ease;
 +
}
 +
 +
.memberimage:hover {
 +
height: 200px;
 +
width:200px;
 +
display:block;
 +
margin:auto auto;
 +
   
 +
}
 +
.membertext{
 +
width:250px;
 +
height:300px;
 +
position:absolute;
 +
top:20px;
 +
left:0px;
 +
border:solid thin grey;
 +
border-radius:20px;
 +
z-index:10;
 +
font-family:Open sans, helvetica, Arial;
 +
font-size:14px;
 +
color:black;
 +
font-weight:400;
 +
padding:10px;
 +
/*background-image:url(https://static.igem.org/mediawiki/2014/a/ad/20140725_011606.JPG);
 +
 +
background-image:url(https://static.igem.org/mediawiki/2014/d/da/Text_bg.png);*/
 +
 +
background: -webkit-linear-gradient(white, #dfdddd); /* For Safari 5.1 to 6.0 */
 +
    background: -o-linear-gradient(white, #dfdddd); /* For Opera 11.1 to 12.0 */
 +
    background: -moz-linear-gradient(white, #dfdddd); /* For Firefox 3.6 to 15 */
 +
    background: linear-gradient(white, #dfdddd);
 +
}
 +
 +
 +
 +
 +
 +
/*video collection*/
 +
.videocollection{
 +
position:absolute;
 +
top:3500px;
 +
left:20px;
 +
width:1300px;
 +
height:300px;
 +
background-color:grey;
 +
}
 +
 +
.video_abhi{
 +
position:absolute;
 +
top:10px;
 +
left:20px;
 +
}
 +
 +
.video_gaurav{
 +
position:absolute;
 +
top:10px;
 +
left:400px;
 +
}
 +
 +
.video_kunal{
 +
position:absolute;
 +
top:10px;
 +
left:800px;
 +
}
 +
 +
.prof_phd{
 +
width:100%;
 +
height:220px;
 +
position:absolute;
 +
top:3200px;
 +
left:0px;
 +
border: thin solid grey;
 +
float:left;
 +
display:inline;
 +
background-image:url(https://static.igem.org/mediawiki/2014/b/bd/Instructor_bg.png);
 +
}
 +
 +
.prof_phd_header{
 +
position:absolute;
 +
top:5px;
 +
left:50px;
 +
display:inline;
 +
width:1200px;
 +
 +
 +
}
 +
 +
.prof_phd_header p{
 +
font-family:Open sans, helvetica, Arial;
 +
font-size:16px;
 +
color:black;
 +
font-weight:600;
 +
}
 +
 +
.prof_phd2{
 +
width:70%;
 +
height:120px;
 +
position:absolute;
 +
top:60px;
 +
left:280px;
 +
float:left;
 +
display:inline;
 +
 +
}
 +
.pic1{
 +
width:150px;
 +
height:150px;
 +
position:absolute;
 +
top:-3px;
 +
left:30px;
 +
}
 +
.pic2{
 +
position:absolute;
 +
top:-3px;
 +
left:180px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
.pic3{
 +
position:absolute;
 +
top:-3px;
 +
left:330px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
.pic4{
 +
position:absolute;
 +
top:-3px;
 +
left:480px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
 +
.pic1:hover+.pic2{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(150px,0);
 +
    -webkit-transform: translate(150px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(150px,0); /** Opera **/
 +
    -moz-transform: translate(150px,0); /** Firefox **/
 +
}
 +
 +
 +
 +
.pic2:hover+.pic3{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(150px,0);
 +
    -webkit-transform: translate(150px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(150px,0); /** Opera **/
 +
    -moz-transform: translate(150px,0); /** Firefox **/
 +
}
 +
 +
 +
 +
 +
.pic3:hover+.pic4{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(150px,0);
 +
    -webkit-transform: translate(150px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(150px,0); /** Opera **/
 +
    -moz-transform: translate(150px,0); /** Firefox **/
 +
}
 +
 +
 +
 +
.smallpic{
 +
width:150px;
 +
height:150px;
 +
border-radius:0px;
 +
z-index:52;
 +
border:thin solid grey;
 +
}
 +
 +
.picdescription{
 +
position: absolute;
 +
left:150px;
 +
top:0px;
 +
width:0px;
 +
height:150px;
 +
border-radius:0px;
 +
background-color:red;
 +
-webkit-transition:all 0.3s linear 0s;
 +
z-index:52;
 +
 +
}
 +
 +
.smallpic:hover + .picdescription{
 +
width:150px;
 +
height:150px;
 +
border-radius:0px;
 +
border:thin solid black;
 +
}
 +
 +
 +
.teaminfolink{
 +
position:absolute;
 +
top:3450px;
 +
left:520px;
 +
}
 +
 +
.teaminfolink a{
 +
text-decoration:none;
 +
color:grey;
 +
}
 +
 +
.teaminfolink a p{
 +
font-size:14px;
 +
}
 +
 +
.teaminfolink a:hover{
 +
text-decoration:none;
 +
color:black;
 +
}
 +
 +
.footerbg_team{
 +
position:absolute;
 +
top:3500px;
 +
left:0px;
 +
width:100%;
 +
height:100px;
 +
background-color:#424243;
 +
z-index:2;
 +
background-repeat:no-repeat;
 +
}
 +
 +
.copyright{
 +
position:absolute;
 +
bottom:5px;
 +
left:400px;
 +
}
 +
.copyright a,visited{
 +
color:#a2a1a1;
 +
}
 +
 +
.copyright a:hover{
 +
color:#c7c6c6;
 +
}
 +
 +
.copyright p{
 +
font-size:12px;
 +
color:#807f7f;
 +
font-family:Open sans, Helvetica, Arial;
 +
font-weight:400;
 +
}
 +
 +
.nav2{
 +
position:absolute;
 +
top:10px;
 +
left:280px;
 +
 +
}
 +
.nav2table{
 +
background-color:#424243;
 +
color:#807f7f;
 +
}
 +
.nav2 a,visited{
 +
color:#d6d5d5;
 +
font-size:12px;
 +
text-decoration:none;
 +
padding:10px;
 +
}
 +
 +
.nav2 a:hover{
 +
color:#ffffff;
 +
font-size:12px;
 +
font-weight:500;
 +
text-decoration:none;
 +
padding:10px;
 +
}
 +
 +
 +
 +
</style>
</style>
</html>
</html>

Latest revision as of 02:33, 18 October 2014