Team:Calgary/StyleSheets/Content

From 2014.igem.org

(Difference between revisions)
Line 21: Line 21:
#Page {
#Page {
min-width: 960px;
min-width: 960px;
-
max-width: 1600px;
 
}
}
Line 126: Line 125:
.Color-Orange h1, .Color-Orange h2, .Color-Orange h3, .Color-Orange h4, .Color-Orange h5, .Color-Orange h6 {
.Color-Orange h1, .Color-Orange h2, .Color-Orange h3, .Color-Orange h4, .Color-Orange h5, .Color-Orange h6 {
color: #6E6E6E;
color: #6E6E6E;
 +
}
 +
 +
.Color-Black {
 +
background: #333333;
 +
color: #FFFFFF;
 +
}
 +
 +
.Color-Black h1, .Color-Black h2, .Color-Black h3, .Color-Black h4, .Color-Black h5, .Color-Black h6 {
 +
color: #FFFFFF;
}
}
Line 180: Line 188:
}
}
-
h2.HomeMisdiagnosisH2, h2.HomeCaseStudyH2, h2.HomeOurDeviceH2, h2.HomeComponentsH2 {
+
h2.HomeBsDetectorH2, h2.HomeBsDetectorH2 i, h2.HomeMisdiagnosisH2, h2.HomeCaseStudyH2, h2.HomeOurDeviceH2, h2.HomeComponentsH2 {
text-decoration: none;
text-decoration: none;
margin: 0 0 25px 40px;
margin: 0 0 25px 40px;
Line 186: Line 194:
}
}
-
p.HomeMisdiagnosisP, p.HomeCaseStudyP, p.HomeOurDeviceP, p.HomeComponentsP {
+
p.HomeBsDetectorP, p.HomeMisdiagnosisP, p.HomeCaseStudyP, p.HomeOurDeviceP, p.HomeComponentsP {
font-size: 24px;
font-size: 24px;
text-indent: 0;
text-indent: 0;
Line 234: Line 242:
#groupparts {
#groupparts {
margin: 50px auto;
margin: 50px auto;
 +
}
 +
 +
.buttoncontainer{
 +
width: 100%;
 +
max-width: 960px;
 +
margin: auto;
 +
}
 +
 +
.button{
 +
width: 24%;
 +
float: left;
 +
margin: 0.5%;
 +
}
 +
 +
.button a img{
 +
width:100%;
 +
margin: 0;
 +
}
 +
 +
.button a img:hover{
 +
opacity: 0.8;
 +
filter: alpha(opacity=80); /* for IE8 and earlier */
}
}

Revision as of 01:25, 18 October 2014

