Team:IIT Delhi/stylesheet.css

From 2013.igem.org

Revision as of 09:24, 11 September 2013 by Harshitsinha (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
  • {

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



/* 1. H E A D E R

  • /


  1. header{

background:url(../img/z30_1_gr.gif) right 120px no-repeat; position:relative; z-index:2; }

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

  1. header h2{

font-size:10px; position:absolute; width:20%; left:16px; top:128px; }

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


  1. header p + p{

top:20px; left:376px; }

  1. header p + p + p{

top:20px; left:496px; }

  1. header p + p + p + p{

top:20px; left:616px; }

  1. header p + p + p + p + p{

top:20px; left:736px; }

  1. header p + p + p + p + p +p{

top:20px; left:856px; }


  1. header h3{

font-size:16px; line-height:16px; width:224px; position:absolute; top:16px;; left:256px; }


  1. service-nav{

width:496px; height:22px; position:absolute; right:0; top:158px; background-color:#000; z-index:99; }

  1. service-nav li{

list-style:none; display:inline; }

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

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

  • /
  1. categories{

position:fixed; width:120px; top:190px; right:-120px; z-index:120; background-color:#222; padding-bottom:16px; }

  1. categories:hover{

right:0px; }

  1. categories h4{

cursor:pointer; background-color:#000000; padding:10px; color:#FFFFFF; font-variant:small-caps; text-align:center; position:absolute; left:-30px; width:10px; }

  1. categories ul, #categories h5{

margin:0px 16px; }

  1. categories h5{

font-variant:small-caps; color:#FFFFFF; margin:16px 16px 0px 16px; }

  1. categories ul li{

list-style:none;

}

  1. categories ul li a{

color:#999999; text-decoration:none; }


  1. categories ul li a span{

color:#999999; width:18px; display:block; float:left; text-align:left; }


  1. categories ul li a:hover, #categories ul li a:hover span{

color:#fff; }

Retrieved from "http://2013.igem.org/Team:IIT_Delhi/stylesheet.css"