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. */ }


  1. kwick_1 {

background-color: #828282; background-color: #616161; /* background-color: #53b388;*/ }

  1. kwick_1.active {

background-color: #B3B3B3; background-color: #828282; }

  1. kwick_2 {

background-color: #5a69a9; background-color: #828282; background-color: #616161; }

  1. kwick_2.active {

background-color: #B3B3B3; background-color: #828282; }

  1. kwick_3 {

background-color: #c26468; background-color: #828282; background-color: #616161; }

  1. kwick_3.active {

background-color: #B3B3B3; background-color: #828282; }

  1. kwick_4 {

background-color: #bf7cc7; background-color: #828282; background-color: #616161; }

  1. kwick_4.active {

background-color: #B3B3B3; background-color: #828282; }

  1. kwick_5 {

background-color: #FFAD42; background-color: #828282; background-color: #616161; }

  1. 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; }