/*** Name: Wm. Keith van der Meulen Date: Summer 2014 Organization: University of Calgary iGEM Team 2014

---Purpose--- CSS code to define content page stylings.


Cite: Wm. Keith van der Meulen University of Calgary iGEM 2013 https://2014.igem.org/Team:Calgary/StyleSheets/Content?action=raw&ctype=text/css

      • /
  1. bodyContent a[href^="https://"], .link-https {

background: none; padding-right: 0; }

  1. Page {

min-width: 960px; }

sub {

   vertical-align: sub;
   font-size: smaller;

}

sup {

   vertical-align: super;
   font-size: smaller;

}

iframe { display: block; margin: 0 auto; }

img { margin: 30px; }

.Content { position: relative; padding: 50px 6%; top: 84px; text-align: left; overflow: hidden; }

.Content p, .Content li { font: 16px/125% 'Open Sans', sans-serif; }

.Content h1, .Content h2, .Content h3, .Content h4, .Content h5, .Content h6 { font-family: 'Archivo Narrow', sans-serif; line-height: 150%; } .Content h1 { font-weight: bold; }

.Content h2, .Content h3, .Content h4, .Content h5, .Content h6 { margin-top: 20px; text-decoration: underline; }

.Content h3, .Content h4, .Content h5, .Content h6 { font-weight: normal; }

.Content h1, .Content h1 i { font-size: 30px; font-weight: bold; }

.Content h2, .Content h2 i { font-size: 26px; font-weight: bold; }

.Content h3, .Content h3 i { font-size: 22px; }

.Content h4, .Content h4 i { font-size: 20px; }

.Content h5, .Content h5 i { font-size: 18px; }

.Content h6, .Content h6 i { font-size: 16px; }

.Color-Normal { color: #333333; }

.Color-Normal h1, .Color-Normal h2, .Color-Normal h3, .Color-Normal h4, .Color-Normal h5, .Color-Normal h6 { color: #333333; }

.Color-Normal h1 { border-bottom: #333333 3px solid }

.Color-Light { background: #EEF3FA; color: #6E6E6E; }

.Color-Light h1, .Color-Light h2, .Color-Light h3, .Color-Light h4, .Color-Light h5, .Color-Light h6 { color: #6E6E6E; }

.Color-Orange { background: #F9E3C5; color: #6E6E6E; }

.Color-Orange h1, .Color-Orange h2, .Color-Orange h3, .Color-Orange h4, .Color-Orange h5, .Color-Orange h6 { color: #6E6E6E; }

.Color-Black { background: #333333; color: #FFFFFF; }

.Color-Black h1, .Color-Black h2, .Color-Black h3, .Color-Black h4, .Color-Black h5, .Color-Black h6 { color: #FFFFFF; }

.Color-Dark { background: #2A2A2A; color: #F1F1F1; }

.Color-Dark h1, .Color-Dark h2, .Color-Dark h3, .Color-Dark h4, .Color-Dark h5, .Color-Dark h6 { color: #F1F1F1; }

.Color-Blue { background: #C5F2F4; color: #333333; }

.Color-Blue h1, .Color-Blue h2, .Color-Blue h3, .Color-Blue h4, .Color-Blue h5, .Color-Blue h6 { color: #333333; }

.Text p, .Text ol, .Text ul, .Text table { margin-bottom: 1em; }

.Text p { text-indent: 1.5em; }

  1. HomeHuman{

width: 300px; float: right; margin: 0 130px 0 70px; }

  1. HomeMisdiagnosis {

background: #EEF3FA url('https://static.igem.org/mediawiki/2014/c/cd/2014UCalgaryHomeMisdiagnosisTriangles.png') no-repeat right top; background-size: 600px 100px; }

  1. HomeCaseStudy {

background: #F9E3C5 url('https://static.igem.org/mediawiki/2014/6/66/2014UCalgaryHomeCaseStudyBG.png'); }

  1. HomeOurDevice {

background-image: url('https://static.igem.org/mediawiki/2014/7/71/2014UCalgaryHomeOurDevicBGTop.png'), url('https://static.igem.org/mediawiki/2014/3/3d/2014UCalgaryHomeOurDevicBGBottom.png'); background-repeat: no-repeat; background-position: right top, left bottom; background-size: 500px 100px; }

  1. HomeComponents {

background: #C5F2F4 url('https://static.igem.org/mediawiki/2014/6/66/2014UCalgaryHomeCaseStudyBG.png') }

h2.HomeBsDetectorH2, h2.HomeBsDetectorH2 i, h2.HomeMisdiagnosisH2, h2.HomeCaseStudyH2, h2.HomeOurDeviceH2, h2.HomeComponentsH2 { text-decoration: none; margin: 0 0 25px 40px; font-size: 40px; }

p.HomeBsDetectorP, p.HomeMisdiagnosisP, p.HomeCaseStudyP, p.HomeOurDeviceP, p.HomeComponentsP { font-size: 24px; text-indent: 0; }

span.HomeBigText { font-size: 26px; font-weight: bold; }

.Center { display: block; margin: 0 auto; }

p.Center { text-align: center; text-indent: 0; }

p.NoIndent { text-indent: 0; }

h4.ListIndent{ text-indent: 1.25em; }

.TeamMember, .Sponsor { overflow: hidden; }

.MemberPic { width: 175px; }

.TeamLeft { float: left; margin-right: 30px; }

.TeamRight, .SponsorLogo { float: right; margin-left: 30px; }

  1. groupparts {

margin: 50px auto; }

.buttoncontainer{ width: 100%; max-width: 960px; margin: auto; }

.button{ width: 24%; float: left; margin: 0.5%; }

.button a img{ width:100%; margin: 0; }

.button a img:hover{ opacity: 0.8; filter: alpha(opacity=80); /* for IE8 and earlier */ }