Template:Team:HokkaidoU Japan/CSS

From 2014.igem.org

(Difference between revisions)
 
(19 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:HokkaidoU_Japan/Common/CSS}}
<html>
<html>
<style type="text/css">
<style type="text/css">
-
 
-
body {
 
-
  background: #ffffff;
 
-
}
 
-
 
-
#globalWrapper {
 
-
  position: absolute;
 
-
  top: 0;
 
-
  left: 0;
 
-
  width: 100%;
 
-
  height: 100%;
 
-
  margin: 0;
 
-
  padding: 0;
 
-
  border: 0;
 
-
  font-size: 100%;
 
-
}
 
-
 
-
#content {
 
-
  position: absolute;
 
-
  top: 0;
 
-
  left: 0;
 
-
  width: 100%;
 
-
  height: 100%;
 
-
  margin: 0;
 
-
  padding: 0;
 
-
  border: 0;
 
-
  font-size: 100%;
 
-
}
 
-
 
-
#bodyContent {
 
-
  position: absolute;
 
-
  top: 0;
 
-
  left: 0;
 
-
  width: 100%;
 
-
  height: 100%;
 
-
  margin: 0;
 
-
  padding: 0;
 
-
  border: 0;
 
-
  font-size: 100%;
 
-
}
 
-
 
-
#p-logo {
 
-
  display: none;
 
-
}
 
-
 
-
#footer-box {
 
-
  display: none;
 
-
}
 
-
 
-
#catlinks {
 
-
  display: none;
 
-
}
 
-
 
-
.firstHeading {
 
-
  display: none;
 
-
}
 
-
 
-
#search-controls {
 
-
  display: none;
 
-
}
 
-
 
-
#top-section {
 
-
  border: none;
 
-
}
 
-
 
-
html {
 
-
  overflow-y: scroll;
 
-
}
 
-
 
-
body {
 
-
  font-size: 18px;
 
-
  line-height: 28px;
 
-
  text-align: justify;
 
-
}
 
-
 
-
h1, h2, h3, h4, h5, h6 {
 
-
  font-family: 'Rosario', sans-serif;
 
-
}
 
-
 
-
ul, ol {
 
-
  margin-left: 40px;
 
-
}
 
-
 
-
th, td {
 
-
  padding: 0 10px;
 
-
}
 
-
 
-
th {
 
-
  font-family: 'Rosario', sans-serif;
 
-
}
 
-
 
-
dt {
 
-
  margin-left: 20px;
 
-
}
 
-
 
-
dd {
 
-
  margin-left: 60px;
 
-
}
 
-
 
-
#background {
 
-
  position: absolute;
 
-
  top: 0;
 
-
  width: 100%;
 
-
  margin: 0;
 
-
  padding: 0;
 
-
}
 
-
 
-
.wrapper {
 
-
  width: 960px;
 
-
  margin: 0 auto 0;
 
-
}
 
-
 
-
.clearfix {
 
-
  clear: both;
 
-
  height: 0;
 
-
}
 
-
 
-
#hokkaidou-contents {
 
-
  font-family: 'Open Sans', sans-serif;
 
-
  width: 880px;
 
-
  margin: 60px auto 0;
 
-
}
 
-
#hokkaidou-contents h1 {
 
-
  font-size: 44px;
 
-
  line-height: 52px;
 
-
  margin: 90px 0 20px;
 
-
}
 
-
#hokkaidou-contents h2 {
 
-
  font-size: 32px;
 
-
  line-height: 40px;
 
-
  margin: 50px 0 10px;
 
-
}
 
-
#hokkaidou-contents h3 {
 
-
  font-size: 22px;
 
-
  line-height: 28px;
 
-
  margin: 30px 0 10px;
 
-
}
 
-
#hokkaidou-contents p {
 
-
  margin: 30px 0 0;
 
-
}
 
-
#hokkaidou-contents p:first-letter {
 
-
  margin-left: 20px;
 
-
}
 
-
#hokkaidou-contents h1 + p, #hokkaidou-contents h2 + p, #hokkaidou-contents h3 + p {
 
-
  margin: 0;
 
-
}
 
-
#hokkaidou-contents sup {
 
-
  vertical-align: super;
 
-
  font-size: smaller;
 
-
}
 
-
#hokkaidou-contents .fig {
 
-
  float: right;
 
-
  padding: 30px;
 
