Template:Demos sifuentes

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
-
/*--Formatting to remove and alter wiki css defaults--*/
 
-
#contentSub, .firstHeading, #footer-box, #catlinks, #search-controls { display:none;}
 
-
#top-section {padding-top: 0px; border: none;}
 
-
#globalWrapper, #content { width: 100%; background-color: #fff; border: none; margin: 0; padding: 0; position: relative;}
 
-
html, body { height: 100%; background: #fff;}
 
-
body {font: 10px normal Verdana, Arial, Helvetica, sans-serif;  color: #333; background: #f0f0f0;}
 
-
#newcontainer { /*-- Footer specific edits http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ --*/
 
-
width:975px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
position:relative;
 
-
min-height: 100%;
 
-
height: auto !important;
 
-
height: 100%;
 
-
border: 0px solid #000;
 
-
margin: 0 auto -250px;
 
-
color: #333;
 
-
}
 
-
/*--Footer stuff is here--*/
 
-
.newfooter, .pushfooter {height: 235px; clear:both; margin-top: 15px;}
 
-
.newfooter {background: #f0f0f0; color: #000;}
 
-
#footerheader { width: 100%; background: #666;}
 
-
#footerheaderdesc { width: 975px; height: 50px; margin-left:auto; margin-right: auto; padding: 10px 0px 10px 0px;}
 
-
#footerheaderdesc img {display: block; position: relative; padding-right: 20px; float:left;}
 
-
#footerheaderdesc #igemtitle {display: block; position: relative; padding-right: 20px; padding-top: 10px; float:left; color: #fff; font-size: 1.8em; font-weight: bold; }
 
-
#footerheaderdesc #tagline {display: block; position: relative; padding-right: 20px; float:left; color: #fff; font-size: 1em;}
 
-
#newfooterbox {width: 975px; margin-right: auto; margin-left: auto; padding: 10px 0px 10px 0px;}
 
-
#newfooterbox a, #newfooterbox a:hover, #newfooterbox a:visited {color: #666; text-decoration:none;}
 
-
.footertext {width:200px; height: 140px; float: left; border-right: 2px solid #fff; position:relative;}
 
-
.footertext ul, #footertext ul li {  list-style: none;}
 
-
.footerextra {float: right; position: relative; display: block; text-align: right; margin-top: 60px; color: #999;}
 
-
 
+
/*--Slideshow Begins Here--*/
-
a, a:visited {color: #F37321; text-decoration:none;}
+
#slideshow {
-
a:hover {color: #006633; text-decoration:none;}
+
display: block;
-
 
+
vertical-align: middle;
-
/*--Menu Bar CSS--*/
+
position: relative;
-
#navbarcontainer { width: 100%; height: 35px; background: #666; margin-top:0px;}
+
-
#navbar {width:975px; margin-left: auto; margin-right: auto; position:relative; height: 35px;}
+
-
#navbarsocial {float:right; padding-top: 4px;}
+
-
#flashylink {display: block; float: left; border: 0px solid #fff; color: #F37321; text-shadow: #000 1px 1px 1px; padding:3px; line-height: 100%; text-align: center; font-weight: bold; font-size: .8em; -webkit-border-radius: 3px;
+
-
-moz-border-radius: 3px;
+
-
border-radius: 3px; margin-right: 30px;}
+
-
#flashylink a:hover {color: #F37321;}
+
-
 
+
-
/*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/
+
-
ul#topnav {
+
-
margin: 0; padding: 0;
+
-
float: left;
+
-
/*-- width: 960px;--*/
+
-
list-style: none;
+
-
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
+
-
font-size: 1em;
+
-
background: #666/*--url(https://static.igem.org/mediawiki/igem.org/c/c8/Navbar-3.gif) repeat-x--*/;
+
-
z-index: 6;
+
}
}
-
ul#topnav li {
+
/*--Main Container--*/
-
float: left;
+
#main_view {
-
margin: 0; padding: 0;
+
margin-left:auto;
-
height: 35px;
+
margin-right:auto;
-
border-right: 1px solid #ccc; /*--Divider for each parent level links--*/
+
position: relative;
 +
height:300px; width: 780px;
}
}
-
ul#topnav li a {
+
.window {
-
padding: 10px 15px;
+
height:280px; width: 760px;
 +
overflow: hidden; /*--Hides anything outside of the set width/height--*/
 +
position: absolute;
display: block;
display: block;
-
color: #fff;
+
top:50%;
-
font-weight: bold;
+
left:50%;
-
letter-spacing: 1px;
+
margin: -140px 0 0 -380px;
-
text-shadow: #333 1px 1px 1px;
+
}
 +
.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;
}
}
-
ul#topnav li:hover { background: #006633 url(topnav_active.gif) repeat-x; }
+
.pause {
-
ul#topnav li span {
+
-
float: left;
+
-
padding: 10px 0;
+
position: absolute;
position: absolute;
-
z-index:10;
+
bottom: 10px; right: 20px;
-
left: 0; top:35px;
+
width: 25px; height:47px;
-
display: none; /*--Hide by default--*/
+
z-index: 200; /*--Assures the paging stays on the top layer--*/
-
width: 975px;
+
text-align: center;
-
background: #006633;
+
line-height: 40px;
-
color: #fff;
+
font-weight: bold;
-
/*--Bottom right rounded corner--*/
+
display: block; /*--Hidden by default, will be later shown with jQuery--*/
-
-moz-border-radius-bottomright: 10px;
+
-
-khtml-border-radius-bottomright: 10px;
+
-
-webkit-border-bottom-right-radius: 10px;
+
-
/*--Bottom left rounded corner--*/
+
-
-moz-border-radius-bottomleft: 10px;
+
-
-khtml-border-radius-bottomleft: 10px;
+
-
-webkit-border-bottom-left-radius: 10px;
+
}
}
-
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
+
.pause a {
-
ul#topnav li span a { display: inline; }
+
padding: 5px;
-
ul#topnav li span a:hover {text-decoration: underline;}
+
text-decoration: none;
-
/*--Menu Ends Here--*/
+
letter-spacing:1px;
-
 
+
font-weight: thick;
-
.htitle {
+
color: #f0f0f0; text-shadow: #333 1px 1px 1px;
-
display: block;
+
border: 2px solid #ccc;
-
padding: 8px;
+
-moz-border-radius: 3px;
-
font-size: 1.2em;
+
-khtml-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
}
 +
.paging a.active {
font-weight: bold;
font-weight: bold;
-
border-bottom: solid 1px #ccc;
+
border: 2px solid #fff;
-
margin-bottom: 0px;
+
-moz-border-radius: 3px;
-
clear:both;
+
-khtml-border-radius: 3px;
-
color: #000;
+
-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;
}
}
-
.textboxes {
+
#spotlightcontainer {
display: block;
display: block;
position: relative;
position: relative;
-
border: 1px solid #f0f0f0;
+
width: 645px;
 +
}
 +
.main_image {
 +
width: 466px;
 +
height: 282px;
background: #f0f0f0;
background: #f0f0f0;
-
border-bottom: 2px solid #ccc;
+
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;
-
margin-top: 10px; margin-bottom: 10px;
+
background: #fff;
 +
text-align:center;
}
}
-
.innertextbox { /*--Goes inside textboxes class--*/
+
#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;
-
margin: 10px;
+
border: 1px solid #f0f0f0;
-
padding: 20px;
+
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;
-
background: #fff;
+
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