"

From 2012.igem.org

.clr{ clear: both; }

    /*the begin of vivid photo-showing css*/

#warp_of_vivid_photo_showing{ width:988px; margin:45px auto; height:205px; /* border:1px red solid; background:green;*/ }

ul-p , li-p{ list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after{ content: ; content: none; } pre{ white-space:pre-wrap; } /* remember to define focus styles! */ :focus { outline:0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } .clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }

text-h3{font-size:14px}

input, option, textarea{font-family:Arial;font-size:12px;} .input-text{border:1px solid #888888;padding:2px 3px;} /*html5 layout reset*/ article, aside, dialog, figure, footer, header, hgroup, nav, section, figcaption, details, summary {display:block}

/*css3 transform transition*/

li-p {width:320px; height:200px; border:2px solid #ccc; box-shadow:0 0 1px #000; display:inline-block; overflow:hidden;}

/*auto------------------------------------------------------------------------------------*/ .oneDemo, .twoDemo, .threeDemo {width:320px; height:200px; position:relative; margin:0 auto;} .transform{height:200px; overflow:hidden;} .content {position:absolute; top:0; left:0; overflow:hidden;} .content text-h3, .content p {width:285px; margin:0 auto; text-align:center; overflow:hidden; color:#fff; text-shadow:1px 0 1px #000;} .content text-h3 {height:30px; line-height:30px; font-size:16px;} .content p {height:45px; line-height:22px; font-size:14px; } .content a {box-shadow:1px 0 1px #000; text-shadow:1px 0 1px #000;}

/*oneDemo--------------------------------------------------------------------------------*/ .oneDemo .mask {position:absolute; top:0; left:0; display:block; width:360px; height:400px; opacity:1; background:rgba(230, 230, 230, 0.5);} .oneDemo .mask-top {right:0; left:auto; -moz-transform:rotate(58.5deg) translate(-424px, -65px); -webkit-transform:rotate(58.5deg) translate(-424px,-65px); } .oneDemo .mask-bottom {top:0; left:0; -moz-transform:rotate(58.9deg) translate(253px,-45px); -webkit-transform:rotate(58.9deg) translate(253px,-45px); } .oneDemo .mask-top, .oneDemo .mask-bottom {opactiy:1; -moz-transition:all 0.3s ease-in-out 0.6s; -webkit-transition:all 0.3s ease-in-out 0.6s; } .oneDemo:hover .mask-top { -moz-transform:rotate(57.9deg) translate(-253px, -65px); -webkit-transform:rotate(57.9deg) translate(-253px,-65px); } .oneDemo:hover .mask-bottom { -moz-transform:rotate(57.9deg) translate(85px, -31px); -webkit-transform:rotate(57.9deg) translate(85px,-31px); } .oneDemo:hover .mask-top, .oneDemo:hover .mask-bottom, .oneDemo:hover .content { -moz-transition-delay:0.1s; -webkit-transition-delay:0.1s; } .oneDemo .content {height:0; width:320px; background:rgba(110, 120, 110, 0.8); color:#fff; font-size:14px; -moz-transform:rotate(-40deg) translate(-100px, 100px); -webkit-transform:rotate(-40deg) translate(-100px, 100px); -moz-transition:all 0.2s ease-in-out 0.3s; -webkit-transition:all 0.2s ease-in-out 0.3s; } .oneDemo:hover .content {width:280px; height:60px; margin-top:50px; padding:20px; -moz-transform:rotate(0) translate(0); -webkit-transform:rotate(0) translate(0); }

/*twoDemo----------------------------------------------------------------------------------*/ .twoDemo .content {height:200px; padding:0 20px; position:absolute; top:0; left:0; display:block; opacity:0; background:rgba(130, 130, 130, 0.5); -moz-transform:translate(460px, -100px) rotate(180deg); -webkit-transform:translate(460px, -100px) rotate(180deg); -moz-transition:all 0.2s ease-in-out 0.4s; -webkit-transition:all 0.2s ease-in-out 0.4s; opacity:0; } .twoDemo:hover .content {opacity:1; -moz-transform:translate(0) rotate(0); -webkit-transform:translate(0) rotate(0); -moz-transition-delay:0s; -webkit-transition-delay:0s; } .twoDemo .content text-h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000; -moz-transform:translateY(-100px); -webkit-transform:translateY(-100px); -moz-transition:all 0.2s ease-in-out 0s; -webkit-transtiton:all 0.2s ease-in-out 0s; } .twoDemo .content:hover text-h3 { -moz-transform:translateY(0px); -webkit-transform:translateY(0px); -moz-tarnsition-delay:0.5s; -webkit-transition-delay:0.5s; } .twoDemo .content p {text-align:center; margin-top:20px; -moz-transform:translateX(300px) rotate(90deg); -webkit-transform:translateX(300px) rotate(90deg); -moz-transition:all 0.4s ease-in-out 0s; -webkit-transition:all 0.4s ease-in-out 0s; } .twoDemo .content:hover p {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);} .twoDemo .content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color:#fff; background:rgba(110, 120, 110, 0.8); text-decoration:none; line-height:30px; text-align:center; -moz-transform:translateX(-300px) rotate(-90deg); -webkit-transform:translateX(-300px) rotate(-90deg); -moz-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s; } .twoDemo .content:hover a {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);}

/*threeDemo----------------------------------------------------------*/ .threeDemo .transform {-moz-transition:all 1s ease-in 0.1s; -webkit-transition:all 1s ease-in 0.1s;} .threeDemo:hover .transform {-moz-transform:rotate(720deg) scale(0); -webkit-transform:rotate(720deg) scale(0);} .threeDemo .content {height:200px; padding:0 20px; top:-200px; opactiy:0;background-color:rgba(200, 200, 200, 0.5); -moz-transition:all 0.3s ease-out 0.5s; -webkit-transition:all 0.3s ease-out 0.5s; } .threeDemo:hover .content {top:0; opactiy:1; -moz-animation:0.9s linear 0s normal none 1 bounceY; -webkit-animation:0.9s linear 0s normal none 1 bounceY; -moz-transition-delay:0s; -webkit-transition-delay:0s; } .threeDemo .content text-h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000; -moz-transform:translateY(-200px); -webkit-transform:translateY(-200px); -moz-transition:all 0.6s ease-in-out 0.1s; -webkit-transition:all 0.6s ease-in-out 0.1s; } .threeDemo .content:hover text-h3 { -moz-transform:translateY(0); -webkit-transform:translateY(0); -moz-transition-delay:0; -webkit-transition-delay:0; } .threeDemo .content p {margin-top:20px; -moz-transform:translateY(-200px); -webkit-transform:translateY(-200px); -moz-transition:all 0.4s ease-in-out 0.1s; -webkit-transition:all 0.4s ease-in-out 0.1s; } .threeDemo .content:hover p { -moz-transform:translateY(0); -webkit-transform:translateY(0); -moz-transition-delay:0; -webkit-transition-delay:0; } .threeDemo .content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color:#fff; background:rgba(110, 120, 110, 0.8); text-decoration:none; line-height:30px; text-align:center; -moz-transform:translateY(-200px); -webkit-transform:translateY(-200px); -moz-transition:all 0.2s ease-in-out 0.1s; -webkit-transition:all 0.2s ease-in-out 0.1s; } .threeDemo .content:hover a { -moz-transform:translateY(0); -webkit-transform:translateY(0); -moz-transition-delay:0; -webkit-transition-delay:0; } @-moz-keyframes bounceY { 0% { -moz-transform: translateY(-200px);} 40% { -moz-transform: translateY(-180px);} 65% { -moz-transform: translateY(-102px);} 82% { -moz-transform: translateY(-75px);} 92% { -moz-transform: translateY(-32px);} 55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);} } @-webkit-keyframes bounceY { 0% { -webkit-transform: translateY(-200px);} 40% { -webkit-transform: translateY(-180px);} 65% { -webkit-transform: translateY(-102px);} 82% { -webkit-transform: translateY(-75px);} 92% { -webkit-transform: translateY(-32px);} 55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);} } /*the end of vivid photo-showing 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: 780px; height: auto; left:32%;/*FF IE7*/ top:32%;/*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:32%;/*FF IE7*/ top:32%;/*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;

       z-index:22;

background: url('https://static.igem.org/mediawiki/2012/d/db/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********************/