Team:Uppsala/stylesheet2.css
From 2014.igem.org
(215 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
a { | a { | ||
- | |||
text-decoration: none; | text-decoration: none; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 37: | Line 28: | ||
} | } | ||
- | + | .background { | |
+ | border: 5px solid #d7d7d7; | ||
font-size: 16pt; | font-size: 16pt; | ||
padding-top: 10px; | padding-top: 10px; | ||
- | padding-left: | + | padding-left: 5px; |
- | padding-right: | + | padding-right: 5px; |
- | width: | + | width: 280px; |
- | height: | + | height: 512px; |
background-color: #d7d7d7; | background-color: #d7d7d7; | ||
- | box-shadow: inset 0px 0px 25px rgba(110,110,110, .8); | + | webkit-transition: all 0.2s ease-in-out; |
- | + | -moz-transition: all 0.2s ease-in-out; | |
- | + | -o-transition: all 0.2s ease-in-out; | |
+ | transition: all 0.2s ease-in-out; | ||
+ | /*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); | ||
+ | */ | ||
+ | } | ||
+ | .background:hover { | ||
+ | |||
+ | border: 5px solid #d40400; | ||
+ | /*box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | */ | ||
} | } | ||
- | + | .box_text { | |
- | + | ||
color: #000; | color: #000; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
} | } | ||
- | + | .box_text:hover { | |
- | + | ||
color: #d40400; | color: #d40400; | ||
- | |||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | + | #result { | |
- | # | + | border: 5px solid #d7d7d7; |
+ | font-size: 16pt; | ||
padding-top: 10px; | padding-top: 10px; | ||
+ | padding-left: 5px; | ||
+ | padding-right: 5px; | ||
margin-top: 20px; | margin-top: 20px; | ||
- | width: | + | margin-left: 10px; |
+ | width: 480px; | ||
height: 236px; | height: 236px; | ||
background-color: #d7d7d7; | background-color: #d7d7d7; | ||
+ | webkit-transition: all 0.2s ease-in-out; | ||
+ | -moz-transition: all 0.2s ease-in-out; | ||
+ | -o-transition: all 0.2s ease-in-out; | ||
+ | transition: all 0.2s ease-in-out; | ||
+ | /*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); | ||
+ | */ | ||
+ | text-decoration: none; | ||
+ | color: #000 !important; | ||
} | } | ||
- | # | + | #result:hover { |
+ | border: 5px solid #d40400; | ||
+ | /* | ||
+ | box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | color: #d40400 !important; | ||
+ | text-decoration: none; | ||
+ | */ | ||
+ | } | ||
+ | |||
+ | |||
+ | #parts { | ||
+ | /* | ||
+ | border: 3px solid #d40400; | ||
+ | */ | ||
+ | border: 5px solid #d7d7d7; | ||
+ | font-size: 16pt; | ||
padding-top: 10px; | padding-top: 10px; | ||
- | width: | + | padding-left: 5px; |
- | height: | + | padding-right: 5px; |
+ | width: 187px; | ||
+ | height:512px; | ||
float: right; | float: right; | ||
background-color: #d7d7d7; | background-color: #d7d7d7; | ||
+ | webkit-transition: all 0.2s ease-in-out; | ||
+ | -moz-transition: all 0.2s ease-in-out; | ||
+ | -o-transition: all 0.2s ease-in-out; | ||
+ | transition: all 0.2s ease-in-out; | ||
+ | /*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); | ||
+ | */ | ||
+ | text-decoration: none; | ||
+ | color: #000 !important; | ||
} | } | ||
- | #parts | + | #parts:hover { |
+ | border: 5px solid #d40400; | ||
+ | /* | ||
+ | box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | color: #d40400 !important; | ||
text-decoration: none; | text-decoration: none; | ||
- | + | */ | |
} | } | ||
Line 105: | Line 155: | ||
} | } | ||
- | # | + | #system_design { |
+ | /* | ||
+ | border: 3px solid #d40400; | ||
+ | */ | ||
+ | |||
+ | border: 5px solid #d7d7d7; | ||
+ | font-size: 16pt; | ||
padding-top: 10px; | padding-top: 10px; | ||
- | margin-left: | + | padding-left: 5px; |
- | width: | + | padding-right: 5px; |
+ | margin-left: 10px; | ||
+ | width: 480px; | ||
+ | height: 236px; | ||
background-color: #d7d7d7; | background-color: #d7d7d7; | ||
+ | webkit-transition: all 0.2s ease-in-out; | ||
+ | -moz-transition: all 0.2s ease-in-out; | ||
+ | -o-transition: all 0.2s ease-in-out; | ||
+ | transition: all 0.2s ease-in-out; | ||
+ | /*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); | ||
+ | */ | ||
+ | text-decoration: none; | ||
+ | color: #000 !important; | ||
} | } | ||
- | # | + | #system_design:hover { |
- | padding-top: 10px; | + | border: 5px solid #d40400; |
+ | |||
+ | /* | ||
+ | box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); | ||
+ | color: #d40400 !important; | ||
+ | text-decoration: none; | ||
+ | */ | ||
+ | } | ||
+ | |||
+ | .project_h2 { | ||
+ | |||
+ | padding-top: 20px; | ||
+ | border-top: 1px solid #d40400; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* ---- Team ---- */ | ||
+ | |||
+ | .team_pic { | ||
+ | |||
+ | display: block; | ||
+ | width: 900px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* ---- Targeting project ---- */ | ||
+ | |||
+ | .swarm { | ||
+ | |||
+ | display: block; | ||
+ | width: 900px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* ---- Chapter buttons ---- */ | ||
+ | |||
+ | .prev { | ||
+ | |||
+ | width: 150px; | ||
+ | float: left; | ||
+ | opacity: 0.6; | ||
+ | webkit-transition: all 0.1s ease-in-out; | ||
+ | -moz-transition: all 0.1s ease-in-out; | ||
+ | -o-transition: all 0.1s ease-in-out; | ||
+ | transition: all 0.1s ease-in-out; | ||
+ | |||
+ | } | ||
+ | |||
+ | .prev:hover { | ||
+ | |||
+ | opacity: 1.0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .next:hover { | ||
+ | |||
+ | opacity: 1.0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .next { | ||
+ | |||
+ | width: 150px; | ||
+ | float: right; | ||
+ | opacity: 0.6; | ||
+ | webkit-transition: all 0.1s ease-in-out; | ||
+ | -moz-transition: all 0.1s ease-in-out; | ||
+ | -o-transition: all 0.1s ease-in-out; | ||
+ | transition: all 0.1s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .next_pic { | ||
+ | |||
+ | width: 100px; | ||
+ | float: right; | ||
+ | |||
+ | } | ||
+ | |||
+ | .prev_pic { | ||
+ | |||
+ | width: 100px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #button_container { | ||
+ | |||
+ | height: 100px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #clear { | ||
+ | |||
+ | clear: both; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* ---- Home ---- */ | ||
+ | |||
+ | .border_h2 { | ||
+ | |||
+ | border-bottom: 1px solid; | ||
+ | padding-bottom: 10px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #fucking-border { | ||
+ | |||
+ | border-top: 1px solid #d31906; | ||
+ | margin-top: 10px; | ||
+ | clear: both; | ||
+ | padding-top: 20px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .border_h2_right { | ||
+ | |||
+ | float: right; | ||
+ | |||
+ | } | ||
+ | |||
+ | .extra_fat { | ||
+ | |||
+ | font-size: 28pt !important; | ||
+ | border-bottom: 1px solid; | ||
+ | padding-bottom: 10px; | ||
margin-top: 20px; | margin-top: 20px; | ||
- | |||
- | |||
- | |||
+ | } | ||
+ | |||
+ | #grid_container { | ||
+ | |||
+ | height: 550px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #left_content { | ||
+ | |||
+ | float: left; | ||
+ | |||
+ | } | ||
+ | |||
+ | #right_content { | ||
+ | |||
+ | float: right; | ||
+ | width: 430px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .main_pic_left { | ||
+ | |||
+ | float: left; | ||
+ | width: 600px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #left_content_invert { | ||
+ | |||
+ | float: right; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #right_content_invert { | ||
+ | |||
+ | width: 430px; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* ---- Project overview ---- */ | ||
+ | |||
+ | #p_containerR { | ||
+ | |||
+ | width: 50%; | ||
+ | float: right; | ||
+ | margin-bottom: 10px; | ||
+ | border: 4px solid #d40400; | ||
+ | border-radius: 25px; | ||
+ | margin-left: 20px; | ||
+ | padding:10px; | ||
+ | box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1); | ||
+ | } | ||
+ | |||
+ | #p_containerL { | ||
+ | |||
+ | width: 50%; | ||
+ | float: left; | ||
+ | margin-bottom: 10px; | ||
+ | border: 4px solid #d40400; | ||
+ | border-radius: 25px; | ||
+ | margin-right: 20px; | ||
+ | padding:10px; | ||
+ | box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1); | ||
+ | } | ||
+ | |||
+ | #p_containerM { | ||
+ | |||
+ | width: 100%; | ||
+ | margin-bottom: 10px; | ||
+ | border: 4px solid #d40400; | ||
+ | border-radius: 25px; | ||
+ | box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1); | ||
+ | } | ||
+ | |||
+ | /* ---- Java Launch --- */ | ||
+ | |||
+ | .launchlist { | ||
+ | |||
+ | color: #5d6a52; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | font-size: 27px; | ||
+ | padding: 10px; | ||
+ | margin: 20px 0 0 0; | ||
+ | font-family: "Times New Roman", Times, serif; | ||
+ | font-size: 32px; | ||
+ | font-variant: small-caps; | ||
+ | font-weight: bold; | ||
+ | // box-shadow: 0 0 1px #000; | ||
+ | -webkit-text-stroke: 1px black; | ||
+ | -moz-text-stroke: 1px black; | ||
+ | } | ||
+ | |||
+ | .launchlist a:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* ------ Tables ------- */ | ||
+ | |||
+ | #partsT table | ||
+ | { | ||
+ | font-family: 'Black Ops One', cursive; | ||
+ | border-collapse:collapse; | ||
+ | } | ||
+ | |||
+ | #partsT td, th | ||
+ | { | ||
+ | font-size:0.8em; | ||
+ | border:1px solid #5d6a52; | ||
+ | padding:3px 7px 2px 7px; | ||
+ | } | ||
+ | #partsT th | ||
+ | { | ||
+ | font-size:1.1em; | ||
+ | text-align:left; | ||
+ | padding-top:5px; | ||
+ | padding-bottom:4px; | ||
+ | background-color: #dee1dc; | ||
+ | color:#5d6a52; | ||
+ | } | ||
+ | |||
+ | #partsT td{ | ||
+ | font-family: "Times New Roman", Times, serif; | ||
+ | } | ||
+ | |||
+ | #partsT tr:nth-of-type(odd) { | ||
+ | background-color:#dee1dc; | ||
+ | } | ||
+ | |||
+ | #modVideo{ | ||
+ | display: block; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | } | ||
+ | |||
+ | #newsP img:hover{ | ||
+ | box-shadow: 0px 0px 20px 0px rgba(0,0,0,1); | ||
} | } |
Latest revision as of 20:50, 17 October 2014
a { text-decoration: none; }
/* ----Project overview---- */
.overview {
text-align: center; border-bottom: 1px solid #d40400; padding-bottom: 5px; text-decoration: none;
}
- right_overview {
float: left; width: 500px; margin-left: 10px; }
- left_overview {
float: left; width: 300px;
}
.background {
border: 5px solid #d7d7d7; font-size: 16pt; padding-top: 10px; padding-left: 5px; padding-right: 5px; width: 280px; height: 512px; background-color: #d7d7d7; webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /*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);
- /
}
.background:hover {
border: 5px solid #d40400; /*box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8);
- /
} .box_text {
color: #000; display: block; width: 100%; height: 100%;
}
.box_text:hover {
color: #d40400; }
- result {
border: 5px solid #d7d7d7;
font-size: 16pt; padding-top: 10px; padding-left: 5px; padding-right: 5px; margin-top: 20px; margin-left: 10px; width: 480px; height: 236px; background-color: #d7d7d7; webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /*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);
- /
text-decoration: none; color: #000 !important;
}
- result:hover {
border: 5px solid #d40400; /* box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); color: #d40400 !important; text-decoration: none;
- /
}
- parts {
/* border: 3px solid #d40400;
- /
border: 5px solid #d7d7d7; font-size: 16pt; padding-top: 10px; padding-left: 5px; padding-right: 5px; width: 187px; height:512px; float: right; background-color: #d7d7d7; webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /*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);
- /
text-decoration: none; color: #000 !important;
}
- parts:hover {
border: 5px solid #d40400;
/* box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); color: #d40400 !important; text-decoration: none;
- /
}
.mparts {
text-align: center;
}
- system_design {
/* border: 3px solid #d40400;
- /
border: 5px solid #d7d7d7; font-size: 16pt; padding-top: 10px; padding-left: 5px; padding-right: 5px; margin-left: 10px; width: 480px; height: 236px; background-color: #d7d7d7; webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; /*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);
- /
text-decoration: none; color: #000 !important;
}
- system_design:hover {
border: 5px solid #d40400;
/* box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -webkit-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); -moz-box-shadow: 0px 0px 25px rgba(212, 4, 0, 0.8); color: #d40400 !important; text-decoration: none;
- /
}
.project_h2 {
padding-top: 20px; border-top: 1px solid #d40400;
}
/* ---- Team ---- */
.team_pic {
display: block; width: 900px; margin-right: auto; margin-left: auto;
}
/* ---- Targeting project ---- */
.swarm {
display: block; width: 900px; margin-right: auto; margin-left: auto;
}
/* ---- Chapter buttons ---- */
.prev {
width: 150px; float: left; opacity: 0.6; webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
}
.prev:hover {
opacity: 1.0;
}
.next:hover {
opacity: 1.0;
}
.next {
width: 150px; float: right; opacity: 0.6; webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
.next_pic {
width: 100px; float: right;
}
.prev_pic {
width: 100px;
}
- button_container {
height: 100px;
}
- clear {
clear: both;
}
/* ---- Home ---- */
.border_h2 {
border-bottom: 1px solid; padding-bottom: 10px;
}
- fucking-border {
border-top: 1px solid #d31906; margin-top: 10px; clear: both; padding-top: 20px;
}
.border_h2_right {
float: right;
}
.extra_fat {
font-size: 28pt !important; border-bottom: 1px solid; padding-bottom: 10px; margin-top: 20px;
}
- grid_container {
height: 550px;
}
- left_content {
float: left;
}
- right_content {
float: right; width: 430px;
}
.main_pic_left {
float: left; width: 600px;
}
- left_content_invert {
float: right;
}
- right_content_invert {
width: 430px;
}
/* ---- Project overview ---- */
- p_containerR {
width: 50%; float: right; margin-bottom: 10px; border: 4px solid #d40400; border-radius: 25px; margin-left: 20px; padding:10px; box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1); }
- p_containerL {
width: 50%; float: left; margin-bottom: 10px; border: 4px solid #d40400; border-radius: 25px; margin-right: 20px; padding:10px; box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1); }
- p_containerM {
width: 100%; margin-bottom: 10px; border: 4px solid #d40400; border-radius: 25px; box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1); }
/* ---- Java Launch --- */
.launchlist {
color: #5d6a52; text-align: center; position: relative; font-size: 27px; padding: 10px; margin: 20px 0 0 0; font-family: "Times New Roman", Times, serif; font-size: 32px; font-variant: small-caps; font-weight: bold;
// box-shadow: 0 0 1px #000;
-webkit-text-stroke: 1px black; -moz-text-stroke: 1px black;
}
.launchlist a:hover { text-decoration: none; }
/* ------ Tables ------- */
- partsT table
{ font-family: 'Black Ops One', cursive; border-collapse:collapse; }
- partsT td, th
{ font-size:0.8em; border:1px solid #5d6a52; padding:3px 7px 2px 7px; }
- partsT th
{ font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color: #dee1dc; color:#5d6a52; }
- partsT td{
font-family: "Times New Roman", Times, serif; }
- partsT tr:nth-of-type(odd) {
background-color:#dee1dc; }
- modVideo{
display: block; margin-right: auto; margin-left: auto; }
- newsP img:hover{
box-shadow: 0px 0px 20px 0px rgba(0,0,0,1); }