Template:CSS/team

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<style rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
-
@font-face {
 
-
  font-family: 'Bitter';
 
-
  font-style: normal;
 
-
  font-weight: 400;
 
-
  src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/2PcBT6-VmYhQCus-O11S5-vvDin1pK8aKteLpeZ5c0A.woff) format('woff');
 
-
}
 
-
@font-face {
 
-
  font-family: 'Bitter';
 
-
  font-style: normal;
 
-
  font-weight: 700;
 
-
  src: local('Bitter-Bold'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/evC1haE-MsorTl_A7_uSGbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
 
-
}
 
-
 
-
 
-
@font-face {
 
-
font-family: 'Droid Sans';
 
-
font-style: normal;
 
-
font-weight: 400;
 
-
src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
 
-
}
 
-
 
-
@font-face {
 
-
font-family: 'Droid Sans';
 
-
font-style: normal;
 
-
font-weight: 700;
 
-
src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
 
-
}
 
-
 
-
 
body {
body {
-
font-family: 'Droid Sans', Helvetica, sans-serif;
+
font-family:Palatino, Baskerville, Georgia, serif;
-
font-size: 16px;
+
background:#190121;
-
line-height: 18px;
+
margin: 0;
 +
padding: 0;
 +
text-align: center;
 +
color: #000000;
}
}
-
 
+
#container_team {
-
h1, h2, h3, h4, h5, h6 {
+
width: 780px;
-
font-family: 'Bitter', serif;
+
background: #FFFFFF;
-
font-weight: normal;
+
margin: 0 auto;  
-
color: #000;
+
font-size:14px;
-
border-bottom: none;
+
-
margin-bottom: none;
+
text-align: left;  
}
}
-
 
+
#mainContent {
-
h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered {
+
padding: 0 60px;
-
text-align: center;
+
min-height:600px;
 +
line-height:25px
}
}
-
div.clearfix {
+
img {border:0px}
-
content: ".";
+
-
display: block;
+
-
clear: both;
+
-
visibility: hidden;
+
-
line-height: 0;
+
-
height: 0;
+
-
}
+
-
div.twelve.columns.no-pad {
 
-
padding: 0px;
 
-
}
 
-
.off-canvas {
 
-
width: 100%;
 
-
}
 
-
a, a:visited {
 
-
color: #b31b1b;
 
-
text-decoration: none;
 
-
}
 
-
a:hover {
+
/*LINKS*/
-
color: #871414;
+
-
text-decoration: none;
+
-
}
+
 +
#mainContent a:link, #mainContent a:visited {color:#fff; text-decoration:none; font-size:18px; background:#000000; padding:5px; -webkit-border-radius:10px;
 +
-moz-border-radius:10px}
 +
#mainContent a:hover, #mainContent a:active {color:#fff; text-decoration:none; font-size:18px; background:#333333; padding:5px; -webkit-border-radius:10px;
 +
-moz-border-radius:10px}
-
/* -----------------------------------------
 
-
Team Page
 
-
----------------------------------------- */
 
-
div.team-bios-container div.row {
 
-
padding: 0px 0px 10px;
 
-
border-bottom: 1px solid #ddd;
 
-
}
 
-
div.team-bios-container div.last-ele {
+
/*STYLES FOR CSS POPUP*/
-
border-bottom: none;
+
-
}
+
-
div.team-bios-container img {
 
-
              border: 5px solid #005d82;
 
-
  -webkit-transition: all 0.5s ease;
 
-
    -moz-transition: all 0.5s ease;
 
-
      -o-transition: all 0.5s ease;
 
-
      -ms-transition: all 0.5s ease;
 
-
          transition: all 0.5s ease;
 
-
  max-height: 200px;
 
-
          box-shadow: 6px 6px 3px #888888;
 
-
      margin: 20px 0px;
 
-
}
 
