Team:Uppsala/marcus.css

From 2014.igem.org

(Difference between revisions)
(Created page with "- →--- Killing content ---: #killing_left { float: left; } #killing_right { float: right; border: 1px solid; } #killing_container { width: 100%; border: 1px solid; }")
 
(18 intermediate revisions not shown)
Line 1: Line 1:
/* --- Killing content --- */
/* --- Killing content --- */
 +
 +
#killing_sds_result {
 +
 +
clear: both;
 +
 +
}
#killing_left {
#killing_left {
Line 8: Line 14:
#killing_right {
#killing_right {
-
 
-
float: right;
 
border: 1px solid;
border: 1px solid;
 +
float: right;
 +
}
}
Line 16: Line 22:
#killing_container {
#killing_container {
-
width: 100%;
+
width: 1100px;;
border: 1px solid;
border: 1px solid;
 +
height: 500px;
 +
 +
}
 +
 +
#grid_container {
 +
 +
}
 +
 +
/* --- Start polaroid --- */
 +
 +
/***Now style the containing div that we gave the id 'polaroid'***/
 +
#polaroid_big{
 +
padding:20px 10px;
 +
/*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
 +
 +
overflow:hidden;
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
text-align: center;
 +
}
 +
/***Position the figures containing the images and captions***/
 +
#polaroid_big figure{
 +
float:left; /*places the images in a horizontal line*/
 +
position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
 +
width:950px; /*width of the images*/
 +
margin:10px 20px; /*space between the images*/
 +
}
 +
 +
#polaroid_big figcaption{
 +
text-align: center;
 +
font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
 +
font-size:1.3em;
 +
color: #454f40;
 +
letter-spacing: 0.09em;
 +
}
 +
 +
#polaroid_big figure{
 +
padding: 6px 8px 10px 8px; /*size of the frame*/
 +
/*give the frame's background colour a gradient*/
 +
background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
 +
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
/*give the Polaroids a small drop shadow*/
 +
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
}
 +
 +
#polaroid_big figcaption{
 +
text-align: center;
 +
font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
 +
font-size:1.3em;
 +
color: #454f40;
 +
letter-spacing: 0.09em;
 +
}
 +
 +
#polaroid_big figure:before { /*see the support section below to more info on using the :before psuedo element*/
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/
 +
top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/
 +
width: 75px; /*width of the tape*/
 +
height: 25px; /*height of the tape*/
 +
background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/
 +
/*rotate the tape 12 degrees anti-clockwise*/
 +
-webkit-transform: rotate(-12deg);
 +
-moz-transform: rotate(-12deg);
 +
-o-transform: rotate(-12deg);
 +
-ms-transform: rotate(-12deg);
 +
}
 +
 +
#polaroid_big figure::after {
 +
left: 908px; /*distance from the left edge of the box*/
 +
top: -10px; /*distance from the top of the box*/
 +
width: 70px; /*length of the strip of tape*/
 +
/*rotate the tape, this time 20° clockwise*/
 +
-webkit-transform: rotate(20deg);
 +
-moz-transform: rotate(20deg);
 +
-o-transform: rotate(20deg);
 +
-ms-transform: rotate(20deg);
 +
}
 +
 +
/***Now style the containing div that we gave the id 'polaroid'***/
 +
#polaroid{
 +
padding:20px 10px;
 +
/*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
 +
 +
overflow:hidden;
 +
float: left;
 +
}
 +
/***Position the figures containing the images and captions***/
 +
#polaroid figure{
 +
float:left; /*places the images in a horizontal line*/
 +
position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
 +
width:400px; /*width of the images*/
 +
margin:10px 20px; /*space between the images*/
 +
}
 +
 +
#polaroid figure{
 +
float:left;
 +
position:relative;
 +
width:400px;
 +
margin:10px 20px;
 +
padding: 6px 8px 10px 8px;
 +
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
background: #eee6d8;
 +
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
-webkit-transform:rotate(-1deg);
 +
-moz-transform: rotate(-1deg);
 +
-o-transform: rotate(-1deg);
 +
-ms-transform: rotate(-1deg);
 +
transform: rotate(-1deg);
 +
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
 +
}
 +
 +
#polaroid2 figure {
 +
-webkit-transform:rotate(2deg);
 +
-moz-transform: rotate(2deg);
 +
-o-transform: rotate(2deg);
 +
-ms-transform: rotate(2deg);
 +
transform: rotate(2deg);
 +
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
 +
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
}
 +
 +
#polaroid figcaption{
 +
text-align: center;
 +
font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
 +
font-size:1.3em;
 +
color: #454f40;
 +
letter-spacing: 0.09em;
 +
}
 +
 +
figure::before, figure::after{
 +
content: ''; /*because there is nothing between the ' ' the content of the pseudo elements will be blank*/
 +
display: block;
 +
position: absolute; /*for more info on positioning see the Support section below*/
 +
background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us give the tape some opacity*/
 +
height: 25px;
 +
}
 +
 +
 +
/*Now position the left strip of tape*/
 +