-
}
 
-
#hokkaidou-contents .fig div {
 
-
  font-size: 14px;
 
-
  line-height: 20px;
 
-
  padding-top: 20px;
 
-
  text-align: center;
 
-
}
 
-
#hokkaidou-contents .fig200 {
 
-
  width: 160px;
 
-
}
 
-
#hokkaidou-contents .fig200 img {
 
-
  width: 160px;
 
-
}
 
-
#hokkaidou-contents .fig300 {
 
-
  width: 260px;
 
-
}
 
-
#hokkaidou-contents .fig300 img {
 
-
  width: 260px;
 
-
}
 
-
#hokkaidou-contents .fig400 {
 
-
  width: 360px;
 
-
}
 
-
#hokkaidou-contents .fig400.para {
 
-
  float: left;
 
-
  padding: 30px 40px;
 
-
}
 
-
#hokkaidou-contents .fig400 img {
 
-
  width: 360px;
 
-
}
 
-
#hokkaidou-contents .fig800 {
 
-
  float: none;
 
-
  width: 800px;
 
-
  margin: 30px auto;
 
-
}
 
-
#hokkaidou-contents .fig800 img {
 
-
  width: 800px;
 
-
}
 
-
#hokkaidou-contents .citation-list {
 
-
  margin-top: 40px;
 
-
}
 
-
 
-
#top_header {
 
-
  width: 100%;
 
-
  height: 130px;
 
-
  background-color: black;
 
-
}
 
-
 
-
#top_univ {
 
-
  position: relative;
 
-
  text-align:center;
 
-
  margin: 0 auto;
 
-
  font-size: 30px;
 
-
  top: 45px;
 
-
}
 
-
 
-
#top_button {
 
-
  position: relative;
 
-
  width: 640px;
 
-
  top: 55px;
 
-
  background:transparent;
 
-
  color: red;
 
-
  text-align: center;
 
-
  margin: 0 auto;
 
-
}
 
-
 
-
#top_button ul {
 
-
  text-align:center;
 
-
  margin: 0 auto;
 
-
}
 
-
 
-
#top_button li {
 
-
  position: relative;
 
-
  display: inline-block;
 
-
  margin-right: 10px;
 
-
  margin-left: 10px;
 
-
}
 
-
 
-
#top_button a {
 
-
  display: block;
 
-
}
 
-
 
-
 
-
#top_logo_snow {
 
-
  position: relative;
 
-
  margin: 0 auto;
 
-
  left: 30px;
 
-
  background-image: url ()
 
-
}
 
-
 
-
/* book block*/
 
-
 
-
/* General Demo Style */
 
-
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 
-
 
-
@font-face {
 
-
font-family: 'codropsicons';
 
-
src:url('../fonts/codropsicons/codropsicons.eot');
 
-
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
 
-
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
 
-
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
 
-
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 
-
font-weight: normal;
 
-
font-style: normal;
 
-
}
 
-
 
-
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 
-
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
 
-
 
-
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
 
-
.clearfix:before, .clearfix:after { content: " "; display: table; }
 
-
.clearfix:after { clear: both; }
 
-
 
-
body {
 
-
font-family: 'Lato', Calibri, Arial, sans-serif;
 
-
color: #777;
 
-
background: #f6f6f6;
 
-
}
 
-
 
-
a {
 
-
color: #555;
 
-
text-decoration: none;
 
-
outline: none;
 
-
}
 
-
 
-
a:hover,
 
-
a:active {
 
-
color: #777;
 
-
}
 
-
 
-
a img {
 
-
border: none;
 
-
}
 
-
 
-
/* Header Style */
 
-
.main,
 
-
.container > header {
 
-
margin: 0 auto;
 
-
padding: 2em;
 
-
}
 
-
 
-
.container {
 
-
height: 100%;
 
-
}
 
-
 
-
.container > header {
 
-
text-align: center;
 
-
background: rgba(0,0,0,0.01);
 
-
}
 
-
 
-
.container > header h1 {
 
-
font-size: 2.625em;
 
-
line-height: 1.3;
 
-
margin: 0;
 
-
font-weight: 300;
 
-
}
 
-
 
-
.container > header span {
 
-
display: block;
 
-
font-size: 60%;
 
-
opacity: 0.3;
 
-
padding: 0 0 0.6em 0.1em;
 
-
}
 