-
div.team-bios-container img:hover {
+
#blanket {
-
border-radius: 75%;
+
  background-color:#111;
-
  -webkit-transform: rotate(720deg);
+
  opacity: 0.65;
-
    -moz-transform: rotate(720deg);
+
  *background:none;
-
      -o-transform: rotate(720deg);
+
  position:absolute;
-
      -ms-transform: rotate(720deg);
+
  z-index: 9001;
-
          transform: rotate(720deg);
+
  top:0px;
-
+
  left:0px;
-
+
  width:100%;
}
}
-
 
+
#popUpDiv {
-
div.team-bios-container img.inline {
+
position:absolute;
-
max-height: none;
+
background:url(pop-back.jpg) no-repeat;
 +
width:400px;
 +
height:400px;
 +
border:5px solid #000;
 +
z-index: 9002;
}
}
-
div#grd-members, div#fac-members {
+
#popUpDiv a {position:relative; top:20px; left:20px}
-
margin-top: 80px;
+
-
}
+
-
div.bio-pic-container {
 
-
position: relative;
 
-
margin: 20px 0px;
 
-
height: 166px;
 
-
}
 
-
div.bio-pic-container img {
 
-
position: absolute;
 
-
margin: 0px;
 
-
top: 0px;
 
-
z-index: 2;
 
-
}
 
-
div.bio-pic-container img.bio-pic-bw {
 
-
z-index: 5;
 
-
}
 
-
.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; }
 
-
 
-
[class*="column"] + [class*="column"].end { float: left; }
 
-
 
-
.one, .row .one { width: 8.33333%; }
 
-
 
-
.two, .row .two { width: 16.66667%; }
 
-
 
-
.three, .row .three { width: 25%; }
 
-
 
-
.four, .row .four { width: 33.33333%; }
 
-
 
-
.five, .row .five { width: 41.66667%; }
 
-
 
-
.six, .row .six { width: 50%; }
 
-
 
-
.seven, .row .seven { width: 58.33333%; }
 
-
 
-
.eight, .row .eight { width: 66.66667%; }
 
-
 
-
.nine, .row .nine { width: 75%; }
 
-
 
-
.ten, .row .ten { width: 83.33333%; }
 
-
 
-
.eleven, .row .eleven { width: 91.66667%; }
 
-
 
-
.twelve, .row .twelve { width: 100%; }
 
-
 
-
.row .offset-by-one { margin-left: 8.33333%; }
 
-
 
-
.row .offset-by-two { margin-left: 16.66667%; }
 
-
 
-
.row .offset-by-three { margin-left: 25%; }
 
-
 
-
.row .offset-by-four { margin-left: 33.33333%; }
 
-
 
-
.row .offset-by-five { margin-left: 41.66667%; }
 
-
 
-
.row .offset-by-six { margin-left: 50%; }
 
-
 
-
.row .offset-by-seven { margin-left: 58.33333%; }
 
-
 
-
.row .offset-by-eight { margin-left: 66.66667%; }
 
-
 
-
.row .offset-by-nine { margin-left: 75%; }
 
-
 
-
.row .offset-by-ten { margin-left: 83.33333%; }
 
-
 
-
.push-two { left: 16.66667%; }
 
-
 
-
.pull-two { right: 16.66667%; }
 
-
 
-
.push-three { left: 25%; }
 
-
 
-
.pull-three { right: 25%; }
 
-
 
-
.push-four { left: 33.33333%; }
 
-
 
-
.pull-four { right: 33.33333%; }
 
-
 
-
.push-five { left: 41.66667%; }
 
-
 
-
.pull-five { right: 41.66667%; }
 
-
 
-
.push-six { left: 50%; }
 
-
 
-
.pull-six { right: 50%; }
 
-
 
-
.push-seven { left: 58.33333%; }
 
-
 
-
.pull-seven { right: 58.33333%; }
 
-
 
-
.push-eight { left: 66.66667%; }
 
-
 
-
.pull-eight { right: 66.66667%; }
 
-
 
-
.push-nine { left: 75%; }
 
-
 
-
.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%; }
 
-
 
-
img { -ms-interpolation-mode: bicubic; }
 
-
 
-
#map_canvas img, .map_canvas img { max-width: none!important; }
 
-
 
-
 
-
 
-
 
-
 
</style>
</style>
</html>
</html>

Revision as of 20:14, 24 September 2014