Team:UChicago/stylesheets/style

From 2012.igem.org

(Difference between revisions)
(Created page with "- From DTU: #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { display:none;} #top-section { border: none; height: 0px;} #content { ...")
Line 38: Line 38:
#menubar:hover li a {
#menubar:hover li a {
     color: white;}
     color: white;}
 +
 +
/*-----------------------------*\
 +
*-----------------------------*
 +
  Greetings!
 +
 +
    TABLE OF CONTENTS
 +
 +
    =starting_template
 +
    =header
 +
    =nav
 +
    =slider
 +
    =content
 +
    =img
 +
    =paragraph
 +
    =closing_template
 +
    =button
 +
    =say_hello
 +
    =footer
 +
*-----------------------------*
 +
\*-----------------------------*/
 +
 +
 +
 +
/*----------------------*\
 +
=starting_template
 +
\*----------------------*/
 +
 +
body {
 +
width: 840px;
 +
margin: 0 auto;
 +
position: relative;
 +
font-family: Montserrat, Helvetica, Verdana, sans-serif;
 +
background: url(../img/bg-pattern.jpg);
 +
}
 +
 +
#wrapper {
 +
background: white;
 +
-moz-box-shadow: 0px 2px 5px 4px #737373;
 +
    -webkit-box-shadow: 0px 2px 5px 4px #737373;
 +
    box-shadow: 0px 2px 5px 4px #737373;
 +
}
 +
 +
a {
 +
text-decoration: none;
 +
color: #800000;
 +
}
 +
 +
/*----------------------*\
 +
=header
 +
\*----------------------*/
 +
 +
header img {
 +
position: absolute;
 +
top: 25px;
 +
left:-20px;
 +
}
 +
 +
h1 {
 +
font: Montserrat; /* load bold webfont */
 +
font-size: 24px;
 +
font-weight: normal;
 +
position: absolute;
 +
margin-top: 25px;
 +
padding: 11.5px 60px 12px 35px;
 +
left: -20px;
 +
background-color: #ebebeb;
 +
}
 +
 +
h1 a  {
 +
color: #800000;
 +
}
 +
    h1 a:hover {
 +
color: #8F3931;
 +
}
 +
h1 #igem_navbar a {
 +
color: #8a9045;
 +
}
 +
h1 #igem_navbar a:hover {
 +
color: #a1a76b;
 +
}
 +
/*----------------------*\
 +
=nav
 +
\*----------------------*/
 +
 +
nav ul {
 +
list-style: none;
 +
position: absolute;
 +
right: -20px;
 +
padding: 25px 35px 15.5px 60px;
 +
margin: 25px 0 35px 0;
 +
background-color: #ebebeb;
 +
}
 +
 +
nav ul li {
 +
display: inline;
 +
}
 +
 +
nav ul li a {
 +
color: #000;
 +
}
 +
 +
nav ul li a:hover {
 +
color: #800000;
 +
border-bottom: 2px solid #800000;
 +
}
 +
 +
/*----------------------*\
 +
=slider
 +
\*----------------------*/
 +
 +
.rslides {
 +
  position: relative;
 +
  list-style: none;
 +
  overflow: hidden;
 +
  width: 100%;
 +
  padding: 0;
 +
  margin: 0;
 +
  }
 +
 +
.rslides li {
 +
  -webkit-backface-visibility: hidden;
 +
  position: absolute;
 +
  display: none;
 +
  width: 100%;
 +
  left: 0;
 +
  top: 0;
 +
  }
 +
 +
.rslides li:first-child {
 +
  position: relative;
 +
  display: block;
 +
  float: left;
 +
  }
 +
 +
.rslides img {
 +
  display: block;
 +
  height: auto;
 +
  float: left;
 +
  width: 100%;
 +
  border: 0;
 +
  }
 +
 +
/*----------------------*\
 +
=content
 +
\*----------------------*/
 +
 +
#content {
 +
padding: 100px 100px;
 +
}
 +
 +
h2 {
 +
font-family: Helvetica;
 +
font-weight: normal;
 +
color: #800000;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
#content img {
 +
float: left;
 +
padding: 20px 0;
 +
}
 +
 +
h4, h4 a {
 +
font-family: Montserrat;
 +
font-size: 18px;
 +
color: #000;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
h4 a:hover {
 +
color: #800000;
 +
text-decoration: underline;
 +
}
 +
 +
article {
 +
/* FIGURE THIS OUT SO BORDER BOTTOM GOES WITH MARGIN 50px */
 +
}
 +
 +
.paragraph {
 +
float: right;
 +
width: 400px;
 +
margin-right: 20px;
 +
padding: 20px 0 20px 0;
 +
}
 +
 +
.paragraph p {
 +
font-family: Helvetica;
 +
font-size: 15px;
 +
color: #565656;
 +
}
 +
 +
 +
/*----------------------*\
 +
=closing_template
 +
\*----------------------*/
 +
 +
.closing_template {
 +
clear: both;
 +
padding: 50px 100px;
 +
}
 +
 +
h3#button {
 +
background: url(../img/button.png) no-repeat;
 +
 +
margin: 0 0 2px 0;
 +
padding: 25px 63px 25px 63px;
 +
background-position: center;
 +
border-bottom: 1px solid #959494;
 +
}
 +
 +
#button a {
 +
color: #fff;
 +
font-weight: normal;
 +
}
 +
/* 2nd button from generator*/
 +
.button {
 +
background-color:#8a9045;
 +
-moz-border-radius:5px;
 +
-webkit-border-radius:5px;
 +
border-radius:5px;
 +
display:inline-block;
 +
padding:8px 50px;
 +
text-decoration:none;
 +
}
 +
