Team:Glendale CC AZ/css

From 2013.igem.org

Revision as of 04:45, 23 July 2013 by EstherJ (Talk | contribs)
   <link rel="stylesheet" href="https://2013.igem.org/Team:Glendale_CC_AZ/test/services/wix-public/1.30.0/css/Helvetica/fontFace.css">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Integer sit amet aliquet

This is FlowerClusters, a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. The photos in this template are from Fotogrph. This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)

Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Consectetuer adipiscing elit.


<style type="text/css" media="screen"> html, body { height: 100%; }

body { margin: 0px; padding: 0px; background: #FFF; font-family: 'Source Sans Pro', sans-serif; font-size: 12pt; font-weight: 400; color: #4C4C4C; }


h1, h2, h3 { margin: 0; padding: 0; }

p, ol, ul { margin-top: 0; }

ol, ul { padding: 0; list-style: none; }

p { line-height: 180%; }

strong { }

a { color: #A41F1F; }

a:hover { text-decoration: none; }

.container { width: 1200px; margin: 0 auto; }

/*********************************************************************************/ /* Image Style */ /*********************************************************************************/

.image { display: inline-block; }

.image img { display: block; width: 100%; }

.image-full { display: block; width: 100%; margin: 0 0 0 0; }

.image-left { float: left; margin: 0 2em 2em 0; }

.image-centered { display: block; margin: 0 0 2em 0; }

.image-centered img { margin: 0 auto; width: auto; }

/*********************************************************************************/ /* List Styles */ /*********************************************************************************/

ul.style1 { margin: 0; padding: 0; list-style: none; }

ul.style1 li { border-top: solid 1px #E5E5E5; padding: 0.80em 0; }

ul.style1 li:first-child { border-top: 0; padding-top: 0; }


/*********************************************************************************/ /* Social Icon Styles */ /*********************************************************************************/

ul.contact { margin: 0; padding: 0em 0em 0em 0em; list-style: none; }

ul.contact li { padding: 0em 0.30em 0.8em 0em; font-size: 1em; }

ul.contact li span { margin: 0; padding: 0; }

ul.contact li a { letter-spacing: 0.20em; text-transform: uppercase; font-size: 0.90em; color: #FFF; }

ul.contact li a:before { display: inline-block; background: #3f3f3f; width: 40px; height: 40px; margin-right: 1em; line-height: 40px; border-radius: 20px; text-align: center; color: #FFFFFF; }

ul.contact li a.icon-twitter:before { background: #2DAAE4; } ul.contact li a.icon-facebook:before { background: #39599F; } ul.contact li a.icon-dribbble:before { background: #C4376B; } ul.contact li a.icon-tumblr:before { background: #31516A; } ul.contact li a.icon-rss:before { background: #F2600B; }

/*********************************************************************************/ /* Button Style */ /*********************************************************************************/

.button { display: inline-block; padding: 1em 3em 1em 2em; letter-spacing: 0.20em; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 0.90em; color: #FFF; }

.button:before { display: inline-block; background: #FFC31F; margin-right: 1em; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; color: #272925; }

/*********************************************************************************/ /* Heading Titles */ /*********************************************************************************/

.title { position: relative; margin-bottom: 3em; padding-bottom: 2em; text-transform: uppercase; border-bottom: 2px solid #CCC; }

.title:after { display: block; content: " "; position: absolute; bottom: -2px; width: 2em; border-bottom: 2px solid #e10126; left: 0; }

.title h2 { letter-spacing: 0.20em; font-weight: 700; font-size: 2em; color: #171717; }

.title .byline { display: block; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; font-size: 0.90em; color: #6F6F6F; }

/*********************************************************************************/ /* Header */ /*********************************************************************************/

#header-wrapper { background: #e10126; box-shadow: inset 0 -15px 10px -10px rgba(0,0,0,.2); }

#header { position: relative; height: 150px; }

/*********************************************************************************/ /* Logo */ /*********************************************************************************/

#logo { position: absolute; top: 3em; left: 0; width: 100%; }

#logo h1 { display: inline-block; font-size: 2.5em; text-transform: uppercase; font-weight: 700; color: #FFF; }

#logo a { text-decoration: none; color: #FFF; }

/*********************************************************************************/ /* Menu */ /*********************************************************************************/

#menu { position: absolute; right: 0; top: 3em; }

#menu ul { display: inline-block; }

#menu li { display: block; float: left; text-align: center; }

#menu li a, #menu li span { display: block; padding: 0.80em 1.5em; letter-spacing: 0.20em; text-decoration: none; font-size: 0.90em; font-weight: 600; text-transform: uppercase; outline: 0; color: #FFF; }

#menu li:hover a, #menu li.active a, #menu li.active span { }

#menu .current_page_item a { color: #FFF; }

/*********************************************************************************/ /* Banner */ /*********************************************************************************/

#banner { }

/*********************************************************************************/ /* Page */ /*********************************************************************************/

#page { position: relative; overflow: hidden; padding: 6em 0em 5em 0em; }

/*********************************************************************************/ /* Content */ /*********************************************************************************/

#content { float: right; width: 790px; }

#content .image-full { margin-bottom: 3em; }

/*********************************************************************************/ /* Sidebar */ /*********************************************************************************/

#sidebar { float: left; width: 345px; }

#sidebar .title h2 { font-size: 1.6em; }

#sidebar .box1 { margin-bottom: 3em; }

/*********************************************************************************/ /* Footer */ /*********************************************************************************/

#footer-wrapper { overflow: hidden; padding: 5em 0em; background: #1E1B1A; }

#footer { }

#footer .title h2 { font-weight: 400; font-size: 1.2em; color: #FFF; }

#footer .title { border-color: #2D2926 !important; }

#footer .style1 li { border-color: #2D2926 !important; }

#footer .style1 a { letter-spacing: 0.10em; text-decoration: none; font-size:1em; color: #B1B1B1; }

#box1 { float: left; width: 354px; margin-right: 24px; padding-right: 30px; }

#box2 { float: left; width: 354px; margin-left: 24px; padding-right: 30px; }

#box3 { float: right; width: 344px; padding-left: 40px; }

/*********************************************************************************/ /* Copyright */ /*********************************************************************************/

#copyright { overflow: hidden; padding: 5em 0em; }

#copyright p { letter-spacing: 0.20em; text-align: center; text-transform: uppercase; font-size: 0.80em; color: #6F6F6F; }

#copyright a { text-decoration: none; color: #8C8C8C; }

/*********************************************************************************/ /* Featured */ /*********************************************************************************/

#featured-wrapper { overflow: hidden; padding: 3em 0em; background: #1E1B1A; }

#featured { overflow: hidden; }

#featured .box { overflow: hidden; width: 160px; padding: 10px; background: #FFF; }

#feaured .box .image-full { margin-bottom: 0 !important; }

#featured .box1, #featured .box2, #featured .box3, #featured .box4 { float: left; margin-right: 24px; }

#featured .box5 { float: left; }

#featured .box6 { float: right; } </style>