Team:INSA Toulouse/template/stylesheet
From 2013.igem.org
Line 223: | Line 223: | ||
overflow :hidden; | overflow :hidden; | ||
margin-top: 14px; | margin-top: 14px; | ||
- | width: | + | width: 970px; |
- | height: | + | height: 442px; |
border: 1px solid #FFFFFF; | border: 1px solid #FFFFFF; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | ||
Line 235: | Line 235: | ||
.items div { | .items div { | ||
float: left; | float: left; | ||
- | width: | + | width: 970px; |
- | height: | + | height: 442px;} |
.prev { | .prev { | ||
background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat; | background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat; | ||
Line 242: | Line 242: | ||
width: 74px; | width: 74px; | ||
position: absolute; | position: absolute; | ||
- | left: - | + | left: -486px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */ |
top: 310px; | top: 310px; | ||
margin-left: 50%; | margin-left: 50%; |
Revision as of 13:04, 24 September 2013
/* Removing wiki-like stuff */ /****************************/
- contentSub, #search-controls, .firstHeading, #-box, #catlinks, #p-logo {
display:none;}
/* Redesigning the topmenu */ /***************************/ body {
: 0 0 0 0; padding: 0;}
- top-section {
width: 965px; height: 0; margin: 0 auto ; padding: 0; border: none;}
- menubar {
font-size: 100%; top:-8px;}
.left-menu:hover {
background-color: transparent;}
- menubar li a {
background-color: transparent;}
- menubar:hover {
color: black;}
- menubar li a {
color: transparent;}
- menubar:hover li a {
color: black;}
- menubar > ul > li:last-child {
display:none;}
/* Layout */ /**********/
body, #heading, #innercontent, #innercontenthome {
background-color: #f3f3f3;}
- innercontenthome{
margin-top:-13px;}
- content, #globalWrapper {
border: none; width: 100%; margin: 0; padding: 0;}
.centering {
margin: 0 auto; width: 965px;}
.clear{
clear:both;
}
/* *********** header ************* */
.barheader{
background-color:#64b0e7; height: 34px; width: 100%; margin-top:-6px;
}
- header {
background: url("") repeat-x; height: 127px; width: 100%; border-top: 1px solid #64b0e7; border-bottom: 1px solid #f6f6f6;} position: relative;
.barheader .centering {
position:relative;
}
.logoheader{
padding-top:45px; }
/* ************ navigation header **************** */
- navigation,.navigation {
} .navigation {
z-index: 1; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); position: relative;}
/* stick navigation */ .stickToTop {
position: fixed; background-color: #f6f6f6; top:0; width:100%;}
.stickToTop .navlink{
display:none;}
.stickToTop li{
top:-12px; }
.stickToTop ul.topnav li ul.subnav {
top: 46px;
}
ul.topnav { list-style: none; padding: 0; margin: 26px 0 0 124px; float: left; width: 100%; font-size: 16px;
padding-left:270px;
} ul.topnav li { float: left; margin: 0; padding: 2px 33px; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } ul.topnav li a { padding: 7px 0px 5px; color: #010101; display: block; text-decoration: none; float: left; }
ul.topnav > li > a {
height: 40px; overflow: hidden; padding-top: 44px; text-align:center; line-height:17px;}
ul.topnav > li > a > span{
display:none;}
ul.topnav li:first-child a{ padding-left: 0; }
li.navitem1 {
background:url() no-repeat center top; width:34px; height:34px; background-position: 43px 0;}
li.navitem2 {
background:url() no-repeat center top; width:34px; height:34px; background-position: 38px 0;}
li.navitem3 {
background:url() no-repeat center top; width:34px; height:34px; background-position: 45px 0;}
li.navitem4 {
background:url() no-repeat center top; width:34px; height:34px; background-position: 42px 0;}
li.navitem5 {
background:url() no-repeat center top; width:34px; height:34px; background-position: 36px 0;}
li.navitem6 {
background:url() no-repeat center top; width:34px; height:34px; background-position: 36px 0;}
li.navitem7 {
background:url() no-repeat center top; width:40px; height:40px; background-position: 36px 0;}
ul.topnav li ul.subnav {
z-index: 1; //Stay on top of slider
list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 5px; top: 85px; background: #50a29b; margin: 0; padding: 0; display: none; float: left; } ul.topnav li ul.subnav li { margin: 0; padding: 0; clear: both;
list-style: none outside none;
} ul.topnav li ul.subnav, ul.topnav li ul.subnav li {
width: 160px;
}
html ul.topnav li ul.subnav li a { float: left;
padding-left: 10px; padding-right: 10px; width: 143px; color:#f6f6f6;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #96d2cd; }
/* Slider (thanks to flowplayer.org) */ /*************************************/ .scrollable { /* required settinsg */ position: relative; overflow :hidden;
margin-top: 14px; width: 970px; height: 442px; border: 1px solid #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */ background: #FFFFFF;}
.scrollable .items { /* this cannot be too large */ width: 50000px; position: absolute;} .items div { float: left; width: 970px; height: 442px;} .prev {
background: url() no-repeat; height: 74px; width: 74px; position: absolute; left: -486px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */ top: 310px; margin-left: 50%; cursor: pointer;}
.next {
background: url() no-repeat; height: 74px; width: 74px; margin-right: 50%; position: absolute; right: -519px; /* floor(963/2) + 74/2 = 481 + 37 = 518 */ top: 310px; cursor: pointer;}
.disabled {
visibility: hidden;}
/* bar Inner*/
/**********/
.bar-inner{
width:100%; height:32px; background-color:#ececec;
}
/* sidebar*/ /**********/
.sidebar{
width: 240px; margin: 25px 0 25px 0; float: left;
}
/* Footer */ /**********/
- footer-panel {
background: #333333; height: 100%; margin-top: -7px;}
- bodyContent {
background: #76c0c7;}
- footer-panel h3 {
color: #fff; font-weight: bold;}
- footer-panel h4 {
color: #fff;}
- footer-panel p {
color: #fff;}
div.footerBox {
border-right: 1px solid; float: left; margin: 10px 20px 10px 0; padding: 0 20px 0 0; width: 294px; min-height: 270px;}
div.footerBox:last-child {
border: none; margin: 10px 0; padding: 0;}