Team:UChicago/stylesheets/style
From 2012.igem.org
(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 */
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
- top-section {
border: none; height: 0px;}
- content {
border: none;}
/* Removes "teams" from the menubar */
- menubar > ul > li:last-child {
display: none;}
/* Resizes the menubar to fik the links (default is 400px) */
- menubar {
width: auto;}
body {
margin: 10px 0 0 0; padding: 0;}
- top-section {
width: 965px; height: 0; margin: 0 auto; padding: 0; border: none;}
- menubar {
font-size: 65%; top: -14px;}
.left-menu:hover {
background-color: transparent;}
- menubar li a {
background-color: transparent;}
- menubar:hover {
color: white;}
- menubar li a {
color: transparent;}
- 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); }
- 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; }