TU-Delft/Templates/CSS

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<style type="text/css">
+
<style>
-
@charset "UTF-8";
+
*{ margin: 0; padding: 0; outline:0; }
-
.slider_container{
+
body {
-
margin:0 auto;
+
    font-size: 12px;
-
background-color:#FFFFFF;
+
    line-height: 22px;
-
overflow:hidden;
+
    font-family: Arial, Helvetica, Sans-Serif;
 +
    color: #4c4c4c;
 +
    background: #fff;
 +
    border-top: 6px solid #2e9dbd;
}
}
-
.main_image_container{
+
 
-
float:left;
+
h1{
-
overflow:hidden;
+
border-bottom: none;
-
position:relative;
+
}
}
-
.main_image_scroller{
+
 
-
float:left;
+
a { color: #0252aa; text-decoration: none; cursor:pointer; }
-
position:relative;
+
a:hover { text-decoration: underline; }
-
width:410px;
+
a img { border: 0; }
-
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{
+
 
-
float:left;
+
h1#logo2 { float: right; display: inline; width: 215px; height: 41px;  }
-
height:385px;
+
h1#logo2 a { display: block; height: 41px; padding-left: 60px;}
-
overflow-y:scroll;
+
 
-
margin-left:5px;
+
#slider2 { height: 100px; background: url(images/team-slider-bg.jpg) repeat-x 0 0;  }
-
background-color:#FFFFFF;
+
.slider-holder2 { position: relative; width: 985px; height: 80px; overflow: hidden; }
-
overflow-x:hidden;
+
.slider-holder2 h1  { color:white; font-weight:bold; font-size:42px; font-family:"Times New Roman", Times, serif;padding-top:30px}
-
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{
+
 
-
padding:6px;
+
.teamMemberColumn.left {
-
padding-left:0px;
+
width: 200px;
-
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;
+
}
}
-
.thumb:hover, .thumb_selected{
+
.teamMemberColumn.middle {
-
filter:alpha(opacity=100);
+
width: 450px;
-
opacity: 1;
+
margin-left: 10px;
-
-moz-opacity:1;
+
display: inline;
}
}
-
.thumb_selected{
+
.teamMemberColumn.right {
-
background:url('selected.gif') no-repeat;
+
width: 245px;
 +
float: right;
}
}
-
.main_image{
+
 
-
float:left;
+
.isimStyle{
-
clear:left;
+
 
-
width:100%;
+
font:bold 24px Tahoma, Geneva, sans-serif;
-
height:100%;
+
font-style:normal;
-
  text-align:center;
+
color:#ffffff;
 +
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{
+
 
-
vertical-align: middle;
+
.photoHolder {
 +
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;
+
 
-
color:#FFFFFF;
+
.photoHolder img {
-
width:100%;
+
width: 80%;
-
background-color:#000000;
+
height: 80%;
-
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 18:07, 24 July 2013

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