#polaroid figure::before{
 +
left:-5px; /*distance from the left edge of the box*/
 +
top: -15px; /*distance from the top of the box*/
 +
width: 45px; /*length of the strip of tape*/
 +
/*rotate the tape, in this case 12° anti-clockwise*/
 +
-webkit-transform: rotate(-12deg);
 +
-moz-transform: rotate(-12deg);
 +
-o-transform: rotate(-12deg);
 +
-ms-transform: rotate(-12deg);
 +
}
 +
/*Finally position the right strip*/
 +
#polaroid figure::after {
 +
left: 358px; /*distance from the left edge of the box*/
 +
top: -10px; /*distance from the top of the box*/
 +
width: 70px; /*length of the strip of tape*/
 +
/*rotate the tape, this time 20° clockwise*/
 +
-webkit-transform: rotate(20deg);
 +
-moz-transform: rotate(20deg);
 +
-o-transform: rotate(20deg);
 +
-ms-transform: rotate(20deg);
 +
}
 +
 +
 +
/* Other rotate */
 +
 +
#polaroid2{
 +
padding:20px 10px;
 +
/*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/
 +
 +
overflow:hidden;
 +
float: right;
 +
}
 +
/***Position the figures containing the images and captions***/
 +
#polaroid2 figure{
 +
float:left; /*places the images in a horizontal line*/
 +
position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
 +
width:400px; /*width of the images*/
 +
margin:10px 20px; /*space between the images*/
 +
}
 +
 +
#polaroid2 figure{
 +
float:left;
 +
position:relative;
 +
width:400px;
 +
margin:10px 20px;
 +
padding: 6px 8px 10px 8px;
 +
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
 +
background: #eee6d8;
 +
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
 +
-webkit-transform:rotate(2deg);
 +
-moz-transform: rotate(2deg);
 +
-o-transform: rotate(2deg);
 +
-ms-transform: rotate(2deg);
 +
transform: rotate(2deg);
 +
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
 +
}
 +
 +
#polaroid2 figcaption{
 +
text-align: center;
 +
font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
 +
font-size:1.3em;
 +
color: #454f40;
 +
letter-spacing: 0.09em;
 +
}
 +
 +
figure::before, figure::after{
 +
content: ''; /*because there is nothing between the ' ' the content of the pseudo elements will be blank*/
 +
display: block;
 +
position: absolute; /*for more info on positioning see the Support section below*/
 +
background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us give the tape some opacity*/
 +
height: 25px;
 +
}
 +
 +
 +
/*Now position the left strip of tape*/
 +
#polaroid2 figure::before{
 +
left:-5px; /*distance from the left edge of the box*/
 +
top: -15px; /*distance from the top of the box*/
 +
width: 45px; /*length of the strip of tape*/
 +
/*rotate the tape, in this case 12° anti-clockwise*/
 +
-webkit-transform: rotate(-12deg);
 +
-moz-transform: rotate(-12deg);
 +
-o-transform: rotate(-12deg);
 +
-ms-transform: rotate(-12deg);
 +
}
 +
/*Finally position the right strip*/
 +
#polaroid2 figure::after {
 +
left: 358px; /*distance from the left edge of the box*/
 +
top: -10px; /*distance from the top of the box*/
 +
width: 70px; /*length of the strip of tape*/
 +
/*rotate the tape, this time 20° clockwise*/
 +
-webkit-transform: rotate(20deg);
 +
-moz-transform: rotate(20deg);
 +
-o-transform: rotate(20deg);
 +
-ms-transform: rotate(20deg);
 +
}
 +
 +
/* --- End polaroid --- */
 +
 +
.teamTable {
 +
 +
width: 100%;
 +
 +
}
 +
 +
.teamRow {
 +
 +
width: 150px;
 +
max-height: 150px;
 +
 +
}
 +
 +
.centerTeam {
 +
 +
text-align: center;
 +
width:400px;
 +
 +
}
 +
 +
#media_hover:hover {
 +
box-shadow: inset 0px 0px 25px rgba(110,110,110, .8);
 +
-webkit-box-shadow: inset 0px 0px 25px rgba(110,110,110, .8);
 +
-moz-box-shadow: inset 0px 0px 25px rgba(110,110,110, .8);
}
}

Latest revision as of 20:39, 17 October 2014

/* --- Killing content --- */

  1. killing_sds_result {

clear: both;

}

  1. killing_left {

float: left;

}

  1. killing_right {

border: 1px solid; float: right;


}

  1. killing_container {

width: 1100px;; border: 1px solid; height: 500px;

}

  1. grid_container {

}

/* --- Start polaroid --- */

