TU-Delft/Templates/CSS

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <style type="text/css"> @charset "UTF-8"; * { margin: 0; padding: 0; outline:0; } body { font-size: 12px; line-height: 22px; font-family: Arial, Helvetica, Sa...")
Line 2: Line 2:
<style type="text/css">
<style type="text/css">
@charset "UTF-8";
@charset "UTF-8";
-
* { margin: 0; padding: 0; outline:0; }
 
-
body {
+
.slider_container{
-
    font-size: 12px;
+
margin:0 auto;
-
    line-height: 22px;
+
background-color:#FFFFFF;
-
    font-family: Arial, Helvetica, Sans-Serif;
+
overflow:hidden;
-
    color: #4c4c4c;
+
-
    background: #fff;
+
-
    border-top: 6px solid #2e9dbd;
+
}
}
-
 
+
.main_image_container{
-
h1{
+
float:left;
-
border-bottom: none;
+
overflow:hidden;
 +
position:relative;
}
}
-
 
+
.main_image_scroller{
-
a { color: #0252aa; text-decoration: none; cursor:pointer; }
+
float:left;
-
a:hover { text-decoration: underline; }
+
position:relative;
-
a img { border: 0; }
+
width:410px;
-
 
+
height:385px;
-
input, textarea, select { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
+
-
textarea { overflow: auto; }
+
-
input { border: 0; }
+
-
 
+
-
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
+
-
.notext { font-size: 0; line-height: 0; }
+
-
 
+
-
.left, .alignleft { float: left; display: inline; }
+
-
.right, .alignright { float: right; display: inline; }
+
-
 
+
-
.shell { width: 985px; margin: 0 auto; }
+
-
 
+
-
#header { height: 132px; }
+
-
#header .shell { position: relative; height: 132px; z-index: 5; }
+
-
 
+
-
h1#logo { float: left; display: inline; width: 215px; }
+
-
h1#logo a { display: block; }
+
-
 
+
-
#navigation { float: right; display: inline; margin-top: 55px; }
+
-
#navigation ul { float: left; display: inline; list-style: none outside none; padding-top: 5px; }
+
-
#navigation ul li { position: relative; float: left; display: inline; margin-right: 15px; }
+
-
#navigation ul li a { float: left; display: inline; height: 22px; color: #767670; font-size: 14px; line-height: 23px; font-family: "Lucida Sans", Arial, Sans-serif; }
+
-
#navigation ul li a span { padding-right: 16px; }
+
-
#navigation ul li a:hover,
+
-
#navigation ul li a.active { color: #000; text-decoration: none; }
+
-
#navigation ul li a.hover,
+
-
#navigation ul li a.hover span.link { float: left; display: inline;  color: #000; background: url(images/nav-hover.gif) no-repeat 0 0;  }
+
-
#navigation ul li a.hover { z-index: 10; }
+
-
#navigation ul li a.hover span.link { background-position: right 0; }
+
-
#navigation ul li .dd-holder { position: absolute; top: 19px; left: 0; display: none;  width: 139px; z-index: 5;  }
+
-
#navigation ul li .dd-t { width: 139px; height: 3px; display: block; background: url(images/dd-t.png) no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }
+
-
#navigation ul li .dd-b { width: 139px; height: 6px; display: block; background: url(images/dd-b.png) no-repeat 0 0;}
+
-
#navigation ul li .dd { background: url(images/dd-bg.png) repeat-y 0 0; padding-top: 5px; }
+
-
#navigation ul li .dd ul { float: none; }
+
-
#navigation ul li .dd ul li { float: none; display: block; height: 23px; background: url(images/sub-menu-divider.gif) no-repeat center bottom; margin: 0; font-size: 0; line-height: 0;  }
+
-
#navigation ul li .dd ul li.last { background: none; }
+
-
#navigation ul li .dd ul li a { float: none; display: block; width: 112px; height: 20px; color: #babab7; font-size: 12px; line-height: 19px; padding-left: 15px;  }
+
-
#navigation ul li .dd ul li a:hover { color: #28a1c3; }
+
-
#navigation ul li .dd ul li a.hover { background: none; }
+
-
#navigation ul li .dd ul li a.subhover { background: transparent url(images/blue-arrow.gif) no-repeat right 8px; }
+
-
#navigation ul li .dd-holder .dd-holder { top: -5px; left: 100%; }
+
-
#navigation ul li a .hide { position: absolute; top:  19px; left:4px; height: 3px; display: none; background: #fff !important; padding: 0; z-index: 10; overflow: hidden; }
+
-
#navigation .buy-now { float: left; display: inline; width: 99px; height: 34px; background: url(images/buy-now.gif) no-repeat 0 0; font-size: 14px; color: #fff;  text-align: center; line-height: 32px; font-family: "Lucida Sans Demibold Roman", Arial, Sans-serif; }
+
-
 
+
-
.search { position: absolute; top: 0;  right: 0; width: 191px; height: 26px; display: block; background: url(images/search-bg.gif) no-repeat 0 0; padding: 1px 0 0 5px; }
+
-
.search .field { float: left; display: inline; width: 155px; height: 21px; background: url(images/search-field-bg.gif) no-repeat 0 0; }
+
-
.search .field input { background-color: transparent; width: 145px; color: #bebebe; font-size: 10px; line-height: 19px; text-transform: uppercase; padding: 5px 5px 0; }
+
-
.search .search-btn { float: left; display: inline; width: 29px; height: 21px; background: url(images/search-field-bg.gif) no-repeat right 0; cursor: pointer; }
+
-
 
+
-
#slider { height: 350px; background: url(images/slider-bg.jpg) repeat-x 0 0; }
+
-
.slider-holder { position: relative; width: 985px; height: 350px; overflow: hidden; }
+
-
.slider-holder ul  { position: relative; list-style: none outside none; overflow: hidden; }
+
-
.slider-left { position: relative; float: left; display: inline; width: 300px; height: 350px; overflow: hidden; }
+
-
.slider-left ul li { height: 350px; width: 295px; color: #fff;  }
+
-
.slider-left .jcarousel-clip { position: relative; width: 295px; height: 350px; }
+
-
.slider-left ul li h2 { font-size: 24px; line-height: 24px; font-weight: normal; font-family: "Lucida Sans", Arial, Sans-serif; margin-bottom: 6px; margin-top: 30px ; }
+
-
.slider-right { position: relative; float: right; display: inline; width: 658px; height: 350px; background: url(images/slider-rightbg.jpg) no-repeat 0 0; overflow: hidden; padding-left: 13px;  }
+
-
.slider-right ul li,
+
-
.slider-right .jcarousel-clip { position: relative; width:642px; height: 348px; }
+
-
.slider-right ul li img { margin-top: 1px; }
+
-
 
+
-
.slider-nav { position: absolute; bottom: 22px; left: 95px; z-index: 5; }
+
-
.slider-nav a { float: left; display: inline; width: 20px; height: 20px; background: url(images/slider-nav.gif) no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; margin-right: 5px;  }
+
-
.slider-nav a:hover,
+
-
.slider-nav a.active { background-position: right 0; }
+
-
 
+
-
#main { padding: 25px 0 50px; }
+
-
 
+
-
.last { margin-right: 0 !important; }
+
-
 
+
-
.col { float: left; display: inline; width: 290px; margin-right: 52px; }
+
-
.col h2 { font-size: 20px; font-weight: normal; border-bottom: 1px solid #ddd; padding-bottom: 4px; margin-bottom: 10px; font-family: "Lucida Sans", Arial, sans-serif; }
+
-
.col .find-more { font-size: 11px; color: #00b4ea; text-decoration: underline; font-weight: bold; }
+
-
.col .find-more:hover { color: #000; text-decoration: none; }
+
-
 
+
-
#footer { border-top: 1px solid #ddd; font-size: 11px; color: #7f7f7f; font-family: "Lucida Sans", Arial, sans-serif; padding: 10px 0; }
+
-
#footer a { color: #7f7f7f; }
+
-
#footer p.right span { padding: 0 3px; }
+
-
 
+
-
#menubar  li{
+
-
cursor: pointer;
+
}
}
-
 
+
.thumbs_list_container{
-
h1#logo2 { float: right; display: inline; width: 215px; height: 41px;  }
+
float:left;
-
h1#logo2 a { display: block; height: 41px; padding-left: 60px;}
+
height:385px;
-
 
+
overflow-y:scroll;
-
#slider2 { height: 100px; background: url(images/team-slider-bg.jpg) repeat-x 0 0;  }
+
margin-left:5px;
-
.slider-holder2 { position: relative; width: 985px; height: 80px; overflow: hidden; }
+
background-color:#FFFFFF;
-
.slider-holder2 h1  { color:white; font-weight:bold; font-size:42px; font-family:"Times New Roman", Times, serif;padding-top:30px}
+
overflow-x:hidden;
-
 
+
width:150px;
-
+
-
.teamMember {
+
-
float: left;
+
-
width: 920px;
+
-
background: url(images/metu-team-member-line.png) no-repeat bottom center;
+
-
padding-bottom: 5px;
+
-
margin-bottom: 10px;
+
-
}
+
-
 
+
-
.teamMemberColumn {
+
-
float: left;
+
}
}
-
 
+
.thumb{
-
.teamMemberColumn.left {
+
padding:6px;
-
width: 200px;
+
padding-left:0px;
 +
padding-right:1px;
 +
background:#FFFFFF;
 +
margin:3px;
 +
filter:alpha(opacity=50);
 +
opacity: 0.50;
 +
-moz-opacity:0.50;
 +
width:114px;
 +
overflow-x:hidden;
 +
height:62px;
 +
padding-left:12px;
 +
background:#ffffff;
 +
cursor:pointer;
}
}
-
.teamMemberColumn.middle {
+
.thumb:hover, .thumb_selected{
-
width: 450px;
+
filter:alpha(opacity=100);
-
margin-left: 10px;
+
opacity: 1;
-
display: inline;
+
-moz-opacity:1;
}
}
-
.teamMemberColumn.right {
+
.thumb_selected{
-
width: 245px;
+
background:url('selected.gif') no-repeat;
-
float: right;
+
}
}
-
 
+
.main_image{
-
.isimStyle{
+
float:left;
-
 
+
clear:left;
-
font:bold 24px Tahoma, Geneva, sans-serif;
+
width:100%;
-
font-style:normal;
+
height:100%;
-
color:#ffffff;
+
  text-align:center;
-
background:#30b321;
+
-
border:0px solid #ffffff;
+
-
text-shadow:-1px -1px 1px #222222;
+
-
box-shadow:2px 2px 5px #000000;
+
-
-moz-box-shadow:2px 2px 5px #000000;
+
-
-webkit-box-shadow:2px 2px 5px #000000;
+
-
border-radius:10px 10px 10px 10px;
+
-
-moz-border-radius:10px 10px 10px 10px;
+
-
-webkit-border-radius:10px 10px 10px 10px;
+
-
width:164px;
+
-
padding:0px 43px;
+
-
cursor:pointer;
+
-
margin:0 auto;
+
-
float:left;
+
}
}
-
 
+
.main_image img{
-
.photoHolder {
+
vertical-align: middle;
-
float: left;
+
-
background: url(images/metu-photo-holder.png) no-repeat top center;
+
-
background-size:100%;
+
-
width: 160px;
+
-
height: 215px;
+
-
padding: 20px 0 0 32px;
+
}
}
-
 
+
.description_container{
-
 
+
position:absolute;
-
.photoHolder img {
+
color:#FFFFFF;
-
width: 80%;
+
width:100%;
-
height: 80%;
+
background-color:#000000;
 +
bottom:0;
 +
filter:alpha(opacity=80);
 +
opacity: 0.80;
 +
-moz-opacity:0.80;
 +
font-weight:bold;
 +
padding:5px;
}
}
-
.teamBoard {
 
-
background: url(images/metu-background-blue.png) no-repeat top center;
 
-
}
 
-
 
-
.teamBoard, .teamBoard{
 
-
float: right;
 
-
width: 175px;
 
-
height: 175px;
 
-
background: url(images/metu-background-blue.png) no-repeat top center;
 
-
background-size: 100%;
 
-
padding: 65px 30px 0 35px;
 
-
}
 
</style>
</style>
</html>
</html>

Revision as of 14:37, 24 July 2013

Retrieved from "http://2013.igem.org/TU-Delft/Templates/CSS"