"
Team:IIT Delhi/stylesheet.css
From 2013.igem.org
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
- top-section {
border: none; height: 0px;}
- content {
border: none;}
- {
font-family: 'Palatino Linotype','Book Antiqua',Palatino,serif; margin:0; padding:0; color:#666; }
html {
}
body{ background:#e0ecf1 ; }
.page_margins{
/*
min-width:960px;
max-width:64em;
- /
background:#fff ; width:960px; position:relative; margin:0px auto; padding:16px 16px; }
/* Navbar
- /
#navbar ul {
margin: 0; padding: 5px; list-style-type: none; text-align: center; background-color: #000; }
- navbar ul li {
display: inline; }
- navbar ul li a {
text-decoration: none; padding: .2em 1em; color: #fff; background-color: #000; }
- navbar ul li a:hover {
color: #000; background-color: #fff; }
/* 1. H E A D E R
- /
- header{
position:relative; z-index:2; }
- header .page_margins{
background:#e0ecf1 }
h1{ position:relative; top:20px; text-indent:-9999px; width:25%; height:148px; background:url(../img/logo.png) no-repeat 0 0px; float:left; }
- header h2{
font-size:10px; position:absolute; width:20%; left:16px; top:128px; }
- header p{
width:104px;/*--> Change in Elastic-Layout */ font-size:10px; line-height:normal; text-indent:0; position:absolute; top:32px; left:256px; line-height:12px; font-family:Arial, Helvetica, sans-serif; }
- header p + p{
top:20px; left:376px; }
- header p + p + p{
top:20px; left:496px; }
- header p + p + p + p{
top:20px; left:616px; }
- header p + p + p + p + p{
top:20px; left:736px; }
- header p + p + p + p + p +p{
top:20px; left:856px; }
- header h3{
font-size:16px; line-height:16px; width:224px; position:absolute; top:16px;; left:256px; }
- service-nav{
width:800px; height:22px; position:absolute; right:10; top:158px; background-color:#000; z-index:99; }
- service-nav li{
list-style:none; display:inline; }
- service-nav li a{
color:#FFFFFF; font-size:18px; font-style:italic; text-decoration:none; display:block; float:left; padding:4px 8px 4px 12px; width:100px; background-color:#000; }
- service-nav li a:hover, #service-nav li a:focus{
background-color:#9BB3B7; }
/* 2. A R T I K E L
- /
/* 2.1 Artikel-Head
- /
.article_head{ z-index:1; position:relative; }
.article_head .page_margins{ height:272px; border-top:#000 10px solid; padding-bottom:0;
}
.article_head p.intro{ position:absolute; font-size:18px; line-height:24px; text-align:right; margin-bottom:16px; width:224px; /* --> Change in Elastic-Layout */ top:43px; }
p.intro, p.intro+p, div>p:first-child{ text-indent:0; }
.article_head h2{ position:absolute; text-transform:uppercase; letter-spacing:4px; font-size:5em; line-height:1em; font-weight:normal; width:75%; left:25%; top:97px; margin-left:16px; }
.article_head h3{ font-size:36px; font-style:italic; font-weight:normal; position:absolute; top:34px; width:75%; left:25%; margin-left:16px; }
/*remove Letter-Spacing --> manual kerning*/ h2 span{ letter-spacing:0px; }
.article_info{ color:#999; font-size:10px; border-top:#666 1px solid; text-align:center; margin:0 auto; padding-bottom:4px; width:480px;
}
/* 2.2 Artikel-Body
- /
.article{
margin-bottom:32px; background:url(../img/z30_1_gr.gif) left top no-repeat; }
.article .page_margins{ padding-bottom:32px; padding-top:0;
}
.col{
width:25%;
float:left;
}
.two_col{/* --> to prevent floating too short coloumns */ width:50%; float:left; }
.two_col > .col{ width:50%; float:left; }
.col12{
width:12.5%;
float:left;
}
.col > *, .w50 > *{ margin-right:16px; }
.w50{
width:50%;
margin-right:0;
float:left;
}
.two_col > .w50{ width:25%; }
.w25{ width:25%; margin-right:0; float:left; }
.img{ float:left; margin:0 16px 16px 0; }
.img>img{ width:100%; float:left; }
.w50 > *, .w25 > *, .col12 > *,.no_img > * {/* --> 12,5% coloumns */ font-family:Arial, Helvetica, sans-serif; font-size:10px; line-height:12px; margin-right:16px; }
.w50{ margin-bottom:16px;
}
.right{ float:right; }
p.intro{ font-size:18px; line-height:24px; text-align:left; margin-bottom:16px; }
p{ font-size:14px; line-height:16px; }
.page_margins:first-child:first-child:first-letter{ font-size:22px; }
p + p{ text-indent:16px; }
p + div{ margin-top:16px; }
blockquote{
margin:13px 0;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
padding:8px 16px 12px 16px;
}
blockquote p{ font-size:16px; line-height:16px; font-style:italic; text-align:center; }
abbr, acronym{
font-variant:small-caps;
cursor:help;
font-size:12px;
text-decoration:none;
}
.article strong{ font-variant:small-caps; font-weight:normal; font-size:12px;
}
.article a{
}
.extra{ background:#e0ecf1; padding:10px 10px 16px 10px; clear:both; margin-bottom:16px; }
.extra h3{ text-align:center; font-variant:small-caps;
font-weight:normal; line-height:20px; margin-bottom:8px; letter-spacing:1px; border-bottom:1px solid #000000; border-top:1px solid #000000; background-color:#FFFFFF; padding:10px 0 10px 0; }
.extra p{ line-height:16px; }
div.extra h3 + p:first-letter { font-size:34px; height:34px; position:relative; display:block; float:left; margin-top:5px; margin-right:5px; }
.article_head:after, #header:after, .article:after, .page_margins:after{/* --> clear floats */ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* 3. C A T E G O R I E S
- /
- categories{
position:fixed; width:120px; top:190px; right:-120px; z-index:120; background-color:#222; padding-bottom:16px; }
- categories:hover{
right:0px; }
- categories h4{
cursor:pointer; background-color:#000000; padding:10px; color:#FFFFFF; font-variant:small-caps; text-align:center; position:absolute; left:-30px; width:10px; }
- categories ul, #categories h5{
margin:0px 16px; }
- categories h5{
font-variant:small-caps; color:#FFFFFF; margin:16px 16px 0px 16px; }
- categories ul li{
list-style:none;
}
- categories ul li a{
color:#999999; text-decoration:none; }
- categories ul li a span{
color:#999999; width:18px; display:block; float:left; text-align:left; }
- categories ul li a:hover, #categories ul li a:hover span{
color:#fff; }
