Team:Penn/css/style
From 2012.igem.org
(12 intermediate revisions not shown) | |||
Line 5: | Line 5: | ||
} | } | ||
- | mark, rp, rt, ruby, summary, time { | + | mark, rp, rt, ruby, summary, time { |
display:inline | display:inline | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
.wrapper { | .wrapper { | ||
width:1000px;overflow:hidden; | width:1000px;overflow:hidden; | ||
Line 41: | Line 32: | ||
body{ | body{ | ||
- | background:#01256e center 0 repeat #faf3ed;border:0;font:14px Georgia,"Times New Roman",Times, | + | 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 | .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 | ||
Line 55: | Line 46: | ||
} | } | ||
.body1 { | .body1 { | ||
- | background:url(../images/bg_top_img.jpg) top center no-repeat | + | background: url(../images/bg_top_img.jpg) top center no-repeat |
} | } | ||
.body2 { | .body2 { | ||
Line 61: | Line 52: | ||
} | } | ||
.body3 { | .body3 { | ||
- | background:url(../images/bg_bot.jpg) top center repeat; | + | background: url(../images/bg_bot.jpg) top center repeat; |
} | } | ||
.body4 { | .body4 { | ||
- | background:url(../images/bgbottom.jpg) center top | + | background: url(../images/bgbottom.jpg) center top |
} | } | ||
.top { | .top { | ||
Line 73: | Line 64: | ||
} | } | ||
/* | /* | ||
- | .body5 {background:url(../images/slider_shadow.png) center 508px no-repeat | + | .body5 { |
+ | background:url(../images/slider_shadow.png) center 508px no-repeat | ||
} | } | ||
*/ | */ | ||
Line 97: | Line 89: | ||
text-decoration:underline | text-decoration:underline | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
h2 { | h2 { | ||
- | font-size:36px;line-height:1.2em;color:#fff;padding:16px 0 20px 0;letter-spacing:-2px; padding-bottom: 24px; font-weight:300;} | + | 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 { | h2.letter_spacing { | ||
- | letter-spacing:-3px} | + | letter-spacing:-3px |
+ | } | ||
.leftcolumn { | .leftcolumn { | ||
- | width: 450px;float: left;position:relative;text-align:center;margin-left:10px;} | + | width: 450px;float: left;position:relative;text-align:center;margin-left:10px; |
+ | } | ||
.rightcolumn { | .rightcolumn { | ||
width:450px;float:right;position:relative;text-align: center; | width:450px;float:right;position:relative;text-align: center; | ||
margin-right:0px;} | margin-right:0px;} | ||
h3 { | h3 { | ||
- | font-size:27px;color:#230000;line-height:1.2em;padding:20px 0 9px 0;letter-spacing:-1px} | + | font-size:27px;color:#230000;line-height:1.2em;padding:20px 0 9px 0;letter-spacing:-1px |
+ | } | ||
h3 span { | h3 span { | ||
- | color:#a80002} | + | color:#a80002 |
+ | } | ||
h4 { | h4 { | ||
- | font-size :100px;color:#fff;line-height:1.2em;padding:20px 0 9px 0;letter-spacing:-1px} | + | font-size :100px;color:#fff;line-height:1.2em;padding:20px 0 9px 0;letter-spacing:-1px |
+ | } | ||
h4 span { | h4 span { | ||
- | color:#fff} | + | color:#fff |
+ | } | ||
p { | p { | ||
- | padding-bottom:24px} | + | padding-bottom:24px |
+ | } | ||
/* Header */ | /* Header */ | ||
header { | header { | ||
- | height:160px;padding-top:0px;width:100%;overflow:visible;} | + | height:160px;padding-top:0px;padding-bottom: 0px; width:100%;overflow:visible; |
+ | } | ||
+ | /* | ||
#logo { | #logo { | ||
- | display:block;background:#01256e 0 0 repeat-x;width:1000px;height:175px;text-indent:-9999px} | + | display:block;background:#01256e 0 0 repeat-x;width:1000px;height:175px;text-indent:-9999px |
+ | } | ||
+ | */ | ||
#drugdeliverypic { | #drugdeliverypic { | ||
- | display:block;background:url(../images/cancercell1.jpg) 0 0 no-repeat;width:450px;height:300px;text-indent:-9999px;} | + | display:block;background:url(../images/cancercell1.jpg) 0 0 no-repeat;width:450px;height:300px;text-indent:-9999px; |
+ | } | ||
#biofilmpic { | #biofilmpic { | ||
- | display:block;background:url(../images/cancercell2.jpg) 0 0 no-repeat;width:450px;height:300px;text-indent:-9999px;} | + | display:block;background:url(../images/cancercell2.jpg) 0 0 no-repeat;width:450px;height:300px;text-indent:-9999px; |
+ | } | ||
.center { | .center { | ||
- | text-align: center;} | + | text-align: center; |
+ | } | ||
/* pull quote scroller */ | /* pull quote scroller */ | ||
#pscroller1{ | #pscroller1{ | ||
- | width:200px; | + | width:200px; |
- | height:75px; | + | height:75px; |
- | padding-left:30px; | + | padding-left:30px; |
- | padding-right:0px; | + | padding-right:0px; |
- | border: 1px solid white} | + | border: 1px solid white |
+ | } | ||
/* content */ | /* content */ | ||
#content { | #content { | ||
Line 172: | Line 178: | ||
} | } | ||
- | .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 { |
- | .box > div {background:url(../images/box_top.png) 0 top repeat-x;padding:30px;padding-top:0px;overflow:hidden} | + | 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 h2 {text-align: center;color:#fff;padding:15px 0 12px 10px; font-weight: bold; } | + | } |
- | .box h2 span {color:#faf3ed; font-weight: bold;} | + | .box > div { |
- | .box figure {padding-bottom:13px} | + | background:url(../images/box_top.png) 0 top repeat-x;padding:30px;padding-top:0px;overflow:hidden |
- | + | } | |
- | + | .box h2 { | |
- | .list1{background:url(../images/line_hor1.png) 10px 0 no-repeat;padding-top:1px} | + | 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 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{color:#696969;text-decoration:none;font-style:normal;padding-left:14px;background:url(../images/marker_1.gif) 0 6px no-repeat} |
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;
}
- topcolumns {
width:1000px;margin-top:0px;padding-top:0px;
}
- topcolumns.column {
position:relative;
}
- topcolumns.left {
float:left;width:70%; }
- 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;
}
- maincontent {
margin:0 auto;background:#fff;width:1000px;text-align:center
}
- 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;
} /*
- logo {
display:block;background:#01256e 0 0 repeat-x;width:1000px;height:175px;text-indent:-9999px
}
- /
- drugdeliverypic {
display:block;background:url(../images/cancercell1.jpg) 0 0 no-repeat;width:450px;height:300px;text-indent:-9999px; }
- 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 */
- pscroller1{
width:200px; height:75px; padding-left:30px; padding-right:0px; border: 1px solid white
} /* content */
- content {
padding-bottom:40px; padding-top:20px;}
- 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}
- right {
width:200px; height:300px; padding-left:10px; padding-right:10px; margin-left:65px; margin-right:10px;}
- 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}
- testimonials div{background: url(../images/bg_testimonials.gif) 0 bottom no-repeat #f5f5f5;padding:25px 27px 52px 29px}
- 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}
- icons {padding:5px 0 0 0}
- 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 */
- ContactForm {margin-top:-5px;width:1050px}
- ContactForm span {float:left;width:111px;line-height:20px}
- ContactForm .wrapper {min-height:24px}
- ContactForm .textarea_box {min-height:170px;width:100%;overflow:hidden;padding-bottom:9px}
- ContactForm {}
- ContactForm a {margin-left:20px;float:right}
- 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}
- 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}