-
 
-
/* Main Content */
 
-
.main {
 
-
max-width: 69em;
 
-
}
 
-
 
-
.column {
 
-
float: left;
 
-
width: 50%;
 
-
padding: 0 2em;
 
-
min-height: 300px;
 
-
position: relative;
 
-
}
 
-
 
-
.column:nth-child(2) {
 
-
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
 
-
}
 
-
 
-
.column p {
 
-
font-weight: 300;
 
-
font-size: 2em;
 
-
padding: 0;
 
-
margin: 0;
 
-
text-align: right;
 
-
line-height: 1.5;
 
-
}
 
-
 
-
/* To Navigation Style */
 
-
.codrops-top {
 
-
background: #fff;
 
-
background: rgba(255, 255, 255, 0.6);
 
-
text-transform: uppercase;
 
-
width: 100%;
 
-
font-size: 0.69em;
 
-
line-height: 2.2;
 
-
}
 
-
 
-
.codrops-top a {
 
-
padding: 0 1em;
 
-
letter-spacing: 0.1em;
 
-
color: #888;
 
-
display: inline-block;
 
-
}
 
-
 
-
.codrops-top a:hover {
 
-
background: rgba(255,255,255,0.95);
 
-
color: #333;
 
-
}
 
-
 
-
.codrops-top span.right {
 
-
float: right;
 
-
}
 
-
 
-
.codrops-top span.right a {
 
-
float: left;
 
-
display: block;
 
-
}
 
-
 
-
.codrops-icon:before {
 
-
font-family: 'codropsicons';
 
-
margin: 0 4px;
 
-
speak: none;
 
-
font-style: normal;
 
-
font-weight: normal;
 
-
font-variant: normal;
 
-
text-transform: none;
 
-
line-height: 1;
 
-
-webkit-font-smoothing: antialiased;
 
-
}
 
-
 
-
.codrops-icon-drop:before {
 
-
content: "\e001";
 
-
}
 
-
 
-
.codrops-icon-prev:before {
 
-
content: "\e004";
 
-
}
 
-
 
-
.codrops-icon-archive:before {
 
-
content: "\e002";
 
-
}
 
-
 
-
.codrops-icon-next:before {
 
-
content: "\e000";
 
-
}
 
-
 
-
.codrops-icon-about:before {
 
-
content: "\e003";
 
-
}
 
-
 
-
/* Demo Buttons Style */
 
-
.codrops-demos {
 
-
padding-top: 1em;
 
-
font-size: 0.9em;
 
-
}
 
-
 
-
.codrops-demos a {
 
-
display: inline-block;
 
-
margin: 0.2em;
 
-
padding: 0.45em 1em;
 
-
background: #999;
 
-
color: #fff;
 
-
font-weight: 700;
 
-
border-radius: 2px;
 
-
}
 
-
 
-
.codrops-demos a:hover,
 
-
.codrops-demos a.current-demo,
 
-
.codrops-demos a.current-demo:hover {
 
-
opacity: 0.6;
 
-
}
 
-
 
-
.codrops-nav {
 
-
text-align: center;
 
-
}
 
-
 
-
.codrops-nav a {
 
-
display: inline-block;
 
-
margin: 20px auto;
 
-
padding: 0.3em;
 
-
}
 
-
 
-
/* Demo Styles */
 
-
 
-
.demo-1 body {
 
-
color: #87968e;
 
-
background: #fff2e3;
 
-
}
 
-
 
-
.demo-1 a {
 
-
color: #72b890;
 
-
}
 
-
 
-
.demo-1 .codrops-demos a {
 
-
background: #72b890;
 
-
color: #fff;
 
-
}
 
-
 
-
.demo-2 body {
 
-
color: #fff;
 
-
background: #c05d8e;
 
-
}
 
-
 
-
.demo-2 a {
 
-
color: #d38daf;
 
-
}
 
-
 
-
.demo-2 a:hover,
 
-
.demo-2 a:active {
 
-
color: #fff;
 
-
}
 
-
 
-
.demo-2 .codrops-demos a {
 
-
background: #883b61;
 
-
color: #fff;
 
-
}
 
-
 
-
.demo-2 .codrops-top a:hover {
 
-
background: rgba(255,255,255,0.3);
 
-
color: #333;
 
-
}
 
-
 
-
.demo-3 body {
 
-
color: #87968e;
 
-
background: #fff2e3;
 
-
}
 
-
 
-
.demo-3 a {
 
-
color: #ea5381;
 
-
}
 
-
 
-
.demo-3 .codrops-demos a {
 
-
background: #ea5381;
 
-
color: #fff;
 
-
}
 
-
 
-
.demo-4 body {
 
-
color: #999;
 
-
background: #fff2e3;
 
-
overflow: hidden;
 
-
}
 
-
 
-
.demo-4 a {
 
-
color: #1baede;
 
-
}
 
-
 
-
.demo-4 a:hover,
 
-
.demo-4 a:active {
 
-
opacity: 0.6;
 
-
}
 
-
 
-
.demo-4 .codrops-demos a {
 
-
background: #1baede;
 
-
color: #fff;
 
-
}
 
-
 
-
.demo-5 body {
 
-
background: #fffbd6;
 
-
}
 
-
 
-
 
-
@media screen and (max-width: 46.0625em) {
 
-
.column {
 
-
width: 100%;
 
-
min-width: auto;
 
-
min-height: auto;
 
-
padding: 1em;
 
-
}
 
-
 
-
.column p {
 
-
text-align: left;
 
-
font-size: 1.5em;
 
-
}
 
-
 
-
.column:nth-child(2) {
 
-
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
 
-
}
 
-
}
 
-
 
-
@media screen and (max-width: 25em) {
 
-
 
-
.codrops-icon span {
 
-
display: none;
 
-
}
 
-
 
-
}
 
-
 
-
.bb-bookblock {
 
-
width: 400px;
 
-
height: 300px;
 
-
margin: 0 auto;
 
-
position: relative;
 
-
z-index: 100;
 
-
-webkit-perspective: 1300px;
 
-
-moz-perspective: 1300px;
 
-
perspective: 1300px;
 
-
-webkit-backface-visibility: hidden;
 
-
-moz-backface-visibility: hidden;
 
-
backface-visibility: hidden;
 
-
}
 
-
 
-
.bb-page {
 
-
position: absolute;
 
-
-webkit-transform-style: preserve-3d;
 
-
-moz-transform-style: preserve-3d;
 
-
transform-style: preserve-3d;
 
-
-webkit-transition-property: -webkit-transform;
 
-
-moz-transition-property: -moz-transform;
 
-
transition-property: transform;
 
-
}
 
-
 
-
.bb-vertical .bb-page {
 
-
width: 50%;
 
-
height: 100%;
 
-
left: 50%;
 
-
-webkit-transform-origin: left center;
 
-
-moz-transform-origin: left center;
 
-
transform-origin: left center;
 
-
}
 
-
 
-
.bb-horizontal .bb-page {
 
-
width: 100%;
 
-
height: 50%;
 
-
top: 50%;
 
-
-webkit-transform-origin: center top;
 
-
-moz-transform-origin: center top;
 
-
transform-origin: center top;
 
-
}
 
-
 
-
.bb-page > div,
 
-
.bb-outer,
 
-
.bb-content,
 
-
.bb-inner {
 
-
position: absolute;
 
-
height: 100%;
 
-
width: 100%;
 
-
top: 0;
 
-
left: 0;
 
-
background: #fff;
 
-
}
 
-
 
-
.bb-outer {
 
-
-webkit-backface-visibility: hidden;
 
-
-moz-backface-visibility: hidden;
 
-
backface-visibility: hidden;
 
-
}
 
-
 
-
.bb-vertical .bb-content {
 
-
width: 200%;
 
-
}
 
-
 
-
.bb-horizontal .bb-content {
 
-
height: 200%;
 
-
}
 
-
 
-
.bb-page > div {
 
-
width: 100%;
 
-
-webkit-transform-style: preserve-3d;
 
-
-moz-transform-style: preserve-3d;
 
-
transform-style: preserve-3d;
 
-
}
 
-
 
-
.bb-page > div:not(:only-child) {
 
-
-webkit-backface-visibility: hidden;
 
-
-moz-backface-visibility: hidden;
 
-
backface-visibility: hidden;
 
-
}
 
-
 
-
.bb-vertical .bb-back {
 
-
-webkit-transform: rotateY(-180deg);
 
-
-moz-transform: rotateY(-180deg);
 
-
transform: rotateY(-180deg);
 
-
}
 
-
 
