Team:Penn/css/style

From 2012.igem.org

(Difference between revisions)
Line 9: Line 9:
/* Left & Right alignment */
/* Left & Right alignment */
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
     display:none;}
     display:none;}
Line 51: Line 52:
/* Global properties */  
/* Global properties */  
 +
 +
body {background:#01256e center 0 repeat #faf3ed;border:0;font:14px Georgia, "Times New Roman", Times, serif;color:#200;line-height:24px}
body {background:#01256e center 0 repeat #faf3ed;border:0;font:14px Georgia, "Times New Roman", Times, serif;color:#200;line-height:24px}
/*
/*
Line 58: Line 61:
/* Global Structure */
/* Global Structure */
 +
 +
.main{
.main{
margin:0 auto;background:#95001a;width:1000px;
margin:0 auto;background:#95001a;width:1000px;
} /* 95001a */
} /* 95001a */
-
.mainbottom { margin:0 auto; width:1000px; background: url(../images/bgbottom.jpg) center top}
+
 
 +
.mainbottom {
 +
margin:0 auto;width:1000px;background: url(../images/bgbottom.jpg) center top
 +
}
.body1 {background:url(../images/bg_top_img.jpg) top center no-repeat}
.body1 {background:url(../images/bg_top_img.jpg) top center no-repeat}
.body2 {padding-top: 20px;background :#faf3ed;}  
.body2 {padding-top: 20px;background :#faf3ed;}  

Revision as of 12:53, 17 August 2012

/* 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 }

/* Left & Right alignment */

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;}
  1. top-section {
   border:none;
   height:0px;}
  1. content {
   border:none;}

/* .left { float:left } .right { float:right }

  • /

.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} /* .ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}

  • /

.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; } /* 95001a */

.mainbottom { margin:0 auto;width:1000px;background: url(../images/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}
  2. 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;}
  2. 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}