|
|
Line 1: |
Line 1: |
- | /*----the style of header css----*/ | + | <html> |
- | | + | <style type="text/css"> |
- | *{
| + | <!-- |
- | margin: 0;
| + | #BODY { background-color:white; |
- | padding: 0;
| + | background-image:none;} |
- | text-decoration: none; | + | #p-logo {height:0px; |
| + | overflow:hidden; |
| + | display:none; |
| + | } |
| + | |
| + | #top-section{height:20px; |
| + | margin-top: 0; |
| + | margin-left: auto; |
| + | margin-right: auto; |
| + | margin-bottom: 0!important; |
| + | margin-bottom: 10px; |
| + | padding:0; |
| + | border:none; |
| + | background:#CCCCCC; |
| + | } |
| + | #footer-box { display: none;} |
| + | #catlinks { display: none;} |
| + | #search-controls {display: none;} |
| + | #siteSub {display:none;} |
| + | .firstHeading{display: none;} |
| + | #content {background: #f1f1f1 url(http://luiszuno.com/themes/nova/img/bg/patterns/noise.png); |
| + | width: 100%; |
| + | border-left: 0px; |
| + | border-right: 0px; |
| } | | } |
- | | + | --> |
- | div{
| + | |
- | display: block; | + | |
- | }
| + | |
- | | + | |
- | .clr{
| + | |
- | clear: both;
| + | |
- | }
| + | |
- | | + | |
- | body{
| + | |
- | background-color: black;
| + | |
- | background: url('https://static.igem.org/mediawiki/2012/c/ca/Ustc-software-2012-bg-hex.png');
| + | |
- | margin:0 auto;
| + | |
- | }
| + | |
- | | + | |
- | a {outline: none;} /*for IE image-border and link dashed line bug*/
| + | |
- | a:focus { outline: 0; }
| + | |
- | a:active {star:expression_r(this.onFocus=this.blur());}
| + | |
- | :focus { outline:0; }
| + | |
- | img{display: block;border: none;}
| + | |
- |
| + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | #page_wrapper{
| + | |
- | position:relative;
| + | |
- | width: 980px;
| + | |
- | height:auto;
| + | |
- | margin: 30px auto;
| + | |
- | margin-bottom:20px;
| + | |
- | /* background:green;
| + | |
- | border:2px solid red;*/
| + | |
- | }
| + | |
- | | + | |
- | #globalheader{
| + | |
- | width: 980px;
| + | |
- | height:auto;
| + | |
- | margin: 12px auto;
| + | |
- | margin-bottom:2px;
| + | |
- | padding: 0px;
| + | |
- | font-family: Optima,"Courier New",Courier, "Andale Mono", Monaco ;
| + | |
- | background: url(../images/header-background.png) repeat; /* for IE:not recognize rgba()*/
| + | |
- | background-color:rgba(0, 0, 0, 0.35) ;
| + | |
- | position:relative;
| + | |
- | color: white;
| + | |
- | background:#202020;/*for one of the choices*/
| + | |
- | }
| + | |
- |
| + | |
- | #logo{
| + | |
- | font-size: 1.6em;
| + | |
- | position:relative;
| + | |
- | float: left;
| + | |
- | margin-top: 20px;
| + | |
- | margin-left:60px;
| + | |
- | text-decoration: none;
| + | |
- | color:#bcbcbc;
| + | |
- | font-style: normal;
| + | |
- | width:500px;
| + | |
- | height:70px;
| + | |
- | /* background:green;*/
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | /*---the begin of head menu wrapper css-----*/
| + | |
- | #wrap_header_menu {
| + | |
- | margin-top:12px;
| + | |
- | margin-bottom:10px;
| + | |
- | margin-left:50px;
| + | |
- | width:900px;
| + | |
- | height:25px;
| + | |
- | padding-bottom:18px;
| + | |
- | }
| + | |
- | .header_menu a {
| + | |
- | text-decoration:none;
| + | |
- | color:#666;
| + | |
- | text-shadow: 0 1px 0px #000,0 2px 0px #111;
| + | |
- | }
| + | |
- | .header_menu ul{
| + | |
- | list-style:none;
| + | |
- | padding-top:2px;
| + | |
- | }
| + | |
- | .header_menu li,.header_menu li:hover,.header_menu li:active {
| + | |
- | position:relative;
| + | |
- | float: left;
| + | |
- | font-size:15px;
| + | |
- | font-family:Arial, Helvetica, sans-serif;
| + | |
- | font-style:normal;
| + | |
- | display: block;
| + | |
- | text-align:center;
| + | |
- | letter-spacing:0.1em;
| + | |
- |
| + | |
- | color:#fff;
| + | |
- | margin-right:9px;
| + | |
- | border-radius:4px;
| + | |
- | -moz-border-radius: 4px;
| + | |
- | -webkit-border-radius: 4px;
| + | |
- |
| + | |
- | padding:5px 12px;
| + | |
- | -moz-border-radius-topleft : 0px;
| + | |
- | -moz-border-radius-topright : 14px;
| + | |
- | -moz-border-radius-bottomleft : 14px;
| + | |
- | -moz-border-radius-bottomright : 0px;
| + | |
- | -webkit-border-top-left-radius: 0px;
| + | |
- | -webkit-border-top-right-radius: 14px;
| + | |
- | -webkit-border-bottom-left-radius: 14px;
| + | |
- | -webkit-border-bottom-right-radius: 0px;
| + | |
- |
| + | |
- | background:#161616;
| + | |
- | border-bottom:1px solid #333;
| + | |
- | border-left:1px solid #000;
| + | |
- | border-right:1px solid #333;
| + | |
- | border-top:1px solid #000;
| + | |
- | cursor:pointer;
| + | |
- | /*text-transform:uppercase;*/
| + | |
- | }
| + | |
- |
| + | |
- | .header_menu a:hover {
| + | |
- | text-decoration:none;
| + | |
- | color:#010101;
| + | |
- | text-shadow: 0 1px 0px #333333;
| + | |
- | }
| + | |
- |
| + | |
- | .header_menu li:active{
| + | |
- | border-top:1px solid #333;
| + | |
- | border-right:1px solid #000;
| + | |
- | border-left:1px solid #333;
| + | |
- | border-bottom:1px solid #000;
| + | |
- | padding:5px 12px;
| + | |
- | }
| + | |
- | | + | |
- | li:after, li:before {
| + | |
- | -moz-transition:width 0.5s ease 0s;
| + | |
- | height: 0px;
| + | |
- | width: 0px;
| + | |
- | position: absolute;
| + | |
- | content: ' ';
| + | |
- | display: block;
| + | |
- | opacity:0;
| + | |
- | box-shadow: 0px 0px 5px #00c6ff;
| + | |
- | top: 32px;
| + | |
- | }
| + | |
- | li:after {
| + | |
- | background: -moz-linear-gradient(left, #0ad, #08b);
| + | |
- | left: 10px;
| + | |
- | }
| + | |
- | li:before {
| + | |
- | background: -moz-linear-gradient(right, #0ad, #08b);
| + | |
- | right:2px;
| + | |
- | }
| + | |
- | li:hover:after,li:hover:before{
| + | |
- | width: 51%;
| + | |
- | height: 1px;
| + | |
- | opacity:1;
| + | |
- | }
| + | |
- | | + | |
- | li:active:after,li:active:before{
| + | |
- | width: 51%;
| + | |
- | height: 1px;
| + | |
- | opacity:1;
| + | |
- | }
| + | |
- | li:active:after{left: 12px;}
| + | |
- | li:active:before{right:0px;}
| + | |
- | /*---the end of head menu wrapper css-----*/
| + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | /*---the begin of head-text shade-shadow css-----*/
| + | |
- | .shade-shadow{
| + | |
- | font-size:58px;font-weight: bold;color:#333; /*#487a1b*/line-height:48px;
| + | |
- | background:#888 -webkit-linear-gradient(-15deg,#080808 5%,rgba(255,255,255,.7),
| + | |
- | rgba(255,255,255,.9),rgba(255,255,255,.7),#222 10%) no-repeat;
| + | |
- | -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));
| + | |
- | -webkit-background-clip:text;
| + | |
- | -webkit-text-fill-color:transparent;
| + | |
- | -webkit-animation:cliptexttop 3s linear infinite;
| + | |
- | text-transform:uppercase;
| + | |
- | }
| + | |
- | @-webkit-keyframes cliptexttop{
| + | |
- | 0%{background-position:left 0;}
| + | |
- | 100%{background-position:1000px 0;}}
| + | |
- | /*---the end of head-text shade-shadow css-----*/
| + | |
- |
| + | |
- |
| + | |
- | .unselectable {
| + | |
- | -moz-user-select: -moz-none;
| + | |
- | -khtml-user-select: none;
| + | |
- | -webkit-user-select: none;
| + | |
- | -o-user-select: none;
| + | |
- | user-select: none;
| + | |
- | }/*for the function as the text can't be selectabled */
| + | |
- |
| + | |
- |
| + | |
- | | + | |
- | /*the begin of to header-text css*/
| + | |
- | #head_text {
| + | |
- | letter-spacing: -1px;
| + | |
- | text-shadow: 1px 1px 0 gray;
| + | |
- | display: block;
| + | |
- | cursor: pointer;
| + | |
- | -webkit-transition: all 0.5s ease .03s;
| + | |
- | -moz-transition: all 0.5s ease .03s;
| + | |
- | -o-transition: all 0.5s ease .03s;
| + | |
- | transition: all 0.5s ease .03s;
| + | |
- | }
| + | |
- | #head_text:hover {
| + | |
- | letter-spacing: 1px;
| + | |
- | -webkit-transform: scale(1.03) translateX(12px);
| + | |
- | -moz-transform: scale(1.03) translateX(12px);
| + | |
- | -o-transform: scale(1.03) translateX(12px);
| + | |
- | transform:scale(1.03);
| + | |
- | }/*the end of to header-text css*/
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- | /*the begin of clock-igem css*/
| + | |
- | #wrapper_of_clock{
| + | |
- | position: absolute;
| + | |
- | height:140px;
| + | |
- | width:140px;
| + | |
- | top:2px;
| + | |
- | right:28px;
| + | |
- | /*border:1px red solid;
| + | |
- | background:rgba(2,22,0 .04); */
| + | |
- | }
| + | |
- | .clock {
| + | |
- | height: 140px;
| + | |
- | width: 140px;
| + | |
- | position: absolute;
| + | |
- | z-index:12;
| + | |
- | }
| + | |
- | .clock_bg {
| + | |
- | position: absolute;
| + | |
- | right:30px;
| + | |
- | top:30px;
| + | |
- | width: 80px;
| + | |
- | height: 80px;
| + | |
- | z-index: 5;
| + | |
- | background-image: url('https://static.igem.org/mediawiki/2012/b/b9/IGEM-USTC-logo-80.png');
| + | |
- | }/*the end of clock-igem css*/
| + | |
- |
| + | |
- | | + | |
- | | + | |
- | /*the begin of to top css*/
| + | |
- | #topBar {
| + | |
- | position: fixed;
| + | |
- | right: 100px;
| + | |
- | bottom:32px;
| + | |
- | z-index: 20;
| + | |
- | }
| + | |
- | #topBar div {
| + | |
- | background: url('https://static.igem.org/mediawiki/2012/4/4d/Top-black-arrow.png');
| + | |
- | display: block;
| + | |
- | height: 53px;
| + | |
- | width: 53px;
| + | |
- | overflow: hidden;
| + | |
- | text-indent: -9999px;
| + | |
- | cursor: pointer;
| + | |
- | -webkit-transition: all 0.5s ease .03s;
| + | |
- | -moz-transition: all 0.5s ease .03s;
| + | |
- | -o-transition: all 0.5s ease .03s;
| + | |
- | transition: all 0.5s ease .03s;
| + | |
- | }
| + | |
- | #topBar div:hover {
| + | |
- | background: url('https://static.igem.org/mediawiki/2012/f/f8/Gray-top-arrow.png');
| + | |
- | -moz-transform: scale(1.08);
| + | |
- | -webkit-transform: scale(1.08);
| + | |
- | -o-transform:scale(1.08);
| + | |
- | transform:scale(1.08);
| + | |
- | }/**************************the end of to top css*************/
| + | |
- | | + | |
- | | + | |
- | /*the begin of popup-box css*/
| + | |
- | span.wrap_ps-link {cursor: pointer;}
| + | |
- | span.wrap_ps-link:hover {
| + | |
- | text-shadow:#dcf 0 0 5px;
| + | |
- | color: #300;
| + | |
- | text-decoration:none;
| + | |
- | }
| + | |
- | /* Each Box's specified width: Requied so that they're showing in the middle of the page */
| + | |
- | div.wrap_ps-box.wrapper-L,div.wrap_ps-box.wrapper-R {
| + | |
- | background-image:url(dlbj.jpg);
| + | |
- | background-repeat:repeat-x;
| + | |
- | border:2px solid #614A43;
| + | |
- | font: 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
| + | |
- | text-align: left;left: 25%;right: 25%;
| + | |
- | background-color: #666;
| + | |
- | border-radius:5px;-moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px;
| + | |
- | padding:1px;
| + | |
- | z-index:20;
| + | |
- | width: 530px;
| + | |
- | height: auto;
| + | |
- | left:40%;/*FF IE7*/
| + | |
- | top:41%;/*FF IE7*/
| + | |
- | margin-left:-150px!important;/*FF IE7 half */
| + | |
- | margin-top:-60px!important;/*FF IE7 */
| + | |
- | margin-top:0px;
| + | |
- | position:fixed!important;/*FF IE7 half*/
| + | |
- | position:absolute;/*IE6*/
| + | |
- | }
| + | |
- | div.wrap_ps-box.wrapper-R{
| + | |
- | left:42%;/*FF IE7*/
| + | |
- | top:42%;/*FF IE7*/
| + | |
- | margin-left:-150px!important;/*FF IE7 half */
| + | |
- | margin-top:-60px!important;/*FF IE7 */
| + | |
- | margin-top:0px;
| + | |
- | }
| + | |
- | div.wrap_ps-box div.inside {margin: 3px;padding: 10px;overflow: visible;z-index: 20;}
| + | |
- | div.wrap_ps-box div.inside.gray-r,div.wrap_ps-box div.inside.gray-l {background: #333;}
| + | |
- | | + | |
- | /* Close Buttons */
| + | |
- | div.wrap_ps-box span.wrap_ps-close {
| + | |
- | position: absolute;top: -13px;right: -13px;width: 35px;height: 35px;
| + | |
- | background: url(../images/close-buttons-choices.85.png) no-repeat;
| + | |
- | }
| + | |
- | div.wrap_ps-box span.wrap_ps-close {background-position: -36px 0px;}
| + | |
- | div.wrap_ps-box span.wrap_ps-close:hover {background-position: -36px -36px;cursor: pointer;}
| + | |
- | div.wrap_ps-box span.wrap_ps-close.left {top: -13px;left: -13px;}
| + | |
- | div.wrap_ps-box span.wrap_ps-close.gray-l {background-position: -36px 0px;}
| + | |
- | div.wrap_ps-box span.wrap_ps-close.gray-l:hover {background-position: -36px -36px;}
| + | |
| | | |
| | | |
- | /*the text content style*/
| + | #content{width:965px;} |
- | div.wrap_ps-box h3 {font-size: 30px;font-weight: bold;margin: 10px 0px 5px;color: #464646;letter-spacing: -1px;}
| + | .tab{margin:0px; padding:0px; border-width:0px;} |
- | div.wrap_ps-box .gray-l h3,{color: #fffeff;margin-top: 0px;}
| + | .firstHeading{display:none;} |
- | div.wrap_ps-box p {text-shadow: rgba(255,254,255,0.5) 0 1px 0;color: #7a7a7a;margin: 5px 0px 10px;}
| + | |
| | | |
| | | |
- | /* Image Styles */ | + | </style> |
- | div.wrap_ps-box img{float: left;margin-right: 20px;}
| + | </html> |
- | div.wrap_ps-box img.pop-out {margin-top: -42px;z-index: 2001;position: absolute;left: 94px;}
| + | |
- | /******************************the end of popup-box css********************/
| + | |