-
.bb-horizontal .bb-back {
 
-
-webkit-transform: rotateX(-180deg);
 
-
-moz-transform: rotateX(-180deg);
 
-
transform: rotateX(-180deg);
 
-
}
 
-
 
-
.bb-outer {
 
-
width: 100%;
 
-
overflow: hidden;
 
-
z-index: 999;
 
-
}
 
-
 
-
.bb-overlay,
 
-
.bb-flipoverlay {
 
-
background-color: rgba(0, 0, 0, 0.7);
 
-
position: absolute;
 
-
top: 0px;
 
-
left: 0px;
 
-
width: 100%;
 
-
height: 100%;
 
-
opacity: 0;
 
-
}
 
-
 
-
.bb-flipoverlay {
 
-
background-color: rgba(0, 0, 0, 0.2);
 
-
}
 
-
 
-
/* */
 
-
 
-
.bb-bookblock.bb-vertical > div.bb-page:first-child,
 
-
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
 
-
-webkit-transform: rotateY(180deg);
 
-
-moz-transform: rotateY(180deg);
 
-
transform: rotateY(180deg);
 
-
}
 
-
 
-
.bb-bookblock.bb-horizontal > div.bb-page:first-child,
 
-
.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
 
-
-webkit-transform: rotateX(180deg);
 
-
-moz-transform: rotateX(180deg);
 
-
transform: rotateX(180deg);
 
-
}
 
-
 
-
/* Content display */
 
-
.bb-vertical .bb-front .bb-content {
 
-
left: -100%;
 
-
}
 
-
 
-
.bb-horizontal .bb-front .bb-content {
 
-
top: -100%;
 
-
}
 
-
 
-
/* Flipping classes */
 
-
.bb-vertical .bb-flip-next,
 
-
.bb-vertical .bb-flip-initial {
 
-
-webkit-transform: rotateY(-180deg);
 
-
-moz-transform: rotateY(-180deg);
 
-
transform: rotateY(-180deg);
 
-
}
 
-
 
-
.bb-vertical .bb-flip-prev {
 
-
-webkit-transform: rotateY(0deg);
 
-
-moz-transform: rotateY(0deg);
 
-
transform: rotateY(0deg);
 
-
}
 
-
 
-
.bb-horizontal .bb-flip-next,
 
-
.bb-horizontal .bb-flip-initial {
 
-
-webkit-transform: rotateX(180deg);
 
-
-moz-transform: rotateX(180deg);
 
-
transform: rotateX(180deg);
 
-
}
 
-
 
-
.bb-horizontal .bb-flip-prev {
 
-
-webkit-transform: rotateX(0deg);
 
-
-moz-transform: rotateX(0deg);
 
-
transform: rotateX(0deg);
 
-
}
 
-
 
-
.bb-vertical .bb-flip-next-end {
 
-
-webkit-transform: rotateY(-15deg);
 
-
-moz-transform: rotateY(-15deg);
 
-
transform: rotateY(-15deg);
 
-
}
 
-
 
-
.bb-vertical .bb-flip-prev-end {
 
-
-webkit-transform: rotateY(-165deg);
 
-
-moz-transform: rotateY(-165deg);
 
-
transform: rotateY(-165deg);
 
-
}
 
-
 
-
.bb-horizontal .bb-flip-next-end {
 
-
-webkit-transform: rotateX(15deg);
 
-
-moz-transform: rotateX(15deg);
 
-
transform: rotateX(15deg);
 
-
}
 
-
 
-
.bb-horizontal .bb-flip-prev-end {
 
-
-webkit-transform: rotateX(165deg);
 
-
-moz-transform: rotateX(165deg);
 
-
transform: rotateX(165deg);
 
-
}
 
-
 
-
.bb-item {
 
-
width: 100%;
 
-
height: 100%;
 
-
position: absolute;
 
-
top: 0;
 
-
left: 0;
 
-
display: none;
 
-
background: #fff;
 
-
}
 
-
 
-
/* No JS */
 
-
.no-js .bb-bookblock,
 
-
.no-js ul.bb-custom-grid li {
 
-
width: auto;
 
-
height: auto;
 
-
}
 
-
 
-
.no-js .bb-item {
 
-
display: block;
 
-
position: relative;
 
-
}
 
-
 
-
 
</style>
</style>
</html>
</html>

Latest revision as of 12:51, 13 October 2014