Team:MIT/css/kwicks
From 2011.igem.org
/* This css file serves as a template for styling your kwicks. Feel free to modify, but please make note of the comments - some of them are important. */
.kwicks { /* recommended styles for kwicks ul container */ list-style: none; position: relative; margin: 0px; padding: 0px;
margin-left:auto; margin-right:auto; padding-top:1px; padding-bottom:1px; }
.kwicks li{ /* these are required, but the values are up to you (must be pixel) */ width: 190px; height: 50px;
/*do not change these */ display: block; overflow: hidden; padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */ margin:0; font-family:'century gothic','lucida sans unicode', sans-serif; }
.kwicks.horizontal li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 5px; /*Set to same as spacing option. */
float: left;
}
.kwicks.vertical li{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px; /*Set to same as spacing option. */
}
- kwick_1 {
background-color: #828282; background-color: #616161; /* background-color: #53b388;*/ }
- kwick_1.active {
background-color: #B3B3B3; background-color: #828282; }
- kwick_2 {
background-color: #5a69a9; background-color: #828282; background-color: #616161; }
- kwick_2.active {
background-color: #B3B3B3; background-color: #828282; }
- kwick_3 {
background-color: #c26468; background-color: #828282; background-color: #616161; }
- kwick_3.active {
background-color: #B3B3B3; background-color: #828282; }
- kwick_4 {
background-color: #bf7cc7; background-color: #828282; background-color: #616161; }
- kwick_4.active {
background-color: #B3B3B3; background-color: #828282; }
- kwick_5 {
background-color: #FFAD42; background-color: #828282; background-color: #616161; }
- kwick_5.active {
background-color: #B3B3B3; background-color: #828282; }
.kwicks.horizontal #kwick_5 { margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */ } .kwicks.vertical #kwick_5 { margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */ }
.section {
color:white; font-weight:normal; border-right-style:solid; border-width:1px; width:185px; float:left; /* padding-top: 30px;*/ padding-left:5px; text-transform:uppercase; font-size: 15px; letter-spacing:.2em; position:absolute; /* top:50%; height:4.5em; margin-top:-2.25em;*/ text-align:center;
}
.section table, .section-links table { width: 100%; height: 50px; text-align: center; }
.section td, .section-links td { vertical-align: middle; }
.section-contain { position:relative; width:100%;height:100%; }
.section-links {
position:absolute;
margin-left:195px;
/* padding:5px;*/
/* top:15%;*/
font-size:12px; color:white; width: 190px; text-align:center; }