"

From 2014.igem.org

body { background-color: #666; }

1. wrapper

{ margin-top: 50px; text-align:center; } .overlay{

 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
 background-color: rgba(0,0,0,0.5); /*dim the background*/
 text-align:center;
 display:none;

}

1. overlay_pic {

   margin:200px auto;
   width:400px;
   box-shadow: 10px 10px 5px #000;

}

.jscarousal { width: 940px; height: 150px; background-color: #121212; border: solid 1px #7A7677; margin:0 auto; padding: 0; padding: 22px 8px 22px 8px; position: relative; /*overflow: hidden;*/ } .jscarousal .jscarousal-left, .jscarousal .jscarousal-right { float: left; width: 23px; height: 98px; background-color: #121212; color: White; position: relative; top: 12px; cursor: pointer; } .jscarousal .jscarousal-left { background-image: url(../images/left_arrow.jpg); background-repeat: no-repeat; background-position: left; } .jscarousal .jscarousal-right { background-image: url(../images/right_arrow.jpg); background-repeat: no-repeat; background-position: right; } .jscarousal-contents { width: 890px; height: 160px; float: left; position: relative; overflow: hidden; } .jscarousal-contents > div { position: absolute; width: 100%; height: 160px; } .jscarousal-contents > div > div { float: left; margin-left: 8px; margin-right: 8px; } .jscarousal-contents img { width: 160px; height: 120px; border: solid 1px #7A7677; } .hidden { display: none; } .visible { display: block; } .thumbnail-active { filter: alpha(opacity=100); opacity: 1.0; cursor: pointer; } .thumbnail-inactive { filter: alpha(opacity=60); opacity: 0.6; cursor: pointer; } .thumbnail-text { color: #7A7677; font-weight: bold; text-align: left; display: block; padding: 10px 2px 2px 0px; }