Team:Rutgers/css/component.team

From 2013.igem.org

/* Global CSS that are applied for all screen sizes */

.subjects { background: #ccc; padding: 20px 10px; color:black; } /*http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/*/ .subjects h1, .subjects h2 { clear:both; position:relative; color:#fff; /*background:#f43059;*/ background:#808080; ttext-shadow:0 -1px #d0284b, 0 1px #f96080; text-shadow:0 2px black; } .subjects h1{ font-size:2em; text-align:center; margin:0 -20px 30px -20px; padding:20px 0;

-moz-box-shadow:0 2px 0 rgba(0,0,0,0.1); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.1); -o-box-shadow:0 2px 0 rgba(0,0,0,0.1); box-shadow:0 2px 0 rgba(0,0,0,0.1); } .subjects h2 {

   font-size:1.5em;
   float:left;
   clear:both;
   padding:10px 10px 10px 20px;
   margin-left:-20px;
   margin-bottom:15px;

   -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
   -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
   -o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
   box-shadow:2px 2px 0 rgba(0,0,0,0.1);

} .subjects h1:before, .subjects h1:after, .subjects h2:before {

   content:" ";
   background:url();
   display:block;
   width:10px;
   height:10px;
   position:absolute;
   bottom:0;
   left:0;
   margin-bottom:-10px;
   z-index:-1;

} .subjects h1:after { background: url(); right:0; left:auto; } .subjects h2:nth-of-type(odd){ float:right; padding:10px 20px 10px 10px; margin-right:-20px;

-moz-box-shadow:-2px 2px 0 rgba(0,0,0,0.1); -webkit-box-shadow:-2px 2px 0 rgba(0,0,0,0.1); -o-box-shadow:-2px 2px 0 rgba(0,0,0,0.1); box-shadow:-2px 2px 0 rgba(0,0,0,0.1); } .subjects h2:nth-of-type(odd):before{ background:url(); right:0; left:auto; }

.subjects .pull-me { clear: both; } .subjects .pull-me:nth-of-type(odd) { text-align: right; }

p { clear:both; /*max-width: 80px;*/ margin-bottom:20px; }

/* For screen bigger than 800px */ @media (min-width: 50em) {

}

/*@media (min-width: 50em) and (max-width: 61.250em) {

/* Size and font adjustments to make it fit into the screen .nav ul { font-size: 1em; }

}*/

/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {

}

/* CSS specific to the 2x3 columns version */ @media (min-width:32.5em) and (max-width: 49.938em) {

}

/* Adapting the font size and width for smaller screns*/ @media (min-width: 32.5em) and (max-width: 38.688em) {

}