Template:Team:HokkaidoU Japan/Book/CSS

From 2014.igem.org

(Difference between revisions)
 
(46 intermediate revisions not shown)
Line 21: Line 21:
.container {
.container {
height: 100%;
height: 100%;
 +
        margin-top:0;
}
}
Line 192: Line 193:
.bb-bookblock {
.bb-bookblock {
width: 960px;
width: 960px;
-
height: 600px;
+
height: 960px;
-
margin: 0 auto;
+
margin: 10px auto;
position: relative;
position: relative;
z-index: 100;
z-index: 100;
Line 202: Line 203:
-moz-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
backface-visibility: hidden;
-
        margin-top:20px;
 
}
}
Line 213: Line 213:
-moz-transition-property: -moz-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
transition-property: transform;
-
         font-family: 'Walter Turncoat', cursive;
+
         font-family: 'Special Elite', cursive;
}
}
Line 300: Line 300:
height: 100%;
height: 100%;
opacity: 0;
opacity: 0;
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
.bb-flipoverlay {
.bb-flipoverlay {
background-color: rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.2);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
Line 336: Line 336:
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {
.bb-vertical .bb-flip-initial {
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
-webkit-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
Line 346: Line 346:
-moz-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
transform: rotateY(0deg);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
Line 354: Line 354:
-moz-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
transform: rotateX(180deg);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
-
 
+
}
}
Line 362: Line 361:
-moz-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
transform: rotateX(0deg);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
Line 369: Line 368:
-moz-transform: rotateY(-15deg);
-moz-transform: rotateY(-15deg);
transform: rotateY(-15deg);
transform: rotateY(-15deg);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
Line 376: Line 375:
-moz-transform: rotateY(-165deg);
-moz-transform: rotateY(-165deg);
transform: rotateY(-165deg);
transform: rotateY(-165deg);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
Line 383: Line 382:
-moz-transform: rotateX(15deg);
-moz-transform: rotateX(15deg);
transform: rotateX(15deg);
transform: rotateX(15deg);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
Line 390: Line 389:
-moz-transform: rotateX(165deg);
-moz-transform: rotateX(165deg);
transform: rotateX(165deg);
transform: rotateX(165deg);
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
.bb-item {
.bb-item {
width: 100%;
width: 100%;
-
height: 100%;
+
        position: absolute;
-
position: absolute;
+
        top: 0;
-
top: 0;
+
        left: 0;
-
left: 0;
+
         display:none;
         display:none;
-
        font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
}
}
Line 419: Line 417:
width: 960px;
width: 960px;
position: relative;
position: relative;
-
margin: 0 auto 40px;
+
margin: 0 auto;
text-align: center;
text-align: center;
}
}
Line 471: Line 469:
     height: auto;
     height: auto;
     position: absolute;
     position: absolute;
-
     top:50px;
+
     top:0;
}
}
Line 488: Line 486:
     height: auto;
     height: auto;
     position:absolute;
     position:absolute;
-
     top:50px;
+
     top:0;
     text-align:left;
     text-align:left;
}
}
Line 496: Line 494:
     font-size: 40px;
     font-size: 40px;
     font-weight: bold;
     font-weight: bold;
-
    font-family: 'Walter Turncoat', cursive;
+
font-family: 'Special Elite', cursive;
     position:relative;
     position:relative;
     top:-600px;
     top:-600px;
Line 516: Line 514:
.book-index ul {
.book-index ul {
     list-style: none;
     list-style: none;
 +
    line-height:30px;
}
}
Line 538: Line 537:
.top-picture {
.top-picture {
     width: 100%;
     width: 100%;
-
     height: 101%;
+
     height: 100%;
}
}
Line 567: Line 566:
.left-up {
.left-up {
     float:left;
     float:left;
-
     width:160px;
+
     width:200px;
     position: relative;
     position: relative;
     left:100%;
     left:100%;
-
     margin:0 30px;
+
     margin:0 20px;
 +
    top:0px;
}
}
.right-up {
.right-up {
     float:left;
     float:left;
-
     width:160px;
+
     width:200px;
     position: relative;
     position: relative;
     left:100%;
     left:100%;
-
     margin:0 30px;
+
     margin:0 10px;
-
 
+
    top:0px;
}
}
.left-bottom {
.left-bottom {
     float:left;
     float:left;
-
     width:160px;
+
     width:200px;
     position: relative;
     position: relative;
     left:100%;
     left:100%;
-
     margin:0 30px;
+
     margin:0 20px;
-
     top:-30px;
+
     top:-21px;
}
}
.right-bottom {
.right-bottom {
     float:left;
     float:left;
-
     width:160px;
+
     width:200px;
     position: relative;
     position: relative;
     left:100%;
     left:100%;
-
     margin:0 30px;
+
     margin:0 10px;
-
     top:-30px;
+
     top:-21px;
}
}
.character-pic {
.character-pic {
-
     width:160px;
+
     width:145px;
 +
    position:relative;
 +
    left:20px;
 +
    top:5px;
}
}
 +
.picture-fin {
 +
    width:350px;
 +
    position:relative;
 +
    left:500px;
 +
 +
}
 +
 +
.picture-last {
 +
    width:70%;
 +
    position:relative;
 +
    top:150px;
 +
}
 +
 +
.index-left {
 +
    float:left;
 +
    width:50%;
 +
    position:absolute;
 +
    top:60px;
 +
    left:100px;
 +
}
 +
 +
.index-right {
 +
    float:left;
 +
    width:50%;
 +
    position:absolute;
 +
    left:530px;
 +
    top:60px;
 +
}
 +
 +
.text-box {
 +
    width:75%;
 +
    margin:130px auto;
 +
    font-size:20px;
 +
}
 +
 +
.text-box > p {
 +
    line-height:45px;
 +
}
 +
 +
.bb-custom-wrapper nav {
 +
    position: absolute;
 +
    bottom: 0; left: -100px;
 +
    margin: 0;
 +
    padding: 0;
 +
    width: 1160px;
 +
    height: 960px;
 +
    z-index: 1000;
 +
}
 +
 +
#bb-nav-next {
 +
    position: absolute;
 +
    top: 0; right: 0;
 +
    width: 580px;
 +
    height: 960px;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 +
#bb-nav-prev {
 +
    position: absolute;
 +
    top: 0; left: 0;
 +
    width: 580px;
 +
    height: 960px;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 +
#bb-nav-next i {
 +
    position: absolute;
 +
    top: 480px; right: 50px;
 +
    margin: -18px -6px 0 0;
 +
    padding: 0;
 +
}
 +
 +
#bb-nav-prev i {
 +
    position: absolute;
 +
    top: 480px; left: 50px;
 +
    margin: -18px 0 0 -6px;
 +
    padding: 0;
 +
}
 +
 
 +
.bb-page,
 +
.bb-item,
 +
.left-page-top,
 +
.right-page-top,
 +
.bb-flip-prev,
 +
.bb-flip-next,
 +
.bb-flip-prev-end,
 +
.bb-flip-next-end,
 +
.bb-flip-initial,
 +
.bb-front,
 +
.bb-back,
 +
.bb-flipoverlay
 +
{
 +
    height: 600px !important;
 +
}
 +
 +
.bb-item,
 +
.bb-page {
 +
    margin: 180px 0;
 +
}
/* No JS */
/* No JS */

Latest revision as of 17:41, 17 October 2014