Team:Rutgers/TemplateSub

From 2011.igem.org

Revision as of 11:18, 25 September 2011 by SanaWajid (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

body, ul, li { font-size:16px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; }

.imgshadow2 blockquote p { font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-align: left; color: #333; } .imgshadow2 blockquote table tr td { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: normal; color: #222; text-align: left;

} .imgshadow2 blockquote table { font-size: 14px; text-align: center; }

h3 { font-size:14px; font-family: Arial, Helvetica, sans-serif; color: #333; }

h4 { font-size:20px; font-family: Arial, Helvetica, sans-serif; color: #333; line-height:11px;

}

h1 { font-size:33px; font-family: Arial, Helvetica, sans-serif; color: #333; }

h2 { font-size:25px; font-weight:400; letter-spacing:-1px; margin:4px 0 4px 0; padding-bottom:4px; /*border-bottom:1px solid #666666;*/ text-shadow: 0 1px 0 #ccc, 

              0 2px 0 #c9c9c9,
              0 3px 0 #bbb,
              0 4px 0 #b9b9b9,
              0 5px 0 #aaa,
              0 6px 1px rgba(0,0,0,.1),
              0 0 5px rgba(0,0,0,.1),
              0 1px 3px rgba(0,0,0,.3),
              0 3px 5px rgba(0,0,0,.2),
              0 5px 10px rgba(0,0,0,.25),
              0 10px 10px rgba(0,0,0,.2),
              0 2px 2px rgba(0,0,0,.15);

color: #505454; text-align: left; }

.shadow { 

  color: #252525;
  font: bold Helvetica, Arial, Sans-Serif;
  text-shadow: 1px 1px #FFFFFF,
               2px 2px #ebebeb,
               3px 3px #cdcdcd;

/*line-height: .8; */ text-transform: uppercase; line-height:30px;

} .shadow:hover { position: relative; top: -3px; left: 5px; text-shadow: 1px 1px #FFFFFF, 

               2px 2px #f0ebd1,
               3px 3px #f0ebd1,
               4px 4px #f0ebd1,
               5px 5px #f15922,
               6px 6px #f15922;

color: #00aeef; text-align: left; }

.stuff { font-family: arial,sans-serif; font-size: 16px; letter-spacing: .2pt; word-spacing: 2pt; line-height: 1.4; text-align: left; }

  1. menu {

list-style:none; width:1000px; margin:0px auto 0px auto; height:45px; padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;

/* Background color and gradients */

background: #666666; background: -moz-linear-gradient(top, #666666, #000000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#000000));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; }

  1. menu li {

float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; }

  1. menu li:hover {

border: 1px solid #777777; padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; }

.button { 

  border-top: 1px solid #ebebeb;
  background: #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#ffffff));
  background: -webkit-linear-gradient(top, #cccccc, #ffffff);
  background: -moz-linear-gradient(top, #cccccc, #ffffff);
  background: -ms-linear-gradient(top, #cccccc, #ffffff);
  background: -o-linear-gradient(top, #cccccc, #ffffff);
  padding: 6.5px 13px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: #303030;
  font-size: 12px;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
  }

.button:hover { 

  border-top-color: #ffffff;
  background: #ffffff;
  color: #ccc;
  }

.button:active { 

  border-top-color: #999999;
  background: #999999;
  }

.orange { color: #000000; border: solid 0px #000000; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C0C0C0)); background: -moz-linear-gradient(top, #FFFFFF, #C0C0C0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#C0C0C0'); } .orange:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .orange:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); }


3D { 

 text-shadow: 0 1px 0 #ccc, 
              0 2px 0 #c9c9c9,
              0 3px 0 #bbb,
              0 4px 0 #b9b9b9,
              0 5px 0 #aaa,
              0 6px 1px rgba(0,0,0,.1),
              0 0 5px rgba(0,0,0,.1),
              0 1px 3px rgba(0,0,0,.3),
              0 3px 5px rgba(0,0,0,.2),
              0 5px 10px rgba(0,0,0,.25),
              0 10px 10px rgba(0,0,0,.2),
              0 20px 20px rgba(0,0,0,.15);

}


  1. menu li a {

font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #EEEEEE; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; }

  1. menu li:hover a {

color:#161616; text-shadow: 1px 1px 1px #ffffff; }

  1. menu li .drop {

padding-right:21px; background:url("img/drop.png") no-repeat right 8px; }

  1. menu li:hover .drop {

background:url("img/drop.png") no-repeat right 7px; font-size: 18px; }

.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none;

/* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; }

.dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 560px;} .dropdown_5columns {width: 700px;}

  1. menu li:hover .dropdown_1column,
  2. menu li:hover .dropdown_2columns,
  3. menu li:hover .dropdown_3columns,
  4. menu li:hover .dropdown_4columns,
  5. menu li:hover .dropdown_5columns {

left:-1px; top:auto; }

.col_1, .col_2, .col_3, .col_4, .col_5 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .col_3 {width:410px;} .col_4 {width:550px;} .col_5 {width:690px;}

  1. menu .menu_right {

float:right; margin-right:0px; }

  1. menu li .align_right {

/* Rounded Corners */ -moz-border-radius: 5px 0px 5px 5px; 

   -webkit-border-radius: 5px 0px 5px 5px;
   border-radius: 5px 0px 5px 5px;

}

  1. menu li:hover .align_right {

left:auto; right:-1px; top:auto; }

  1. menu p, #menu h2, #menu h3, #menu ul li {

font-family:Arial, Helvetica, sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow: 1px 1px 1px #FFFFFF; }

  1. menu h2 {

font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px; border-bottom:1px solid #666666; }

  1. menu h3 {

font-size:14px; margin:0px 0 0px 0; padding-bottom:0px; border-bottom:1px solid #888888; }

  1. menu p {

line-height:18px; margin:0 0 10px 0; }

  1. menu li:hover div a {

font-size:12px; color:#015b86; }

  1. menu li:hover div a:hover {

color:#029feb; }


.strong { font-weight:bold; } .italic { font-style:italic; }

.imgshadow { /* Better style on light background */ background:#FFFFFF; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; }

.imgshadow2 { /* Better style on light background */ background:#f1f1f1; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; }

.imgshadow3 { /* Better style on light background */ background:#c0c0c0; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));


padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; 

   -webkit-border-radius: 5px;
   border-radius: 5px;

}

.imgshadow0 { /* Better style on light background */ background:#999999; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));


padding:0px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; 

   -webkit-border-radius: 5px;
   border-radius: 5px;

} .imgshadoweas { /* Better style on light background */ background:#c0c0c0; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #c0c0c0, #FFFFFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#FFFFFF)); padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 3px 5px #666666; -webkit-box-shadow:0px 3px 5px #666666; box-shadow:0px 3px 5px #666666; /* Rounded Corners */ -moz-border-radius: 5px; 

   -webkit-border-radius: 5px;
   border-radius: 5px;

} .img_left { /* Image sticks to the left */ width:auto; float:left; margin:5px 15px 5px 5px; }

  1. menu li .black_box {

background-color:#333333; color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:4px 6px 4px 6px;

/* Rounded Corners */ -moz-border-radius: 5px; 

   -webkit-border-radius: 5px;
   border-radius: 5px;

/* Shadow */ -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; }

  1. menu li ul {

list-style:none; padding:0; margin:0 0 12px 0; }

  1. menu li ul li {

font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; }

  1. menu li ul li:hover {

background:none; border:none; padding:0; margin:0; }

  1. menu li .greybox li {

background:#F4F4F4; border:1px solid #bbbbbb; margin:0px 0px 4px 0px; padding:4px 6px 4px 6px; width:116px;

/* Rounded Corners */ -moz-border-radius: 5px; 

   -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;

}

  1. menu li .greybox li:hover {

background:#ffffff; border:1px solid #aaaaaa; padding:4px 6px 4px 6px; margin:0px 0px 4px 0px; } .notice-wrap { position: fixed; top: 20px; right: 20px; width: 250px; }

  • html .notice-wrap {

position: absolute; }

.notice-item { height: 60px; background: #333; -moz-border-radius: 6px; -webkit-border-radius: 6px; color: #eee; padding: 6px 6px 0 6px; font-family: lucida Grande; font-size: 11px; border: 2px solid #999; display: block; position: relative; margin: 0 0 12px 0; }

.notice-item-close { position: absolute; font-family: Arial; font-size: 12px; font-weight: bold; right: 6px; top: 6px; cursor: pointer; }


/* IE10 */ background-image: -ms-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%);

/* Mozilla Firefox */ background-image: -moz-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%);

/* Opera */ background-image: -o-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%);

/* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, left bottom, 0, left bottom, 1020, color-stop(0, #FFFFFF), color-stop(1, #DEDEDE));

/* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%);

/* Proposed W3C Markup */ background-image: radial-gradient(left bottom, ellipse farthest-corner, #FFFFFF 0%, #DEDEDE 100%); .footer2 { text-align: center; } /* Reset */


/* Showcase

*/
  1. awOnePageButton .view-slide

{ display: none; }

/* This class is removed after the showcase is loaded */ /* Assign the correct showcase height to prevent loading jumps in IE */ .showcase-load { height: 470px; /* Same as showcase javascript option */ overflow: hidden; }

/* Container when content is shown as one page */ .showcase-onepage { /**/ }

/* Container when content is shown in slider */ .showcase { position: relative; margin: auto; }

.showcase-content-container { background-color: #000; }

/* Navigation arrows */ .showcase-arrow-previous, .showcase-arrow-next { position: absolute; background: url('arrows.png'); width: 33px; height: 33px; top: 220px; cursor: pointer; }

.showcase-arrow-previous { left: -60px; }

.showcase-arrow-previous:hover { background-position: 0px -34px; }

.showcase-arrow-next { right: -56px; background-position: -34px 0; }

.showcase-arrow-next:hover { background-position: -34px -34px; }

/* Content */ .showcase-content { background-color: #DDD; text-align: center; }

.showcase-content-wrapper { text-align: center; height: 600px; width: 800px; display: table-cell; vertical-align: middle; }

/* Styling the tooltips */ .showcase-plus-anchor { background-image: url('plus.png'); background-repeat: no-repeat; }

.showcase-plus-anchor:hover { background-position: -32px 0; }

div.showcase-tooltip { background-color: #fff; color: #000; text-align: left; padding: 5px 8px; background-image: url(../images/white-opacity-80.png); }

/* Styling the caption */ .showcase-caption { color: #000; padding: 8px 15px; text-align: left; position: absolute; bottom: 10px; left: 10px; right: 10px; display: none; background-image: url(../images/white-opacity-80.png); }

.showcase-onepage .showcase-content { margin-bottom: 10px; }

/* Button Wrapper */ .showcase-button-wrapper { clear: both; margin-top: 10px; text-align: center; }

.showcase-button-wrapper span { margin-right: 3px; padding: 2px 5px 0px 5px; cursor: pointer; font-size: 12px; color: #444444; }

.showcase-button-wrapper span.active { color: #fff; }

/* Thumbnails */ .showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */ { background-color: #000; }

.showcase-thumbnail-wrapper { overflow: hidden; }

.showcase-thumbnail { width: 120px; height: 90px; cursor: pointer; border: solid 1px #333; position: relative; }

.showcase-thumbnail-caption { position: absolute; bottom: 2px; padding-left: 10px; padding-bottom: 5px; }

.showcase-thumbnail-content { padding: 10px; text-align: center; padding-top: 25px; }

.showcase-thumbnail-cover { background-image: url(../images/black-opacity-40.png); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.showcase-thumbnail:hover { border: solid 1px #999; }

.showcase-thumbnail:hover .showcase-thumbnail-cover { display: none; }

.showcase-thumbnail.active { border: solid 1px #999; }

.showcase-thumbnail.active .showcase-thumbnail-cover { display: none; }

.showcase-thumbnail-wrapper-horizontal { padding: 10px; }

.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail { margin-right: 10px; width: 116px; }

.showcase-thumbnail-wrapper-vertical { padding: 10px; }

.showcase-thumbnail-wrapper-vertical .showcase-thumbnail { margin-bottom: 10px; }

.showcase-thumbnail-button-backward, .showcase-thumbnail-button-forward { padding: 7px; cursor: pointer; }

.showcase-thumbnail-button-backward { padding-bottom: 0px; padding-right: 0px; }

.showcase-thumbnail-button-backward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal, .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { background-image: url(../images/arrows-small.png); background-repeat: no-repeat; display: block; width: 17px; height: 17px; }

.showcase-thumbnail-button-backward .showcase-thumbnail-vertical { background-position: 0 -51px; margin-left: 55px; } .showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical { background-position: -17px -51px; }

.showcase-thumbnail-button-forward .showcase-thumbnail-vertical { background-position: 0 -34px; margin-left: 55px; } .showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical { background-position: -17px -34px; }

.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { background-position: 0 -17px; margin-top: 40px; margin-bottom: 40px; } .showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal { background-position: -17px -17px; }

.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal { background-position: 0 0; margin-top: 40px; margin-bottom: 40px; } .showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal { background-position: -17px 0; }

/* Hide button text */ .showcase-thumbnail-button-forward span span, .showcase-thumbnail-button-backward span span { display: none; }


/* Clear (used for horizontal thumbnails)

*/

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; float: none; }

Retrieved from "http://2011.igem.org/Team:Rutgers/TemplateSub"