Team:UCLondon/Templates/Content-Slide
From 2012e.igem.org
(Difference between revisions)
(243 intermediate revisions not shown) | |||
Line 13: | Line 13: | ||
<div class="interact" style="display:block;"> | <div class="interact" style="display:block;"> | ||
- | <p style="font-size:11pt; width:90%; margin:auto;"> | + | <p style="font-size:11pt; width:90%; margin:auto;">Codon Usage Optimizer (CUO) is a GUI-based multiplatform software written in Java. The main function of the software is to optimize genes to be transformed into the <em>Chlamydomonas reinhardtii</em> chloroplast genome using an original set of algorithms for calculation, data processing and automated reasoning. Furthermore, it can be used as an electronic drawboard for gene sequence analysis and design. While the software focuses on the <em>C.reinhardtii genome</em>, it can also be used to optimize genes into other hosts as well. Since <em>E.coli</em> and <em>S.cerevisiae</em> are popular candidates of biotechnological exploitation, they will be CUO's next shift of focus in its development.</p> |
</div> | </div> | ||
</div> | </div> | ||
Line 20: | Line 20: | ||
<a href="#" title="This could be the elevator we pitch to you in" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-2.jpg" width="815" height="365" alt="Slide 2"></a> | <a href="#" title="This could be the elevator we pitch to you in" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-2.jpg" width="815" height="365" alt="Slide 2"></a> | ||
<div class="caption"> | <div class="caption"> | ||
- | |||
<div class="interact" style="display:block;"> | <div class="interact" style="display:block;"> | ||
- | <div style="width: | + | <div style="width:90%; margin-right:auto; margin-left:auto;"> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </div> | + | <table border="0" style="background-color: rgba(0,0,0,0); color:white;"> |
- | </div> | + | <tr> |
- | </div> | + | <th>Elevator Pitch<br/></th> |
+ | <th>Tutorials<br/></th> | ||
+ | <th>Slide Deck<br/></th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td style="font-size:11pt;">In the elevator pitch we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform.</td> | ||
+ | <td style="font-size:11pt;">These tutorials demonstrate key features of CUO and help new users unleash its the awesome power.</td> | ||
+ | <td style="font-size:11pt;">In the slide deck we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td align="center"><br/><br/><span class="play blue-but">Draft Pitch</span></td> | ||
+ | <td align="center"><br/><br/><span class="playTuts red-but">Tutorials</span></td> | ||
+ | <td align="center"><br/><br/><span class="run-slides green-but">Slideshow</span></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | |||
+ | |||
+ | |||
+ | </div><!-- width --> | ||
+ | |||
+ | </div><!-- interact--> | ||
+ | </div><!-- caption--> | ||
+ | </div><!-- slide --> | ||
<div class="slide"> | <div class="slide"> | ||
<a href="#" title="Use and Contribute to CUO" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-3.jpg" width="815" height="365" alt="Slide 3"></a> | <a href="#" title="Use and Contribute to CUO" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-3.jpg" width="815" height="365" alt="Slide 3"></a> | ||
<div class="caption"> | <div class="caption"> | ||
- | <p>Get the latest version of CUO</p> | + | <p>Get the latest version of CUO!</p> |
<!--interact start--> | <!--interact start--> | ||
Line 40: | Line 57: | ||
<div > | <div > | ||
<p>Download</p> | <p>Download</p> | ||
- | + | ||
- | <table width="200 border="0" align="left" style="font-size:10px; background-color:rgba(249, 249, 249, 0.4);"> | + | <table width="200" border="0" align="left" style="font-size:10px; background-color:rgba(249, 249, 249, 0.4); margin-left:10px; padding-left:20px; border 1px solid;"> |
<tbody> | <tbody> | ||
<tr> | <tr> | ||
<td> | <td> | ||
<p> | <p> | ||
- | < | + | <form><input type="button" value="Beta 0.92" onClick="window.location.href='http://codonusageoptimizer.org/downloads/CUObeta0.92.zip'"> |
- | Last Modified: | + | </form><br> |
- | + | Last Modified: 14.10.2012<br> | |
+ | </p> | ||
</td> | </td> | ||
</tr> | </tr> | ||
Line 54: | Line 72: | ||
<td> | <td> | ||
<p> | <p> | ||
- | + | Kasuza Table parser added<br> | |
- | + | Edit Table function added<br> | |
- | + | View Table function added<br> | |
- | Operation | + | Translator added<br> |
+ | Plot graph function in Moptimzier<br> | ||
+ | Operation Panel improved<br> | ||
+ | Tutorials added<br> | ||
+ | </p> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | |||
+ | <!--<img src="https://dl.dropbox.com/u/3703109/igeme/CUO_logo.png" width="40" />--> | ||
+ | |||
+ | |||
+ | <table width="550" border="0" align="right" style="font-size:10px; background-color:rgba(249, 249, 249, 0.9); margin-right:43px; position:relative; top:-23px;"> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <td align="center" style="line-height:0.8pt;"> | ||
+ | <h3>release notes</h3> | ||
+ | </td> | ||
+ | </tr> | ||
+ | |||
+ | <tr> | ||
+ | <td> | ||
+ | <div style="height:203px; overflow-y:scroll; width:100%;"> | ||
+ | <div style="float:left"><img src="https://dl.dropbox.com/u/3703109/igeme/CUO_logo.png" width="40" /></div> | ||
+ | <div style="float:left;"><div style="color:green;">CUO</div> beta0.92 released!</div> | ||
+ | <div style="clear:both; height:1px;"></div> | ||
+ | <p>I am delighted to announce the release of CUO beta0.92! | ||
+ | This release humbly marks the new era of CUO. The team had grown and sprouted like never before. With the recent recruitment of four professional bioinformaticians and a web developer into the dev team, the program is entering an accelerated development phase that was previously impossible. We even have a public engagement officer on board now to make the software more interactive from all aspects (check out our social networks :D ). | ||
+ | Many thanks again to all the people supporting, building and using CUO. The result presented here is an accumulation of efforts and help from everyone.</p> | ||
+ | |||
+ | <h3>Featuring:</h3> | ||
+ | <ul style="list-style-type:circle !important; list-style-image: none !important"> | ||
+ | <li>Kasuza Table parser in Processor, A new tool to parse and save tables from Kasuza Database at breeze.</li> | ||
+ | <li>Edit Table in Processor, Open up and edit any table you like, even make your own.</li> | ||
+ | <li>View Table in Processor, View multiple tables within split seconds.</li> | ||
+ | <li>Translator, New tool to translate, transcribe and get complementary strain of a sequence, no more alt+tab.</li> | ||
+ | <li>Graph in Motpimizer, CAI and CPI in Moptimizer now comes in graph forms, call it with the new little white button beside the overall CAI and CPI.</li> | ||
+ | <li>Improved Operation Panel, Project indea is integrated, we can now save/open a canvas, drag and drop fragments from browserpanel to the canvas.</li> | ||
+ | <li>Video Tutorials, Access the crash courses from Help in menubar or visit our youtube channel.</li> | ||
+ | <li>Restructured folders hierachy, The program folders is now even tidier and visually smoothing to navigate.</li> | ||
+ | <li>Launch of facebook page, twitter, youtube channel.</li> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | </td> | ||
</tr> | </tr> | ||
</tbody> | </tbody> | ||
Line 73: | Line 138: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div id="shadow2" style="display:none;" > | ||
+ | <div id="close-box2" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div> | ||
+ | |||
+ | <div id="box-content2" style="width:95%; height:95%; margin:auto;"> | ||
+ | <div id="load2" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div id="shadow4" style="display:none;" > | ||
+ | <div id="close-box4" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer; float:left;"></div> | ||
+ | |||
+ | <div id="fullscreen" class="tooltip" style="background:url(https://dl.dropbox.com/u/3703109/igeme/fullscreenButton.png) no-repeat 0 0; height:35px; width:35px; cursor:pointer; float:right;" udit="fullscreen"></div> | ||
+ | |||
+ | <div style="clear:both; width:99% height:1px;"></div> | ||
+ | |||
+ | <div id="box-content4" style="width:95%; height:95%; margin:auto; overflow:hidden;"> | ||
+ | |||
+ | <div id="load2" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | ||
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.min.jquery.js"></script> | <script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.min.jquery.js"></script> | ||
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slide.js"></script> | <script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slide.js"></script> | ||
+ | <script type="text/javascript" src="https://dl.dropbox.com/u/3703109/igeme/js/jmpress.js"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 112: | Line 209: | ||
return false; | return false; | ||
}); | }); | ||
+ | |||
+ | |||
+ | var loading = ""; | ||
+ | |||
+ | |||
+ | jQuery.fn.center = function () { | ||
+ | var w = $(window); | ||
+ | var b = $('body'); | ||
+ | var mt = w.scrollTop() + (w.height() > b.height()) ? 0: ( -1 *Math.abs( w.outerHeight() - b.outerHeight() )/2 ); | ||
+ | this.css({ | ||
+ | 'position':'fixed', | ||
+ | 'left': '50%', | ||
+ | 'margin-left': 0 - (this.width() / 2), | ||
+ | 'top': '50%', | ||
+ | 'margin-top': (0 - (this.height() / 2)) | ||
+ | }); | ||
+ | return this; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* e-pitch box */ | ||
+ | var openBox2 = function () { | ||
+ | $('#shadow2').center(); | ||
+ | var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/f9jEuo7HSvA" frameborder="0" allowfullscreen></iframe>'; | ||
+ | |||
+ | $('#shadow2').toggle('slow', function() { | ||
+ | $(this).children('#box-content2').html(input); | ||
+ | }); | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | var closeBox2 = function() { | ||
+ | $('#shadow2').toggle('slow', function() { | ||
+ | $(this).children('#box-content2').html(loading); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | /* TUTS */ | ||
+ | var openBox3 = function () { | ||
+ | $('#shadow2').center(); | ||
+ | var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/4xG939EeKns?list=PLtGCURRfxampHgpkl-tUkzSeZhItvY3_u&hl=en_US" frameborder="0" allowfullscreen></iframe>'; | ||
+ | |||
+ | $('#shadow2').toggle('slow', function() { | ||
+ | $(this).children('#box-content2').html(input); | ||
+ | }); | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* SLIDE show box */ | ||
+ | var started = false; | ||
+ | var openBox4 = function () { | ||
+ | $('#shadow4').center(); | ||
+ | |||
+ | if (! started){ | ||
+ | |||
+ | var slide = document.createElement("div"); | ||
+ | slide.setAttribute("id", "jmpress"); | ||
+ | slide.setAttribute("style", "width: 100%; height:100%; margin:auto;"); | ||
+ | |||
+ | $(slide).append('</html>{{:Team:UCLondon/content/slide1}}<html>'); | ||
+ | |||
+ | |||
+ | var input = slide; | ||
+ | |||
+ | } | ||
+ | |||
+ | $('#shadow4').toggle('slow', function() { | ||
+ | if (! started){ | ||
+ | $(this).children('#box-content4').html(input); | ||
+ | $('#jmpress').jmpress( { | ||
+ | |||
+ | fullscreen : false, | ||
+ | viewPort: { | ||
+ | height: 800 | ||
+ | ,width: 800 | ||
+ | ,maxScale: 1 // do not scale up | ||
+ | } | ||
+ | //,hash: { use: false } | ||
+ | |||
+ | }); | ||
+ | started = true; | ||
+ | } | ||
+ | $('#jmpress').focus(); | ||
+ | |||
+ | |||
+ | }); | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | var closeBox4 = function() { | ||
+ | |||
+ | var d = document; | ||
+ | if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ | ||
+ | (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); | ||
+ | (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); | ||
+ | (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen(); | ||
+ | } | ||
+ | |||
+ | |||
+ | $('#shadow4').toggle('slow', function() { | ||
+ | //$(this).children('#box-content4').html(loading); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* fullscreen functions */ | ||
+ | |||
+ | |||
+ | |||
+ | var fstoggle = function() { | ||
+ | var d = document; | ||
+ | |||
+ | if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ | ||
+ | //$('#shadow4').children('#box-content4').html(loading); | ||
+ | (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); | ||
+ | (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); | ||
+ | (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen(); | ||
+ | } | ||
+ | else { | ||
+ | var e = document.getElementById('shadow4'); | ||
+ | (e.requestFullScreen == undefined) ? "" : e.requestFullScreen(); | ||
+ | (e.webkitRequestFullScreen == undefined) ? "" : e.webkitRequestFullScreen(); | ||
+ | (e.mozRequestFullScreen == undefined) ? "" : e.mozRequestFullScreen(); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | $(document).ready(function(event) { | ||
+ | loading = $('#load2').parent().html(); | ||
+ | |||
+ | $('body').off('click', '.play', openBox2); | ||
+ | $('body').on('click', '.play', openBox2); | ||
+ | |||
+ | $('body').off('click', '#close-box2', closeBox2); | ||
+ | $('body').on('click', '#close-box2', closeBox2); | ||
+ | |||
+ | $('body').off('click', '.playTuts', openBox3); | ||
+ | $('body').on('click', '.playTuts', openBox3); | ||
+ | |||
+ | |||
+ | /* slide deck box */ | ||
+ | $('body').off('click', '.run-slides', openBox4); | ||
+ | $('body').on('click', '.run-slides', openBox4); | ||
+ | |||
+ | $('body').off('click', '#close-box4', closeBox4); | ||
+ | $('body').on('click', '#close-box4', closeBox4); | ||
+ | |||
+ | /* fullscreen mode */ | ||
+ | $('body').off('click', '#fullscreen',fstoggle); | ||
+ | $('body').on('click', '#fullscreen', fstoggle); | ||
+ | |||
+ | |||
+ | $("#box-content4").click(function(event){ | ||
+ | $('#jmpress').jmpress('next'); | ||
+ | return false; | ||
+ | }) | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</script> | </script> | ||
+ | |||
+ | <style> | ||
+ | |||
+ | #shadow2 { | ||
+ | |||
+ | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) ); | ||
+ | background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-color: rgb(255,255,255); | ||
+ | |||
+ | |||
+ | box-shadow: 1px 2px 5px 5px #888; | ||
+ | border-radius: 5px; | ||
+ | |||
+ | position:fixed; | ||
+ | height: 380px; | ||
+ | width:600px; | ||
+ | margin:auto; | ||
+ | z-index: 999999; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #shadow4 { | ||
+ | |||
+ | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) ); | ||
+ | background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-image: linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) ); | ||
+ | background-color: rgb(255,255,255); | ||
+ | |||
+ | |||
+ | box-shadow: 1px 2px 5px 5px #888; | ||
+ | border-radius: 5px; | ||
+ | |||
+ | position:fixed; | ||
+ | height: 440px; | ||
+ | width:720px; | ||
+ | margin:auto; | ||
+ | z-index: 999999; | ||
+ | } | ||
+ | |||
+ | |||
+ | #shadow4:-webkit-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4:-moz-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4:-ms-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4:-o-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4: full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | |||
+ | /* | ||
+ | #box-content4:-webkit-full-screen { width: 100% } | ||
+ | #box-content4:-moz-full-screen { width: 100% } | ||
+ | #box-content4:-ms-full-screen { width: 100% } | ||
+ | #box-content4:-o-full-screen { width: 100% } | ||
+ | #box-content4: full-screen { width: 100% } | ||
+ | */ | ||
+ | |||
+ | |||
+ | .blue-but { | ||
+ | cursor: pointer; | ||
+ | border: 1px solid #0a3c59; | ||
+ | background: #3e779d; | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d)); | ||
+ | background: -webkit-linear-gradient(top, #65a9d7, #3e779d); | ||
+ | background: -moz-linear-gradient(top, #65a9d7, #3e779d); | ||
+ | background: -ms-linear-gradient(top, #65a9d7, #3e779d); | ||
+ | background: -o-linear-gradient(top, #65a9d7, #3e779d); | ||
+ | background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%); | ||
+ | padding: 10.5px 21px; | ||
+ | -webkit-border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | border-radius: 6px; | ||
+ | -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | text-shadow: #7ea4bd 0 1px 0; | ||
+ | color: #06426c; | ||
+ | font-size: 14px; | ||
+ | font-family: helvetica, serif; | ||
+ | text-decoration: none; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .red-but { | ||
+ | cursor: pointer; | ||
+ | border: 1px solid #800000; | ||
+ | background: #ff0000; | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#ff0000)); | ||
+ | background: -webkit-linear-gradient(top, #ff6666, #ff0000); | ||
+ | background: -moz-linear-gradient(top, #ff6666, #ff0000); | ||
+ | background: -ms-linear-gradient(top, #ff6666, #ff0000); | ||
+ | background: -o-linear-gradient(top, #ff6666, #ff0000); | ||
+ | background-image: -ms-linear-gradient(top, #ff6666 0%, #ff0000 100%); | ||
+ | padding: 10.5px 21px; | ||
+ | -webkit-border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | border-radius: 6px; | ||
+ | -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | text-shadow: #7ea4bd 0 1px 0; | ||
+ | color: #800000; | ||
+ | font-size: 14px; | ||
+ | font-family: helvetica, serif; | ||
+ | text-decoration: none; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .green-but { | ||
+ | cursor: pointer; | ||
+ | border: 1px solid #008040; | ||
+ | background: #00b700; | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#80ff00), to(#00b700)); | ||
+ | background: -webkit-linear-gradient(top, #80ff00, #00b700); | ||
+ | background: -moz-linear-gradient(top, #80ff00, #00b700); | ||
+ | background: -ms-linear-gradient(top, #80ff00, #00b700); | ||
+ | background: -o-linear-gradient(top, #80ff00, #00b700); | ||
+ | background-image: -ms-linear-gradient(top, #80ff00 0%, #00b700 100%); | ||
+ | padding: 10.5px 21px; | ||
+ | -webkit-border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | border-radius: 6px; | ||
+ | -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
+ | text-shadow: #7ea4bd 0 1px 0; | ||
+ | color: #008040; | ||
+ | font-size: 14px; | ||
+ | font-family: helvetica, serif; | ||
+ | text-decoration: none; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | |||
+ | .red-but:active { | ||
+ | text-shadow: #1e4158 0 1px 0; | ||
+ | border: 1px solid #800000; | ||
+ | background: #ff6666; | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ff6666)); | ||
+ | background: -webkit-linear-gradient(top, #ff0000, #ff6666); | ||
+ | background: -moz-linear-gradient(top, #ff0000, #ff6666); | ||
+ | background: -ms-linear-gradient(top, #ff0000, #ff6666); | ||
+ | background: -o-linear-gradient(top, #ff0000, #ff6666); | ||
+ | background-image: -ms-linear-gradient(top, #ff0000 0%, #ff6666 100%); | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | .green-but:active { | ||
+ | text-shadow: #1e4158 0 1px 0; | ||
+ | border: 1px solid #008040; | ||
+ | background: #80ff00; | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#00b700), to(#80ff00)); | ||
+ | background: -webkit-linear-gradient(top, #00b700, #80ff00); | ||
+ | background: -moz-linear-gradient(top, #00b700, #80ff00); | ||
+ | background: -ms-linear-gradient(top, #00b700, #80ff00); | ||
+ | background: -o-linear-gradient(top, #00b700, #80ff00); | ||
+ | background-image: -ms-linear-gradient(top, #00b700 0%, #80ff00 100%); | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | .blue-but:active { | ||
+ | text-shadow: #1e4158 0 1px 0; | ||
+ | border: 1px solid #0a3c59; | ||
+ | background: #65a9d7; | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d)); | ||
+ | background: -webkit-linear-gradient(top, #3e779d, #65a9d7); | ||
+ | background: -moz-linear-gradient(top, #3e779d, #65a9d7); | ||
+ | background: -ms-linear-gradient(top, #3e779d, #65a9d7); | ||
+ | background: -o-linear-gradient(top, #3e779d, #65a9d7); | ||
+ | background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%); | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <style> | ||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
</html> | </html> |
Latest revision as of 15:47, 20 January 2013