Template:Team:HokkaidoU Japan/Book/CSS
From 2014.igem.org
(Difference between revisions)
(48 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: | + | height: 960px; |
- | margin: | + | 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; | ||
- | |||
} | } | ||
Line 213: | Line 213: | ||
-moz-transition-property: -moz-transform; | -moz-transition-property: -moz-transform; | ||
transition-property: transform; | transition-property: transform; | ||
- | font-family: ' | + | font-family: 'Special Elite', cursive; |
} | } | ||
Line 300: | Line 300: | ||
height: 100%; | height: 100%; | ||
opacity: 0; | opacity: 0; | ||
- | + | 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: '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: '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: 'Special Elite', cursive; | |
} | } | ||
Line 354: | Line 354: | ||
-moz-transform: rotateX(180deg); | -moz-transform: rotateX(180deg); | ||
transform: rotateX(180deg); | transform: rotateX(180deg); | ||
- | + | 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: 'Special Elite', cursive; | |
} | } | ||
Line 369: | Line 368: | ||
-moz-transform: rotateY(-15deg); | -moz-transform: rotateY(-15deg); | ||
transform: rotateY(-15deg); | transform: rotateY(-15deg); | ||
- | + | 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: 'Special Elite', cursive; | |
} | } | ||
Line 383: | Line 382: | ||
-moz-transform: rotateX(15deg); | -moz-transform: rotateX(15deg); | ||
transform: rotateX(15deg); | transform: rotateX(15deg); | ||
- | + | 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: 'Special Elite', cursive; | |
} | } | ||
.bb-item { | .bb-item { | ||
width: 100%; | width: 100%; | ||
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | left: 0; | |
- | + | ||
display:none; | display:none; | ||
- | + | font-family: 'Special Elite', cursive; | |
} | } | ||
Line 419: | Line 417: | ||
width: 960px; | width: 960px; | ||
position: relative; | position: relative; | ||
- | margin: 0 auto | + | margin: 0 auto; |
text-align: center; | text-align: center; | ||
} | } | ||
Line 471: | Line 469: | ||
height: auto; | height: auto; | ||
position: absolute; | position: absolute; | ||
- | top: | + | top:0; |
} | } | ||
Line 488: | Line 486: | ||
height: auto; | height: auto; | ||
position:absolute; | position:absolute; | ||
- | top: | + | 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: '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: | + | height: 100%; |
} | } | ||
Line 567: | Line 566: | ||
.left-up { | .left-up { | ||
float:left; | float:left; | ||
- | width: | + | width:200px; |
position: relative; | position: relative; | ||
left:100%; | left:100%; | ||
+ | margin:0 20px; | ||
+ | top:0px; | ||
} | } | ||
.right-up { | .right-up { | ||
float:left; | float:left; | ||
- | width: | + | width:200px; |
position: relative; | position: relative; | ||
left:100%; | left:100%; | ||
- | + | margin:0 10px; | |
+ | top:0px; | ||
} | } | ||
.left-bottom { | .left-bottom { | ||
float:left; | float:left; | ||
- | width: | + | width:200px; |
position: relative; | position: relative; | ||
left:100%; | left:100%; | ||
- | + | margin:0 20px; | |
+ | top:-21px; | ||
} | } | ||
.right-bottom { | .right-bottom { | ||
float:left; | float:left; | ||
- | width: | + | width:200px; |
position: relative; | position: relative; | ||
left:100%; | left:100%; | ||
- | + | margin:0 10px; | |
+ | top:-21px; | ||
} | } | ||
.character-pic { | .character-pic { | ||
- | width: | + | 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