Team:Penn/css/style

From 2012.igem.org

Latest revision as of 10:55, 19 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

}

.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() 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

}

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;padding-bottom: 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}