Team:Imperial College/skin.css

From 2013.igem.org

Revision as of 08:08, 6 August 2013 by Mc1110 (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

@import "reset.css"; body { color:#333; font:75%/1.35em georgia,times,serif; } h1,h2, h3, h4, h5, h6 {

  color:rgb(230,85,39);

font-family:'Helvetica',sans-serif;

  font-weight:normal;
  line-height:1.5em;

} h1 { font-family:'Helvetica',sans-serif; font-size:24px;

  text-transform:uppercase;

} h2 { font-size:36px; } h3 { color:rgb(0,112,106); font-size:22px; text-shadow:1px 1px 0 #fff; } h4 {

  font-size:20px;

} h5 { color:#00A99D;

  font-size:2em;

font-weight:bold; padding-top:30px; line-height:1.2em; } h6 { color:#de3c1a;

  font-size:1.3em;

font-weight:bold; padding-top:30px; }

p { color:#111;

  font-family:georgia,serif;
  font-size:16px;
  line-height:1.7em;
  margin-bottom:1.5em;
  text-shadow:1px 1px 0px #fff;

}

.more { text-decoration:underline !important; }

/* Spacing


*/

hr { border:0 #fff solid; border-top-width:1px; clear:both; height:0; } blockquote { margin-right:10px; padding:5px 0 20px 0; } ul, ol {

  margin-top:20px;

padding-left:20px; } ul li { font-size:15px;

  list-style:disc;
  }

li { line-height:1.35;

  margin-bottom:1.35em;
  margin-left:20px;

}


/* Layout


*/

html { background:transparent url('../images/background.png') repeat; } body { margin-bottom:20px; width:960px; margin:0 auto; border:none; }

header { background-image:url('../images/header_bg.png'); background-repeat:no-repeat;

  border:none;
  margin-top:10px;
  padding-top:50px;
  width:100%;

} header h1 { background-image:url('../images/logo.png');

  background-repeat:no-repeat;
  height:70px;
  margin-left:20px;
  padding-left:300px;
  padding-top:17px;
  text-align:right;
  text-shadow:0 1px white;
  text-transform:uppercase;
  width:610px;

} header nav { background:rgb(0,162,153) url('../images/nav_bar_bg.png') 0 0 no-repeat; clear:both; display:block; min-height:360px; font-family:'Helvetica', sans-serif; } header nav a { background-color:transparent;

  background-image:url(../images/header_navigation.png);
  background-repeat:no-repeat;
  color:rgba(255,255,255,.75);

display:block; float:left; font-family:'Helvetica', sans-serif; font-size:2em; font-weight:normal; line-height:1.35em;

  margin:40px 60px 0;

padding:220px 0 0; text-align:center; text-decoration:none; text-shadow:0px 2px #007560; text-transform:uppercase; vertical-align:baseline; width:200px; } header nav a.welcome_tile { background-position:0 0; } header nav a.welcome_tile:hover { background-position:-200px 0; } header nav a.welcome_tile.selected { background-position:-400px 0; } header nav a.hardcore_tile { background-position:-600px 0; } header nav a.hardcore_tile:hover { background-position:-800px 0; } header nav a.hardcore_tile.selected { background-position:-1000px 0; } header nav a.tips_tile { background-position:-1200px 0; } header nav a.tips_tile:hover { background-position:-1400px 0; } header nav a.tips_tile.selected { background-position:-1600px 0; } header nav a.selected,header nav a:hover { color:rgba(255,255,255,1); }

article, form { background:url(../images/body_bg.png); border:none; display:block; overflow:auto; padding:40px; width:880px; } article a {

  color:rgb(222,60,26);
  }

article a {

  font-weight:bold;
  font-size:.95em;
  outline:none;
  }

article a:visited {

  color:rgb(222,60,26);;
  text-decoration:none;
  }

article a:hover {

  color:rgb(30,30,30);
  }

article a:active {

  text-decoration:none;
  }

article div { float:left; width:400px; } article div:nth-of-type(2) { margin-left:80px; } article strong {

  font-size:.95em;
  }

article div img {

  margin:0 0 30px;
  }

article div p + img {

  margin:0 0 20px;

} article div ul {

  margin-right:30px;
  }
  1. shortcuts {
  width:880px;
  }
  1. shortcuts p {
  margin-bottom:1.5em;
  }
  1. shortcuts ul {
  margin:0;
  padding:0;
  }
  1. shortcuts > ul > li {
  color:#de3c1a;
  float:left;
  font-family:'Helvetica',sans-serif;
  font-size:22px;
  list-style:none;
  margin:0 0 1.35em;
  padding:0;
  width:270px;
  }
  1. shortcuts > ul > li:nth-child(3n+2) {
  margin:0 23px;
  }
  1. shortcuts > ul > li:nth-child(3n+1) {
  clear:left;
  }
  1. shortcuts ul ul {
  background-color:rgba(255,255,255,.75);
  border-radius:10px;
  color:#333;
  margin:10px 0 30px;
  overflow:auto;
  padding:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  }
  1. shortcuts ul ul li {
  color:#333;
  font-family:Helvetica,sans-serif;
  font-size:14px;
  font-weight:normal;
  list-style:square;
  }
  1. shortcuts ul ul li span {
  color:#000;
  font-family:monospace;
  }

footer { background:url('../images/footer_bg.png') no-repeat; clear:both; height:150px; padding-bottom:20px; width:960px; } footer nav {

  margin:0 auto;
  text-align:center;
  width:640px;

} footer nav a {

  background-image:url(../images/footer_navigation.png);
  background-repeat:no-repeat;
  color:rgba(255,255,255,1);
  display:block;
  float:left;
  font-family:'Helvetica', sans-serif;
  font-size:1em;
  font-weight:normal;
  margin:20px 60px 0;
  padding:85px 0 0;
  text-align:center;
  text-decoration:none;
  text-shadow:1px 0 0 #007560;
  text-transform:uppercase;
  vertical-align:baseline;
  width:80px;
  }

footer nav a.welcome_tile { background-position:0 0; } footer nav a.welcome_tile:hover { background-position:-80px 0; } footer nav a.welcome_tile.selected { background-position:-160px 0; } footer nav a.hardcore_tile { background-position:-240px 0; } footer nav a.hardcore_tile:hover { background-position:-320px 0; } footer nav a.hardcore_tile.selected { background-position:-400px 0; } footer nav a.tips_tile { background-position:-480px 0; } footer nav a.tips_tile:hover { background-position:-560px 0; } footer nav a.tips_tile.selected { background-position:-640px 0; } footer nav a.selected,header nav a:hover { color:rgba(255,255,255,1); }

/* Form styles */ form fieldset {

  margin:0 auto;
  width:640px;
  }

form label {

  color:rgb(222, 60, 26);
  display:block;
  font-family:'Helvetica', sans-serif;
  font-size:1.5em;
  font-weight:normal;
  padding-bottom:5px;
  }

form input, form textarea {

  border:1px solid #222;
  border-radius:4px;
  font-size:16px;
  padding:10px;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  }
  #item3,#item4,#item5,#item6 {
     margin-bottom:20px;
  }
  #item3 input, #item6 textarea {
     width:100%;
  }
  #item4 {
     margin-right:40px;
  }
  #item4,#item5 {
     float:left;
     width:300px;
  }
  #item4 input,#item5 input {
     width:100%;
  }
  #item6 textarea {
     height:200px;
  }
  .fb-hint {
     color:rgba(0,0,0,.6); 
     font-size:15px;
     font-style:italic;
     font-weight:normal; 
     margin:5px;
  }
  #fb-submit-button {
     color:rgb(222, 60, 26);
     font-family:'Helvetica',sans-serif;
     font-size:20px;
     padding:4px 0 0px 0;
     margin-top:20px;
     border:none;
     width:120px;
     height:40px;
     text-shadow:0 1px 0 #222;
     cursor:pointer;
     background:url(../images/btn_submit.png) no-repeat;
     margin-right:50px !important;
  }
  #fb-submit-button:hover {
     background:url(../images/btn_submit_hov.png) no-repeat;
  }
  #fb_confirm_inline, #fb_error_report { display:none; }