Template:Demos sifuentes
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /*--Slideshow Begins Here--*/ | |
- | + | #slideshow { | |
- | + | display: block; | |
- | + | vertical-align: middle; | |
- | /*-- | + | position: relative; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | position: relative | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | /*--Main Container--*/ | |
- | + | #main_view { | |
- | margin: | + | margin-left:auto; |
- | height: | + | margin-right:auto; |
- | + | position: relative; | |
+ | height:300px; width: 780px; | ||
} | } | ||
- | + | .window { | |
- | + | height:280px; width: 760px; | |
+ | overflow: hidden; /*--Hides anything outside of the set width/height--*/ | ||
+ | position: absolute; | ||
display: block; | display: block; | ||
- | + | top:50%; | |
- | font-weight: bold; | + | left:50%; |
- | + | margin: -140px 0 0 -380px; | |
- | + | } | |
+ | .image_reel { | ||
+ | position: absolute; | ||
+ | top: 0; left: 0; | ||
+ | } | ||
+ | .image_reel img {float: left;} | ||
+ | .paging { | ||
+ | position: absolute; | ||
+ | bottom: 10px; right: 50px; | ||
+ | width: 300px; height:47px; | ||
+ | z-index: 100; /*--Assures the paging stays on the top layer--*/ | ||
+ | text-align: right; | ||
+ | line-height: 40px; | ||
+ | font-weight: bold; | ||
+ | background: url(paging_bg2.png) no-repeat; | ||
+ | display: none; /*--Hidden by default, will be later shown with jQuery--*/ | ||
+ | } | ||
+ | .paging a { | ||
+ | padding: 5px; | ||
text-decoration: none; | text-decoration: none; | ||
+ | color: #fff; text-shadow: #333 1px 1px 1px; | ||
} | } | ||
- | + | .pause { | |
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
- | + | bottom: 10px; right: 20px; | |
- | + | width: 25px; height:47px; | |
- | + | z-index: 200; /*--Assures the paging stays on the top layer--*/ | |
- | width: | + | text-align: center; |
- | + | line-height: 40px; | |
- | + | font-weight: bold; | |
- | + | display: block; /*--Hidden by default, will be later shown with jQuery--*/ | |
- | - | + | |
- | - | + | |
- | - | + | |
- | /*-- | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .pause a { | |
- | + | padding: 5px; | |
- | + | text-decoration: none; | |
- | + | letter-spacing:1px; | |
- | + | font-weight: thick; | |
- | + | color: #f0f0f0; text-shadow: #333 1px 1px 1px; | |
- | + | border: 2px solid #ccc; | |
- | + | -moz-border-radius: 3px; | |
- | + | -khtml-border-radius: 3px; | |
+ | -webkit-border-radius: 3px; | ||
+ | } | ||
+ | .paging a.active { | ||
font-weight: bold; | font-weight: bold; | ||
- | border | + | border: 2px solid #fff; |
- | margin- | + | -moz-border-radius: 3px; |
- | + | -khtml-border-radius: 3px; | |
- | + | -webkit-border-radius: 3px; | |
+ | } | ||
+ | .paging a:hover {font-weight: bold;} | ||
+ | /*--Slideshow Ends Here--*/ | ||
+ | |||
+ | /*--Spotlight Stuff Begins Here--*/ | ||
+ | #spotlight { | ||
+ | margin-left:0px; | ||
+ | margin-right:auto; | ||
+ | width: 645px; | ||
+ | height: 350px; | ||
} | } | ||
- | + | #spotlightcontainer { | |
display: block; | display: block; | ||
position: relative; | position: relative; | ||
- | + | width: 645px; | |
+ | } | ||
+ | .main_image { | ||
+ | width: 466px; | ||
+ | height: 282px; | ||
background: #f0f0f0; | background: #f0f0f0; | ||
- | + | position: relative; | |
+ | overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/ | ||
+ | color: #fff; | ||
+ | border: 0px solid #006633; | ||
+ | float: left; | ||
+ | } | ||
+ | .main_image .spottab { | ||
+ | font-size: 1.2em; | ||
+ | font-weight: normal; | ||
+ | padding: 5px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .main_image p { | ||
+ | font-size: 1em; | ||
+ | line-height:110%; | ||
+ | padding: 0px 10px 5px 10px; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | .main_image .desc{ | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | left: 0; /*--Stick the desc class to the bottom of our main image container--*/ | ||
+ | width: 100%; | ||
+ | display: none; /*--Hide description by default, if js is enabled, we will show this--*/ | ||
+ | } | ||
+ | .main_image .block{ | ||
+ | width: 100%; | ||
+ | background: #111; | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | } | ||
+ | .main_image a.show {background-position: left bottom;} | ||
+ | .image_thumb { | ||
+ | float: left; | ||
+ | width: 179px; | ||
+ | background: #f0f0f0; | ||
+ | } | ||
+ | .image_thumb ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | .image_thumb ul li{ | ||
+ | margin: 0; | ||
+ | padding: 0px 0px; | ||
+ | width: 179px; | ||
+ | height: 44px; | ||
+ | float: left; | ||
+ | background: #f0f0f0; | ||
+ | border-bottom: 3px solid #006633; | ||
+ | } | ||
+ | .image_thumb ul li.hover { /*--Hover State--*/ | ||
+ | background: #fff; | ||
+ | cursor: pointer; | ||
+ | border-bottom: 3px solid #F37321; | ||
+ | } | ||
+ | .image_thumb ul li.active { /*--Active State--*/ | ||
+ | background: #fff; | ||
+ | cursor: default; | ||
+ | border-bottom: 3px solid #F37321; | ||
+ | } | ||
+ | .image_thumb ul li .spottab { | ||
+ | font-size: .9em; | ||
+ | color: #333; | ||
+ | margin: 0px 0; | ||
+ | padding: 5px; | ||
+ | text-decoration:none; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .image_thumb ul li .block { | ||
+ | float:left; | ||
+ | } | ||
+ | .image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/ | ||
+ | /*--Spotlight Stuff Ends Here--*/ | ||
+ | |||
+ | /*--Twitter Stuff Begins Here--*/ | ||
+ | #twidget { /*--Goes with textboxes class--*/ | ||
+ | margin-left:auto; | ||
+ | margin-right:0px; | ||
+ | width: 300px; | ||
+ | height: 350px; | ||
+ | } | ||
+ | #twitterfeed { /*--Defines block area for twitter feed--*/ | ||
+ | display: block; | ||
+ | border: 0px solid #000; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | #twitterfeed p { font: 11px normal Verdana, Arial, Helvetica, sans-serif;} | ||
+ | /*--Twitter Stuff Ends Here--*/ | ||
+ | |||
+ | /*--TagLine Begins Here--*/ | ||
+ | #sponsors { /*--Goes with textboxes class--*/ | ||
+ | margin-left:0px; | ||
+ | margin-right:0px; | ||
+ | } | ||
+ | #sponsorsbox { /*--Goes with textboxes class--*/ | ||
+ | margin: 10px; | ||
-webkit-border-radius: 10px; | -webkit-border-radius: 10px; | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
border-radius: 10px; | border-radius: 10px; | ||
- | + | background: #fff; | |
+ | text-align:center; | ||
} | } | ||
- | + | #sponsorsbox img {padding: 10px; } | |
+ | #happeningnow {height: 284px; margin-top:15px; margin-bottom:10px; width: 975px; border: 1px solid #000;} | ||
+ | #happeningnow .widget { | ||
+ | width: 305px; | ||
+ | height: 100%; | ||
display: block; | display: block; | ||
position: relative; | position: relative; | ||
- | + | border: 1px solid #f0f0f0; | |
- | + | background: #f0f0f0; | |
+ | border-bottom: 2px solid #ccc; | ||
-webkit-border-radius: 10px; | -webkit-border-radius: 10px; | ||
-moz-border-radius: 10px; | -moz-border-radius: 10px; | ||
border-radius: 10px; | border-radius: 10px; | ||
- | + | margin-left: auto; | |
- | } | + | margin-right: auto;} |
+ | #happeningnow .widget-title {font-size: 11pt; font-weight: bold; padding: 2px; text-align: center; border-bottom: solid 1px #ccc;} | ||
+ | #happeningnow .widget img {display: block; margin-left: auto; margin-right: auto; height: 60px; margin-top: 2px;} | ||
+ | #happeningnow .happeningnowbar {font-size: 11pt; font-weight: bold; padding: 5px; height:36px; display: block;} | ||
+ | #happeningnow .innertextbox {height:118px; padding: 5px; margin-top: 0px; margin-bottom: 5px; font-size: 9pt; color: #333; display:block;} | ||
+ | |||
+ | |||
+ | #happeningnow li, #happeningnow ul {list-style-position: outside; margin-left: 12px;} | ||
+ | #happeningnow ul {display:block; height: 100px; overflow: hidden;} | ||
+ | #happeningnow li {margin-bottom:4px;} | ||
+ | #happeningnow .seemore {display: block; bottom: 0; position:absolute; right: 0;} | ||
+ | |||
+ | #happeningnow .widget-url {font-size: 11pt; font-weight: bold; padding: 2px; text-align: center;} | ||
</style> | </style> | ||
</html> | </html> | ||
- | |||
Revision as of 21:22, 1 December 2014