.button:hover {
 +
background-color:#a1a76b;
 +
}
 +
.button:active {
 +
position:relative;
 +
top:1px;
 +
}
 +
.button a {
 +
color: #fff;
 +
font-weight: 400;
 +
font-family: Montserrat;
 +
font-size:20px;
 +
}
 +
 +
/* This imageless css button was generated by CSSButtonGenerator.com */
 +
 +
.closing_template p {
 +
font-family: Verdana;
 +
font-size: 11px;
 +
color: #7f1416;
 +
text-align: right;
 +
}
 +
 +
#watermark {
 +
position: absolute;
 +
margin-left: 600px;
 +
}
 +
 +
#footer {
 +
clear: both;
 +
text-align: center;
 +
}

Revision as of 19:41, 9 September 2013

/* From DTU */

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;}
  1. top-section {
   border: none;
   height: 0px;}
  1. content {
   border: none;}

/* Removes "teams" from the menubar */

  1. menubar > ul > li:last-child {
   display: none;}

/* Resizes the menubar to fik the links (default is 400px) */

  1. menubar {
   width: auto;}

body {

   margin: 10px 0 0 0;
   padding: 0;}
  1. top-section {
   width: 965px;
   height: 0;
   margin: 0 auto;
   padding: 0;
   border: none;}
  1. menubar {
   font-size: 65%;
   top: -14px;}

.left-menu:hover {

   background-color: transparent;}
  1. menubar li a {
   background-color: transparent;}
  1. menubar:hover {
   color: white;}
  1. menubar li a {
   color: transparent;}
  1. menubar:hover li a {
   color: white;}

/*-----------------------------*\

*-----------------------------*
  	Greetings!
   TABLE OF CONTENTS
   =starting_template
   	=header
   		=nav
   =slider
   =content
   	=img
   	=paragraph
   =closing_template
   	=button
   	=say_hello
   	=footer
*-----------------------------*

\*-----------------------------*/


/*----------------------*\ =starting_template \*----------------------*/

body { width: 840px; margin: 0 auto; position: relative; font-family: Montserrat, Helvetica, Verdana, sans-serif; background: url(../img/bg-pattern.jpg); }

  1. wrapper {

background: white; -moz-box-shadow: 0px 2px 5px 4px #737373;

   -webkit-box-shadow: 0px 2px 5px 4px #737373;
   box-shadow: 0px 2px 5px 4px #737373;

}

a { text-decoration: none; color: #800000; }

/*----------------------*\ =header \*----------------------*/

header img { position: absolute; top: 25px; left:-20px; }

h1 { font: Montserrat; /* load bold webfont */ font-size: 24px; font-weight: normal; position: absolute; margin-top: 25px; padding: 11.5px 60px 12px 35px; left: -20px; background-color: #ebebeb; }

h1 a { color: #800000; }

   h1 a:hover {

color: #8F3931; } h1 #igem_navbar a { color: #8a9045; } h1 #igem_navbar a:hover { color: #a1a76b; } /*----------------------*\ =nav \*----------------------*/

nav ul { list-style: none; position: absolute; right: -20px; padding: 25px 35px 15.5px 60px; margin: 25px 0 35px 0; background-color: #ebebeb; }

nav ul li { display: inline; }

nav ul li a { color: #000; }

nav ul li a:hover { color: #800000; border-bottom: 2px solid #800000; }

/*----------------------*\ =slider \*----------------------*/

.rslides {

 position: relative;
 list-style: none;
 overflow: hidden;
 width: 100%;
 padding: 0;
 margin: 0;
 }

.rslides li {

 -webkit-backface-visibility: hidden;
 position: absolute;
 display: none;
 width: 100%;
 left: 0;
 top: 0;
 }

.rslides li:first-child {

 position: relative;
 display: block;
 float: left;
 }

.rslides img {

 display: block;
 height: auto;
 float: left;
 width: 100%;
 border: 0;
 }

/*----------------------*\ =content \*----------------------*/

  1. content {

padding: 100px 100px; }

h2 { font-family: Helvetica; font-weight: normal; color: #800000; margin: 0; padding: 0; }

  1. content img {

float: left; padding: 20px 0; }

h4, h4 a { font-family: Montserrat; font-size: 18px; color: #000; margin: 0; padding: 0; }

h4 a:hover { color: #800000; text-decoration: underline; }

article { /* FIGURE THIS OUT SO BORDER BOTTOM GOES WITH MARGIN 50px */ }

.paragraph { float: right; width: 400px; margin-right: 20px; padding: 20px 0 20px 0; }

.paragraph p { font-family: Helvetica; font-size: 15px; color: #565656; }


/*----------------------*\ =closing_template \*----------------------*/

.closing_template { clear: both; padding: 50px 100px; }

h3#button { background: url(../img/button.png) no-repeat;

margin: 0 0 2px 0; padding: 25px 63px 25px 63px; background-position: center; border-bottom: 1px solid #959494; }

  1. button a {

color: #fff; font-weight: normal; }

/* 2nd button from generator*/

.button { background-color:#8a9045; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:inline-block; padding:8px 50px; text-decoration:none; } .button:hover { background-color:#a1a76b; } .button:active { position:relative; top:1px; } .button a { color: #fff; font-weight: 400; font-family: Montserrat; font-size:20px; }

/* This imageless css button was generated by CSSButtonGenerator.com */

.closing_template p { font-family: Verdana; font-size: 11px; color: #7f1416; text-align: right; }

  1. watermark {

position: absolute; margin-left: 600px; }

  1. footer {

clear: both; text-align: center; }