Team:Penn/css/style

From 2012.igem.org

Revision as of 13:22, 17 August 2012 by Amurthur (Talk | contribs)

/* Getting the new tags to behave */

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {

     display:block}

mark, rp, rt, ruby, summary, time {

     display:inline}
  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {

display:none;}

  1. top-section {
   border:none;
   height:0px;

}

  1. content {
   border:none;

} .wrapper {

    width:1000px;overflow:hidden;

} .wrap {

    overflow:hidden;width:1000px;margin-left:-5px;padding-left:20px;margin-top:0px;padding-top:0px;

}

  1. topcolumns {
    width:1000px;margin-top:0px;padding-top:0px;

}

  1. topcolumns.column {
    position:relative;

}

  1. topcolumns.left {

float:left;width:70%;}

  1. topcolumns.right {

float:right;}

/* Global properties */

body{

   background:#01256e center 0 repeat #faf3ed;border:0;font:14px Georgia,"Times New Roman",Times,      serif;color:#200;line-height:24px}

.css3{border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);position:relative}

/* Global Structure */

.main {

   margin:0 auto;background:#95001a;width:1000px;}

.mainbottom {

   margin:0 auto;width:1000px;background: url(Bgbottom.jpg) center top}

.body1 {

   background:url(../images/bg_top_img.jpg) top center no-repeat}

.body2 {

   padding-top:20px;background:#faf3ed;} 

.body3 {

   background:url(../images/bg_bot.jpg) top center repeat;}

.body4 {

   background:url(../images/bgbottom.jpg) center top}

.top {

   margin: 0 auto;background-position:center; width:1000px;height:1260px;background:#95001a;} 

.bottom {

   background-position:center;width:1000px;height:220px;background:#01256e;}

/* .body5 {background:url(../images/slider_shadow.png) center 508px no-repeat}

  • /

.body6 {

   background:#708090;height:1673px;}

.blueback {

   background:url(../images/pennred.png) top repeat-x;}
  1. maincontent {
   margin:0 auto;background:#fff;width:1000px;text-align:center}
  1. back {
   width:1000px;padding-left:10px;padding-right:10px;background:url (../images/pennblue.png) top center repeat-x;}

/* Main Layout */


a {

  color:#a80002;text-decoration:none;outline:none}

a:hover {

  text-decoration:underline}

h1 {

  padding:0px 0px 0px 0px}

h2 {

  font-size:36px;line-height:1.2em;color:#fff;padding:16px 0 20px 0;letter-spacing:-2px; padding-bottom: 24px; font-weight:300;}

h2.letter_spacing {

  letter-spacing:-3px}

.leftcolumn { width: 450px;float: left;position:relative;text-align:center;margin-left:10px;} .rightcolumn { width:450px;float:right;position:relative;text-align: center; margin-right:0px;} h3 {

    font-size:27px;color:#230000;line-height:1.2em;padding:20px 0 9px 0;letter-spacing:-1px}

h3 span {

    color:#a80002}

h4 {

   font-size :100px;color:#fff;line-height:1.2em;padding:20px 0 9px 0;letter-spacing:-1px}

h4 span {

   color:#fff}

p {

   padding-bottom:24px}

/* Header */

header {

   height:160px;padding-top:0px;width:100%;overflow:visible;}
  1. logo {
   display:block;background:#01256e 0 0 repeat-x;width:1000px;height:175px;text-indent:-9999px}
  1. drugdeliverypic {

display:block;background:url(../images/cancercell1.jpg) 0 0 no-repeat;width:450px;height:300px;text-indent:-9999px;}

  1. biofilmpic {

display:block;background:url(../images/cancercell2.jpg) 0 0 no-repeat;width:450px;height:300px;text-indent:-9999px;} .center { text-align: center;} /* pull quote scroller */

  1. pscroller1{

width:200px; height:75px; padding-left:30px; padding-right:0px; border: 1px solid white} /* content */

  1. content {
  padding-bottom:40px; padding-top:20px;}
  1. content2 {
  padding-bottom:20px}

.pad_left1 {

  padding-left:30px}

.pad_left2 {

  padding-left: 10px;}

.pad_bot1 {

  padding-bottom:13px}

.pad_bot2 {

  padding-bottom:24px}

.marg_right1 {

  margin-right:20px}
  1. right {

width:200px; height:300px; padding-left:10px; padding-right:10px; margin-left:65px; margin-right:10px;}

  1. right1 {

margin-top: 10px; text-align:center; width: 200px; height: 300px; padding-left: 10px; padding-right:10px; margin-left: 55px; margin-right: 10px;

} .box {height: 185px;background :url(../images/box_bg.png) repeat;color:#faf3ed;box-shadow:0 0 5px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 5px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 5px rgba(0, 0, 0, .4); font-size: 14px; font-color: white;} .box > div {background:url(../images/box_top.png) 0 top repeat-x;padding:30px;padding-top:0px;overflow:hidden} .box h2 {text-align: center;color:#fff;padding:15px 0 12px 10px; font-weight: bold; } .box h2 span {color:#faf3ed; font-weight: bold;} .box figure {padding-bottom:13px}


.list1{background:url(../images/line_hor1.png) 10px 0 no-repeat;padding-top:1px} .list1 li{background:url(../images/line_hor1.png) 10px bottom no-repeat;line-height:29px} .list1 a{color:#696969;text-decoration:none;font-style:normal;padding-left:14px;background:url(../images/marker_1.gif) 0 6px no-repeat} .list1 a:hover{color:#fff}

.button1 {display:inline-block;font-size:20px;color:#fff;line-height:34px;padding:0 15px;background:#01256e;letter-spacing:-1px; margin-bottom: 11px;} /* .button1:hover {text-decoration:none;color:#1e0000;background:#faf3ed} .testimonials li span {float:left;width:40px;height:40px;font-size:30px;color:#faf3ed;line-height:34px;text-align:center;background:#a80002;margin-right:20px} .testimonials li p {float:left;width:180px;padding-bottom:15px} .testimonials li img {padding-top:2px}

  • /

/* meet the team - sliding animation */ /* .testimonials{width:100%;position:relative;z-index:1;height:150px;overflow:hidden}

  1. testimonials div{background: url(../images/bg_testimonials.gif) 0 bottom no-repeat #f5f5f5;padding:25px 27px 52px 29px}
  2. testimonials span{display:block;padding:0 0 0 0px;font-style:normal}

.testimonials li{height:165px} .color1{color: #800000; } .up, .down{position:absolute;z-index:2;bottom:6px;right:0;width:30px;height:30px;display:block} .up{right:30px;background:url(../images/marker_up.gif) 0 0 no-repeat} .down{background:url(../images/marker_down.gif) 0 0 no-repeat} .up:hover, .down:hover{background-position:bottom}

  • /

.line1 {background:url(../images/line_vert1.gif) 285px 0 repeat-y} .line2 {background:url(../images/line_vert1.gif) 615px 0 repeat-y} .price {margin-top:-7px} .price li {overflow:hidden;background:url(../images/price_bg.gif) 0 -6px repeat-x} .price a {float:left;color:#220000;background:url(../images/marker_2.gif) 1px 11px no-repeat #faf3ed;padding-left:12px} .price a:hover {text-decoration:none;color:#a80002} .price span {float:right;background:#faf3ed} .address {padding-bottom:0} .address span {float:left;width:84px} /* footer */ footer {height:138px;font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#696969;line-height:18px} footer a {color:#c53005;text-decoration:underline} footer a:hover {text-decoration:none}

  1. icons {padding:5px 0 0 0}
  2. icons li {float:left;padding-right:9px}

/* Tooltips */ .aToolTip {background:#a80002;color:#fff; margin:0;padding:2px 10px 3px;font-size:11px;position:absolute;line-height:17px} .aToolTip .aToolTipContent {position:relative; margin:0;padding:0} /* forms */

  1. ContactForm {margin-top:-5px;width:1050px}
  2. ContactForm span {float:left;width:111px;line-height:20px}
  3. ContactForm .wrapper {min-height:24px}
  4. ContactForm .textarea_box {min-height:170px;width:100%;overflow:hidden;padding-bottom:9px}
  5. ContactForm {}
  6. ContactForm a {margin-left:20px;float:right}
  7. ContactForm .input {width:399px;height:18px;background:#faf3ed;padding:1px 5px;color:#220000;font:14px Georgia, "Times New Roman", Times, serif;margin:0;float:left}
  8. ContactForm textarea {overflow:auto;width:789px;height:163px;background:#faf3ed;padding:1px 5px;color:#220000;font:14px Georgia, "Times New Roman", Times, serif;margin:0}