Team:Penn/css/style

From 2012.igem.org

(Difference between revisions)
 
(39 intermediate revisions not shown)
Line 1: Line 1:
/* Getting the new tags to behave */
/* 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 */
+
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
      display:block
-
    display:none;}
+
}
-
#top-section {
+
-
    border: none;
+
-
    height: 0px;}
+
-
#content {
+
-
    border: none;}
+
-
/*
+
mark, rp, rt, ruby, summary, time {    
-
.left {
+
      display:inline
-
float:left
+
}
}
-
.right {
+
 
-
float:right
+
-
}
+
-
*/
+
.wrapper {
.wrapper {
-
     width:1000px;overflow:hidden
+
     width:1000px;overflow:hidden;
}
}
.wrap {
.wrap {
     overflow:hidden;width:1000px;margin-left:-5px;padding-left:20px;margin-top:0px;padding-top:0px;
     overflow:hidden;width:1000px;margin-left:-5px;padding-left:20px;margin-top:0px;padding-top:0px;
}
}
-
 
#topcolumns {
#topcolumns {
-
 
+
    width:1000px;margin-top:0px;padding-top:0px;
-
width:1000px;margin-top:0px;padding-top:0px;
+
}
}
-
 
#topcolumns.column {
#topcolumns.column {
-
position:relative;
+
    position:relative;
-
}
+
}
-
 
+
#topcolumns.left {
#topcolumns.left {
float:left;width:70%;
float:left;width:70%;
}
}
-
 
#topcolumns.right {
#topcolumns.right {
float:right;
float:right;
}
}
-
 
/* 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{
-
.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}
+
    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
 +
}
/* Global Structure */
/* 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;}
 
 +
.main {
 +
    margin:0 auto;background:#95001a;width:1000px;
 +
}
 +
.mainbottom {
 +
    margin:0 auto;width:1000px;background: url(http://2012.igem.org/Team:Penn/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}
+
.body5 {
 +
    background:url(../images/slider_shadow.png) center 508px no-repeat
 +
}
*/
*/
-
.body6 {background:#708090; height: 1673px;}
+
.body6 {
-
.blueback {background: url(../images/pennred.png) top repeat-x}
+
    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;
}
}
-
 
-
#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 */
/* 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 {
+
a {
-
width: 450px;
+
  color:#a80002;text-decoration:none;outline:none
-
float: left;
+
}
-
position:relative;
+
a:hover {
-
text-align: center;
+
  text-decoration:underline
-
margin-left: 10px;
+
-
+
-
+
}
}
 +
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 {
.rightcolumn {
-
width:450px;
+
width:450px;float:right;position:relative;text-align: center;
-
float: right;
+
margin-right:0px;}
-
position:relative;
+
h3 {
-
text-align: center;
+
    font-size:27px;color:#230000;line-height:1.2em;padding:20px 0 9px 0;letter-spacing:-1px
-
margin-right: 0px;
+
}
-
+
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
}
}
-
 
-
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 */
-
header {height:160px;padding-top:0px;width:100%;overflow:visible;}
 
-
#logo {display:block;background:#01256e 0 0 repeat-x;width:1000px;height:175px;text-indent:-9999px}
 
 +
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 {
#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 {padding-bottom:40px; padding-top:20px;}
+
#content {
-
#content2 {padding-bottom:20px}
+
  padding-bottom:40px; padding-top:20px;}
-
.pad_left1 {padding-left:30px}
+
#content2 {
-
.pad_left2 { padding-left: 10px;}
+
  padding-bottom:20px}
-
.pad_bot1 {padding-bottom:13px}
+
.pad_left1 {
-
.pad_bot2 {padding-bottom:24px}
+
  padding-left:30px}
-
.marg_right1 {margin-right:20px}
+
.pad_left2 {
 +
  padding-left: 10px;}
 +
.pad_bot1 {
 +
  padding-bottom:13px}
 +
.pad_bot2 {
 +
  padding-bottom:24px}
 +
.marg_right1 {
 +
  margin-right:20px}
#right {
#right {
-
width: 200px;
+
width:200px;
-
height: 300px;
+
height:300px;
-
padding-left: 10px;
+
padding-left:10px;
padding-right:10px;
padding-right:10px;
-
margin-left: 65px;
+
margin-left:65px;
-
margin-right: 10px;
+
margin-right:10px;}
-
}
+
#right1 {
#right1 {
margin-top: 10px;
margin-top: 10px;
Line 159: 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;

}

  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

}

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}