Team:UESTC Life/css/style.css
From 2013.igem.org
Neptune Yu (Talk | contribs) |
Neptune Yu (Talk | contribs) |
||
Line 4: | Line 4: | ||
} | } | ||
body{ | body{ | ||
- | background:#ccc url( | + | background:#ccc url(../images/wood.jpg) repeat top left; |
font-family: Arial, Helvetica, sans-serif; | font-family: Arial, Helvetica, sans-serif; | ||
color:#444; | color:#444; | ||
Line 41: | Line 41: | ||
} | } | ||
.booklet .b-wrap-left { | .booklet .b-wrap-left { | ||
- | background:#fff url( | + | background:#fff url(../images/left_bg.jpg) no-repeat top left; |
-webkit-border-top-left-radius: 10px; | -webkit-border-top-left-radius: 10px; | ||
-webkit-border-bottom-left-radius: 10px; | -webkit-border-bottom-left-radius: 10px; | ||
Line 50: | Line 50: | ||
} | } | ||
.booklet .b-wrap-right { | .booklet .b-wrap-right { | ||
- | background:#efefef url( | + | background:#efefef url(../images/right_bg.jpg) no-repeat top left; |
-webkit-border-top-right-radius: 10px; | -webkit-border-top-right-radius: 10px; | ||
-webkit-border-bottom-right-radius: 10px; | -webkit-border-bottom-right-radius: 10px; | ||
Line 78: | Line 78: | ||
margin:0 auto; | margin:0 auto; | ||
padding-top:50px; | padding-top:50px; | ||
- | width: | + | width:905px; |
- | height: | + | height:540px; |
- | + | ||
position:relative; | position:relative; | ||
- | background:transparent url( | + | background:transparent url(../images/bg.png) no-repeat 9px 27px; |
} | } | ||
.book_wrapper h1{ | .book_wrapper h1{ | ||
Line 88: | Line 87: | ||
margin:5px 5px 5px 15px; | margin:5px 5px 5px 15px; | ||
font-size:26px; | font-size:26px; | ||
- | background:transparent url( | + | background:transparent url(../images/h1.png) no-repeat bottom left; |
padding-bottom:7px; | padding-bottom:7px; | ||
} | } | ||
Line 97: | Line 96: | ||
.book_wrapper a.article, | .book_wrapper a.article, | ||
.book_wrapper a.demo{ | .book_wrapper a.demo{ | ||
- | background:transparent url( | + | background:transparent url(../images/circle.png) no-repeat 50% 0px; |
display:block; | display:block; | ||
width:95px; | width:95px; | ||
Line 129: | Line 128: | ||
border:1px solid #E6E3C2; | border:1px solid #E6E3C2; | ||
} | } | ||
- | + | a#next_page_button, | |
+ | a#prev_page_button{ | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | width:41px; | ||
+ | height:40px; | ||
+ | cursor:pointer; | ||
+ | margin-top:-20px; | ||
+ | top:50%; | ||
+ | background:transparent url(../images/buttons.png) no-repeat 0px -40px; | ||
+ | } | ||
+ | a#prev_page_button{ | ||
+ | left:-30px; | ||
+ | } | ||
+ | a#next_page_button{ | ||
+ | right:-30px; | ||
+ | background-position:-41px -40px; | ||
+ | } | ||
+ | a#next_page_button:hover{ | ||
+ | background-position:-41px 0px; | ||
+ | } | ||
+ | a#prev_page_button:hover{ | ||
+ | background-position:0px 0px; | ||
+ | } | ||
.loading{ | .loading{ | ||
width:160px; | width:160px; | ||
Line 141: | Line 163: | ||
padding-left:60px; | padding-left:60px; | ||
font-size:15px; | font-size:15px; | ||
- | background: #000 url( | + | background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%; |
opacity: 0.7; | opacity: 0.7; | ||
z-index:9999; | z-index:9999; |
Revision as of 14:54, 26 August 2013
- {
margin:0; padding:0; } body{ background:#ccc url(../images/wood.jpg) repeat top left; font-family: Arial, Helvetica, sans-serif; color:#444; font-size:12px; color: #000; } h1{ color:#2F1B0C; font-size:40px; margin:20px 0px 0px 20px; } span.reference{ font-family:Arial; display:block; font-size:12px; text-align:center; margin-bottom:10px; } span.reference a{ color:#000; text-transform:uppercase; text-decoration:none; margin:0px 20px; } span.reference a:hover{ color:#ddd; } /* Booklet jQuery Plugin Style*/ .booklet{ -moz-box-shadow:0px 0px 1px #fff; -webkit-box-shadow:0px 0px 1px #fff; box-shadow:0px 0px 1px #fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .booklet .b-wrap-left { background:#fff url(../images/left_bg.jpg) no-repeat top left; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft:10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .booklet .b-wrap-right { background:#efefef url(../images/right_bg.jpg) no-repeat top left; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .booklet .b-counter { bottom:10px; position:absolute; display:block; width:90%; height:20px; border-top:1px solid #ddd; color:#222; text-align:center; font-size:12px; padding:5px 0 0; background:transparent; -moz-box-shadow:0px -1px 1px #fff; -webkit-box-shadow:0px -1px 1px #fff; box-shadow:0px -1px 1px #fff; opacity:0.8; } .book_wrapper{ margin:0 auto; padding-top:50px; width:905px; height:540px; position:relative; background:transparent url(../images/bg.png) no-repeat 9px 27px; } .book_wrapper h1{ color:#13386a; margin:5px 5px 5px 15px; font-size:26px; background:transparent url(../images/h1.png) no-repeat bottom left; padding-bottom:7px; } .book_wrapper p{ font-size:16px; margin:5px 5px 5px 15px; } .book_wrapper a.article, .book_wrapper a.demo{ background:transparent url(../images/circle.png) no-repeat 50% 0px; display:block; width:95px; height:41px; text-decoration:none; outline:none; font-size:16px; color:#555; float:left; line-height:41px; padding-left:47px; } .book_wrapper a.demo{ margin-left:50px; } .book_wrapper a.article:hover, .book_wrapper a.demo:hover{ background-position:50% -41px; color:#13386a; } .book_wrapper img{ margin:10px 0px 5px 35px; width:300px; padding:4px; border:1px solid #ddd; -moz-box-shadow:1px 1px 1px #fff; -webkit-box-shadow:1px 1px 1px #fff; box-shadow:1px 1px 1px #fff; } .booklet .b-wrap-right img{ border:1px solid #E6E3C2; } a#next_page_button, a#prev_page_button{ display:none; position:absolute; width:41px; height:40px; cursor:pointer; margin-top:-20px; top:50%; background:transparent url(../images/buttons.png) no-repeat 0px -40px; } a#prev_page_button{ left:-30px; } a#next_page_button{ right:-30px; background-position:-41px -40px; } a#next_page_button:hover{ background-position:-41px 0px; } a#prev_page_button:hover{ background-position:0px 0px; } .loading{ width:160px; height:56px; position: absolute; top:50%; margin-top:-28px; right:135px; line-height:56px; color:#fff; padding-left:60px; font-size:15px; background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%; opacity: 0.7; z-index:9999; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }