Team:Glendale CC AZ/main.css
From 2013.igem.org
(Difference between revisions)
(Created page with "<html> <style> - →CSS for Vertical Menu: #cssmenu { padding: 0; margin: 0; border: 0; } #cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; } #cssm...") |
|||
(38 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <style type="text/css"> | ||
+ | p:not(.active):hover | ||
+ | { | ||
+ | color: rgb(190,39,0); | ||
+ | } | ||
- | + | /*--Formatting to remove and alter wiki css defaults--*/ | |
- | /* | + | #contentSub, .firstHeading, #footer-box, #catlinks, #search-controls { display:none;} |
- | # | + | #top-section {padding-top: 0px; border: none;} |
- | + | #globalWrapper, #content { width: 100%; background-color: #fff; border: none; margin: 0; padding: 0; position: relative;} | |
- | + | html, body { height: 100%; background: #fff;} | |
- | + | body {font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #333; background: #f0f0f0;} | |
+ | #newcontainer { /*-- Footer specific edits http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ --*/ | ||
+ | width:975px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | position:relative; | ||
+ | min-height: 100%; | ||
+ | height: auto !important; | ||
+ | height: 100%; | ||
+ | border: 0px solid #000; | ||
+ | margin: 0 auto -250px; | ||
+ | color: #333; | ||
} | } | ||
- | # | + | body |
- | # | + | { |
- | list-style: none; | + | background:#FFF |
+ | margin-right:200px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #contentSub, #search-controls, #footer-box, .firstHeading, #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: 100%; | ||
+ | top: -16px;} | ||
+ | .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;} | ||
+ | |||
+ | 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: #000000 ;} | ||
+ | |||
+ | code { | ||
+ | background-color: #ddd; | ||
+ | } | ||
+ | .contentWrap { | ||
+ | padding: 2em; | ||
+ | } | ||
+ | .content { | ||
+ | width: 650px; | ||
+ | margin: 0 auto; | ||
+ | min-height: 1250px; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | h1 { | ||
+ | font-size: 2em; | ||
+ | line-height: 2em; | ||
+ | } | ||
+ | |||
+ | /*** Styles for the main header ***/ | ||
+ | #main { | ||
+ | background-color: #B00000; | ||
+ | position: relative; | ||
+ | z-index: 1001; | ||
+ | } | ||
+ | ul.nav { | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | ul.nav { | ||
+ | width: 650px; | ||
+ | margin: 0 auto; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | ul.nav li { | ||
+ | float: left; | ||
+ | list-style: none; | ||
+ | margin: .5em .5em .5em 0; | ||
+ | padding: .5em .5em .5em 0; | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | ul.nav li a { | ||
+ | text-decoration: none; | ||
+ | color: #000; | ||
+ | } | ||
+ | ul.nav li a:hover { | ||
+ | color: #FF2B44; | ||
+ | transition: color 400ms ease-out; | ||
+ | } | ||
+ | |||
+ | /*** Styles for the sticky header ***/ | ||
+ | #stickyContent { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | z-index: 1000; | ||
+ | background-color: #B3B3B3 ; | ||
+ | } | ||
+ | #stickyContent ul.nav li { | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | #stickyContent ul.nav a { | ||
+ | color: #B00000; | ||
+ | } | ||
+ | #stickyContent ul.nav .text{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | <style type="text/css"> | ||
+ | * { | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | html { | ||
+ | font-size:50%; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | font-family: "Source Sans Pro"; | ||
+ | font-size:1.3rem; | ||
+ | line-height: 2.3rem; | ||
+ | color:#444; | ||
+ | background: #fff; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: #06c; | ||
+ | transition: color .3s; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #012c57; | ||
+ | } | ||
+ | |||
+ | h1, h2, h3, h4, h5, h6, h7 { | ||
+ | font-family: "Futura"; | ||
+ | line-height:2.6rem; | ||
+ | font-weight:normal; | ||
+ | color: #111; | ||
+ | } | ||
+ | |||
+ | .content-area { | ||
+ | width:850px; | ||
+ | padding:2rem; | ||
+ | margin:auto; | ||
+ | background: #f9f9f9; | ||
+ | } | ||
+ | |||
+ | .content-area h1 { | ||
+ | font-size: 2.7rem; | ||
+ | } | ||
+ | |||
+ | .content-area h2 { | ||
+ | font-size: 2.2rem; | ||
+ | } | ||
+ | |||
+ | .content-area h3 { | ||
+ | font-size: 2.7rem; | ||
+ | } | ||
+ | |||
+ | .content-area h4 { | ||
+ | font-size: 1.6rem; | ||
+ | } | ||
+ | |||
+ | .content-area h5 { | ||
+ | font-size: 1.4rem; | ||
+ | } | ||
+ | |||
+ | .content-area h6 { | ||
+ | font-size: 1.2rem; | ||
+ | } | ||
+ | |||
+ | .content-area aside { | ||
+ | float:right; | ||
+ | width:50%; | ||
+ | padding:2rem; | ||
+ | |||
+ | .blockquote { | ||
+ | font-family: Georgia, serif; | ||
+ | font-size: 18px; | ||
+ | font-style: italic; | ||
+ | width: 500px; | ||
+ | margin: 0.25em 0; | ||
+ | padding: 0.35em 40px; | ||
+ | line-height: 1.45; | ||
+ | position: relative; | ||
+ | color: #383838; | ||
+ | } | ||
+ | |||
+ | .blockquote:before { | ||
+ | display: block; | ||
+ | padding-left: 10px; | ||
+ | content: "\201C"; | ||
+ | font-size: 80px; | ||
+ | position: absolute; | ||
+ | left: -20px; | ||
+ | top: -20px; | ||
+ | color: #7a7a7a; | ||
+ | } | ||
+ | |||
+ | .blockquote cite { | ||
+ | color: #999999; | ||
+ | font-size: 14px; | ||
+ | display: block; | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | |||
+ | .blockquote cite:before { | ||
+ | content: "\2014 \2009"; | ||
+ | } | ||
+ | |||
+ | * { | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
+ | border: 0; | ||
+ | outline: none; | ||
+ | text-decoration: none; | ||
+ | list-style: none; | ||
+ | font-weight: 200; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | line-height: 1em; | ||
+ | font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif; | ||
+ | box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
} | } | ||
- | + | ||
- | + | /* Defaults */ | |
- | + | body { | |
+ | font-size: 16px; | ||
+ | background: #e5e5e5; | ||
} | } | ||
- | + | ||
- | + | h1 { | |
- | + | font-size: 180%; | |
+ | color: #fff; | ||
} | } | ||
- | # | + | |
+ | h2 { | ||
+ | font-size: 160%; | ||
+ | color: #666; | ||
+ | padding-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | font-size: 120%; | ||
+ | color: #ccc; | ||
+ | padding-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | img { | ||
display: block; | display: block; | ||
- | + | width: 100%; | |
} | } | ||
- | + | ||
- | + | p, a, span, li { | |
- | font- | + | font-size: 90%; |
- | + | line-height: 25px; | |
- | + | color: #666; | |
} | } | ||
- | + | ||
- | + | p a, li a, h1 a, p span { | |
- | + | color: inherit; | |
- | + | font-size: inherit; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | p a { | |
- | + | color: #48C7C1; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | p a:hover { | |
- | - | + | text-decoration: underline; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | - | + | p.tags { |
- | + | padding-top: 10px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | p.tags a { | |
- | + | padding: 0px 5px 0px 5px; | |
- | + | background: #222; | |
- | + | margin-right: 5px; | |
- | color: # | + | border-radius: 2px; |
- | + | color: #999; | |
+ | display: inline-block; | ||
+ | cursor: pointer; | ||
+ | margin-top: 5px; | ||
} | } | ||
- | + | ||
- | + | .wrapper { | |
- | + | width: 960px; | |
+ | margin: 0px auto; | ||
+ | overflow: hidden; | ||
+ | word-wrap: break-word; | ||
} | } | ||
- | + | ||
- | + | /* Buttons */ | |
- | + | .button { | |
- | + | background: #48C7C1; | |
- | + | border-radius: 2px; | |
- | + | padding: 15px 0px 15px 0px; | |
- | + | width: 100%; | |
- | + | color: #fff; | |
- | + | font-size: 90%; | |
- | + | text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); | |
+ | cursor: pointer; | ||
+ | font-weight: 400; | ||
} | } | ||
- | # | + | |
- | background: | + | |
+ | /* Wrapper Sections */ | ||
+ | .wrapper.container { | ||
+ | background: #fff; | ||
+ | padding: 30px; | ||
+ | box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); | ||
+ | margin-bottom: 30px; | ||
+ | border-radius: 2px; | ||
+ | } | ||
+ | |||
+ | .wrapper.footer { | ||
+ | background: #222; | ||
+ | padding: 30px; | ||
+ | border-radius: 2px 2px 0px 0px; | ||
+ | } | ||
+ | |||
+ | .wrapper.footer ul li a { | ||
+ | color: #999; | ||
+ | } | ||
+ | |||
+ | /* Columns */ | ||
+ | .col { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .col.quarter { | ||
+ | width: 25%; | ||
+ | } | ||
+ | |||
+ | .col.threeQuarter { | ||
+ | width: 75%; | ||
+ | } | ||
+ | |||
+ | .col.border { | ||
+ | min-height: 200px; | ||
+ | border-right: 1px solid #ddd; | ||
+ | padding-right: 30px; | ||
+ | } | ||
+ | |||
+ | .col.padding { | ||
+ | padding-left: 30px; | ||
+ | } | ||
+ | |||
+ | /* Sections */ | ||
+ | .section {<script type="text/javascript"> | ||
+ | document.getElementById('stickyContent').innerHTML = document.getElementById('main').innerHTML; | ||
+ | <!-- ie9.js (fixes all Internet Explorer browsers older than ie9) --> | ||
+ | <!--[if lt IE 9]> | ||
+ | <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> | ||
+ | <![endif]--> | ||
+ | </script> | ||
+ | padding-bottom: 15px; | ||
+ | margin-bottom: 15px; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | } | ||
+ | |||
+ | .section.last { | ||
+ | border: 0; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .section.price p { | ||
+ | text-align: center; | ||
display: block; | display: block; | ||
- | + | font-size: 120%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | /* Gallery */ | |
- | + | .section.gallery { | |
- | + | overflow: hidden; | |
- | + | padding: 0px 0px 0px 15px; | |
- | padding: | + | |
- | + | ||
- | + | ||
} | } | ||
+ | .gallery img { | ||
+ | float: left; | ||
+ | width: 33.33%; | ||
+ | padding: 0px 15px 15px 0px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* Media */ | ||
+ | @media all and (max-width: 960px) and (min-width: 800px) { | ||
+ | .wrapper { | ||
+ | width: auto; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media all and (max-width: 650px) { | ||
+ | .wrapper { | ||
+ | width: 650px; | ||
+ | } | ||
+ | } | ||
+ | |||
</style> | </style> | ||
- | + | <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" type="text/css"> | |
- | <link href="/ | + | |
</head> | </head> | ||
+ | <header> | ||
+ | <div id="main" class="duplicate"> | ||
+ | <ul class="nav"> | ||
+ | |||
+ | <li> | ||
+ | <a href="https://2013.igem.org/Team:Glendale_CC_AZ" title="Click me!"> | ||
+ | <span class="icon-stack"> | ||
+ | <i class="icon-circle icon-stack-base"></i> | ||
+ | <i class="icon-home icon-light"></i> | ||
+ | </span> | ||
+ | <span class="text">Home</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background/Overview" title="Check it out"> | ||
+ | <span class="icon-stack"> | ||
+ | <i class="icon-circle icon-stack-base"></i> | ||
+ | <i class="icon-warning-sign icon-light"></i> | ||
+ | </span> | ||
+ | <span class="text">Project</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Team/students" title="We Rock!"> | ||
+ | <span class="icon-stack"> | ||
+ | <i class="icon-circle icon-stack-base"></i> | ||
+ | <i class="icon-cogs icon-light"></i></span> | ||
+ | <span class="text">Team</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li> | ||
+ | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Notebook" title="Data Here!"> | ||
+ | <span class="icon-stack"> | ||
+ | <i class="icon-circle icon-stack-base"></i> | ||
+ | <i class="icon-book icon-light"></i> | ||
+ | </span> | ||
+ | <span class="text">Notebook</span> | ||
+ | </a> | ||
+ | </li> | ||
- | < | + | <li> |
- | + | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Attributions" title="Thank you!"> | |
- | + | <span class="icon-stack"> | |
- | + | <i class="icon-circle icon-stack-base"></i> | |
- | + | <i class="icon-pencil icon-light"></i> | |
- | + | </span> | |
- | </ | + | <span class="text">Attributions</span> |
- | </ | + | </a> |
+ | </li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | <div id="stickyContent"></div> | ||
+ | </header> | ||
+ | </html> |
Latest revision as of 01:58, 28 September 2013