/***Now style the containing div that we gave the id 'polaroid'***/

  1. polaroid_big{

padding:20px 10px; /*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/

overflow:hidden; display: block; margin-left: auto; margin-right: auto; text-align: center; } /***Position the figures containing the images and captions***/

  1. polaroid_big figure{

float:left; /*places the images in a horizontal line*/ position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/ width:950px; /*width of the images*/ margin:10px 20px; /*space between the images*/ }

  1. polaroid_big figcaption{

text-align: center; font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */ font-size:1.3em; color: #454f40; letter-spacing: 0.09em; }

  1. polaroid_big figure{

padding: 6px 8px 10px 8px; /*size of the frame*/ /*give the frame's background colour a gradient*/ background: #eee6d8; /*fallback colour for browsers that don't support gradients*/ background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); /*give the Polaroids a small drop shadow*/ -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); }

  1. polaroid_big figcaption{

text-align: center; font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */ font-size:1.3em; color: #454f40; letter-spacing: 0.09em; }

  1. polaroid_big figure:before { /*see the support section below to more info on using the :before psuedo element*/

content: ; display: block; position: absolute; left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/ top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/ width: 75px; /*width of the tape*/ height: 25px; /*height of the tape*/ background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/ /*rotate the tape 12 degrees anti-clockwise*/ -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -o-transform: rotate(-12deg); -ms-transform: rotate(-12deg); }

  1. polaroid_big figure::after {

left: 908px; /*distance from the left edge of the box*/ top: -10px; /*distance from the top of the box*/ width: 70px; /*length of the strip of tape*/ /*rotate the tape, this time 20° clockwise*/ -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); }

/***Now style the containing div that we gave the id 'polaroid'***/

  1. polaroid{

padding:20px 10px; /*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/

overflow:hidden; float: left; } /***Position the figures containing the images and captions***/

  1. polaroid figure{

float:left; /*places the images in a horizontal line*/ position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/ width:400px; /*width of the images*/ margin:10px 20px; /*space between the images*/ }

  1. polaroid figure{

float:left; position:relative; width:400px; margin:10px 20px; padding: 6px 8px 10px 8px; -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); background: #eee6d8; background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); -webkit-transform:rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg); -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/ }

  1. polaroid2 figure {

-webkit-transform:rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/ -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75); }

  1. polaroid figcaption{

text-align: center; font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */ font-size:1.3em; color: #454f40; letter-spacing: 0.09em; }

figure::before, figure::after{ content: ; /*because there is nothing between the ' ' the content of the pseudo elements will be blank*/ display: block; position: absolute; /*for more info on positioning see the Support section below*/ background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us give the tape some opacity*/ height: 25px; }


/*Now position the left strip of tape*/

  1. polaroid figure::before{

left:-5px; /*distance from the left edge of the box*/ top: -15px; /*distance from the top of the box*/ width: 45px; /*length of the strip of tape*/ /*rotate the tape, in this case 12° anti-clockwise*/ -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -o-transform: rotate(-12deg); -ms-transform: rotate(-12deg); } /*Finally position the right strip*/

  1. polaroid figure::after {

left: 358px; /*distance from the left edge of the box*/ top: -10px; /*distance from the top of the box*/ width: 70px; /*length of the strip of tape*/ /*rotate the tape, this time 20° clockwise*/ -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); }


/* Other rotate */

  1. polaroid2{

padding:20px 10px; /*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/

overflow:hidden; float: right; } /***Position the figures containing the images and captions***/

  1. polaroid2 figure{

float:left; /*places the images in a horizontal line*/ position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/ width:400px; /*width of the images*/ margin:10px 20px; /*space between the images*/ }

  1. polaroid2 figure{

float:left; position:relative; width:400px; margin:10px 20px; padding: 6px 8px 10px 8px; -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); background: #eee6d8; background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); -webkit-transform:rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/ }

  1. polaroid2 figcaption{

text-align: center; font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */ font-size:1.3em; color: #454f40; letter-spacing: 0.09em; }

figure::before, figure::after{ content: ; /*because there is nothing between the ' ' the content of the pseudo elements will be blank*/ display: block; position: absolute; /*for more info on positioning see the Support section below*/ background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us give the tape some opacity*/ height: 25px; }


/*Now position the left strip of tape*/

  1. polaroid2 figure::before{

left:-5px; /*distance from the left edge of the box*/ top: -15px; /*distance from the top of the box*/ width: 45px; /*length of the strip of tape*/ /*rotate the tape, in this case 12° anti-clockwise*/ -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -o-transform: rotate(-12deg); -ms-transform: rotate(-12deg); } /*Finally position the right strip*/

  1. polaroid2 figure::after {

left: 358px; /*distance from the left edge of the box*/ top: -10px; /*distance from the top of the box*/ width: 70px; /*length of the strip of tape*/ /*rotate the tape, this time 20° clockwise*/ -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); }

/* --- End polaroid --- */

.teamTable {

width: 100%;

}

.teamRow {

width: 150px; max-height: 150px;

}

.centerTeam {

text-align: center; width:400px;

}

  1. media_hover:hover {

box-shadow: inset 0px 0px 25px rgba(110,110,110, .8); -webkit-box-shadow: inset 0px 0px 25px rgba(110,110,110, .8); -moz-box-shadow: inset 0px 0px 25px rgba(110,110,110, .8); }

Retrieved from "http://2014.igem.org/Team:Uppsala/marcus.css"