"
Team:USTC-Software/text
From 2012.igem.org
/*----the style of header css----*/
- {
margin: 0; padding: 0; text-decoration: none; }
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*/
div.wrap_ps-box h3 {font-size: 30px;font-weight: bold;margin: 10px 0px 5px;color: #464646;letter-spacing: -1px;}
div.wrap_ps-box .gray-l h3,{color: #fffeff;margin-top: 0px;}
div.wrap_ps-box p {text-shadow: rgba(255,254,255,0.5) 0 1px 0;color: #7a7a7a;margin: 5px 0px 10px;}
/* Image Styles */
div.wrap_ps-box img{float: left;margin-right: 20px;}
div.wrap_ps-box img.pop-out {margin-top: -42px;z-index: 2001;position: absolute;left: 94px;}
/******************************the end of popup-box css********************/
