Template:Team:Technion-Israel/Technion-Israel-style.css

From 2014.igem.org

Revision as of 15:32, 3 October 2014

<style type="text/css">

@charset 'UTF-8'; @import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900');

/*********************************************************************************/ /* Basic */ /*********************************************************************************/

body, input, textarea, select { font-family: 'Source Sans Pro', sans-serif; font-weight: 400; color: #919499; }

body.is-loading * { -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; -moz-animation: none !important; -webkit-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }

h1,h2,h3,h4,h5,h6 { font-weight: 700; color: #484d55; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; }

a { text-decoration: underline; color: #717479; -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out; -o-transition: color .25s ease-in-out; -ms-transition: color .25s ease-in-out; transition: color .25s ease-in-out; }

a:hover { text-decoration: none; }

strong, b { font-weight: 700; color: #484d55; }

blockquote { border-left: solid 0.5em #ddd; padding: 1em 0 1em 2em; font-style: italic; }

em, i { font-style: italic; }

hr { border: 0; border-top: solid 1px #ddd; }

sub { position: relative; top: 0.5em; font-size: 0.8em; }

sup { position: relative; top: -0.5em; font-size: 0.8em; }

.nobr { white-space: nowrap; }

br.clear { clear: both; }

p, ul, ol, dl, table, blockquote, form { margin-bottom: 2em; }

/* Table */

table { width: 100%; }

table.default { width: 100%; }

table.default tbody tr:nth-child(2n+2) { background: #f4f4f4; }

table.default td { padding: 0.5em 1em 0.5em 1em; }

table.default th { text-align: left; font-weight: 400; padding: 0.5em 1em 0.5em 1em; }

table.default thead { background: #484d55; color: #fff; }

table.default tfoot { background: #eee; }

table.default tbody { }

/* Form */

form { }

form label { display: block; font-weight: 700; color: #484d55; }

form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea { -webkit-appearance: none; display: block; border: 0; background: #eee; box-shadow: inset 0px 0px 1px 0px #a0a1a7; border-radius: 0.35em; width: 100%; padding: 0.75em 1em 0.75em 1em; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }

form input[type="text"], form input[type="email"], form input[type="password"], form select { line-height: 1em; }

form textarea { min-height: 10em; }

form input[type="text"]:focus, form input[type="email"]:focus, form input[type="password"]:focus, form select:focus, form textarea:focus { background: #f8f8f8; }

form .formerize-placeholder { color: #555 !important; font-style: italic; }

form ::-webkit-input-placeholder { color: #555 !important; font-style: italic; line-height: 1.35em; }

form :-moz-placeholder { color: #555 !important; font-style: italic; }

form ::-moz-placeholder { color: #555 !important; font-style: italic; }

form :-ms-input-placeholder { color: #555 !important; font-style: italic; }

form ::-moz-focus-inner { border: 0; }

/* Section/Article */

section, article { margin-bottom: 3em; }

section > :last-child, article > :last-child { margin-bottom: 0; }

section:last-child, article:last-child { margin-bottom: 0; }

header.style1 { text-align: center; }

header.style1 h2 { font-weight: 700; }

header.style1 p { color: #b1b4b9; }

/* Image */

.image { display: inline-block; }

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

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

.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; }

.image.featured { display: block; width: 80%; margin: 0em 10% 1em 10%; }

/* Button */

input[type="button"], input[type="submit"], input[type="reset"], .button { display: inline-block; background: #444; text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: 0.25em; text-decoration: none; border-radius: 0.35em; border: 0; outline: 0; cursor: pointer; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }

input[type="button"].style1, input[type="submit"].style1, input[type="reset"].style1, .button.style1 { background: #e97770 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); color: #fff; }

input[type="button"].style1:hover, input[type="submit"].style1:hover, input[type="reset"].style1:hover, .button.style1:hover { background-color: #f98780; }

input[type="button"].style1:active, input[type="submit"].style1:active, input[type="reset"].style1:active, .button.style1:active { background-color: #d96760; }

input[type="button"].style2, input[type="submit"].style2, input[type="reset"].style2, .button.style2 { background: none; color: #606167; box-shadow: inset 0px 0px 2px 0px #a0a1a7; }

input[type="button"].style2:hover, input[type="submit"].style2:hover, input[type="reset"].style2:hover, .button.style2:hover { box-shadow: inset 0px 0px 2px 0px #606167; }

input[type="button"].style2:active, input[type="submit"].style2:active, input[type="reset"].style2:active, .button.style2:active { box-shadow: inset 0px 0px 2px 0px #202127; }

input[type="button"].style3, input[type="submit"].style3, input[type="reset"].style3, .button.style3 { background: #2f333b url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); color: #fff; }

input[type="button"].style3:hover, input[type="submit"].style3:hover, input[type="reset"].style3:hover, .button.style3:hover { background-color: #3f434b; }

input[type="button"].style3:active, input[type="submit"].style3:active, input[type="reset"].style3:active, .button.style3:active { background-color: #1f232b; }

/* List */

ul.default { list-style: disc; padding-left: 1em; }

ul.default li { padding-left: 0.5em; }

ul.style2 { }

ul.style2 li { border-top: solid 1px #eee; padding: 1.5em 0 0 0; margin: 1.5em 0 0 0; }

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

ul.style3 { }

ul.style3 li { border-top: solid 1px #eee; padding: 0.5em 0 0 0; margin: 0.5em 0 0 0; }

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

ol { }

ol.default { list-style: decimal; padding-left: 1.25em; }

ol.default li { padding-left: 0.25em; }

/* Feature List */

.feature-list { }

#intro-wrapper .feature-list h3 { color: #fff !important; }

#intro-wrapper .feature-list h3:before { position: relative; display: inline-block; color: #fff; background: #2f333b url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); border-radius: 1em; text-align: center; }

#features .feature-list h3 { color: #484d55 !important; }

#features .feature-list h3:before { position: relative; display: inline-block; color: #fff; background: #e04749 url('Technion-Israel-overlay.png'); border-radius: 1em; text-align: center; } /*********************************************************************************/ /* Icons */ /*********************************************************************************/

.icon { text-decoration: none; }

.icon:before { display: inline-block; font-family: FontAwesome; font-size: 1.25em; text-decoration: none; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.icon > .label { display: none; }

/*********************************************************************************/ /* Wrappers */ /*********************************************************************************/

.wrapper { position: relative; }

.wrapper .title { position: absolute; top: 0; left: 50%; text-align: center; display: block; font-weight: 900; letter-spacing: 0.25em; }

.wrapper .title:before { content: ; position: absolute; bottom: -38px; left: -35px; width: 35px; height: 38px; background: url('https://static.igem.org/mediawiki/2014/5/5f/Technion-Israel-shadow.png'); }

.wrapper .title:after { content: ; position: absolute; bottom: -38px; right: -35px; width: 35px; height: 38px; background: url('https://static.igem.org/mediawiki/2014/5/5f/Technion-Israel-shadow.png'); -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1);

   	}

.wrapper.style1 { background: #e04749 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); color: #eee; color: rgba(255,255,255,0.75); }

.wrapper.style1 .title { background: #e04749 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); color: #fff; }

.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6, .wrapper.style1 strong, .wrapper.style1 b, .wrapper.style1 a { color: #fff; }

.wrapper.style2 { background: #fff; }

.wrapper.style2 .title { background: #fff; color: #484d55; }

.wrapper.style3 { background: #f3f3f3 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); }

.wrapper.style3 .title { background: #f3f3f3 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); color: #484d55; }

.wrapper.style3 .image { border: solid 10px #fff; }

/******************Header Main***************/ #header-wrapper { background: url('https://static.igem.org/mediawiki/2014/7/71/Technion-Israel-banner.jpg') center center; background-size: cover; height: 200%; }

#header-wrapper:before { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); }

/******************Header Project***************/ #header-wrapperP { /*background: url('../images/banner.jpg') center center;*/ background-color: #e04749; background-size: cover; }

#header-wrapperP:before { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); }

#footer-wrapper { background: #282b34 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); color: #eee; color: rgba(255,255,255,0.5); }

#footer-wrapper h1, #footer-wrapper h2, #footer-wrapper h3, #footer-wrapper h4, #footer-wrapper h5, #footer-wrapper h6, #footer-wrapper strong, #footer-wrapper b, #footer-wrapper a { color: #fff; }

#footer-wrapper hr { border-top-color: #333; border-top-color: rgba(255,255,255,0.05); }

#footer-wrapper form { }

#footer-wrapper form input[type="text"], #footer-wrapper form input[type="email"], #footer-wrapper form input[type="password"], #footer-wrapper form select, #footer-wrapper form textarea { background: #ccc; box-shadow: none; }

#footer-wrapper form input[type="text"]:focus, #footer-wrapper form input[type="email"]:focus, #footer-wrapper form input[type="password"]:focus, #footer-wrapper form select:focus, #footer-wrapper form textarea:focus { background: #fff; }

#footer-wrapper input[type="button"].style2, #footer-wrapper input[type="submit"].style2, #footer-wrapper input[type="reset"].style2, #footer-wrapper .button.style2 { color: #aaa; box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,0.5); }

#footer-wrapper input[type="button"].style2:hover, #footer-wrapper input[type="submit"].style2:hover, #footer-wrapper input[type="reset"].style2:hover, #footer-wrapper .button.style2:hover { color: #ccc; box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,0.65); }

#footer-wrapper input[type="button"].style2:active, #footer-wrapper input[type="submit"].style2:active, #footer-wrapper input[type="reset"].style2:active, #footer-wrapper .button.style2:active { box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,0.75); }

#footer-wrapper .title { background: #282b34 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); color: #eee; }

#footer-wrapper header.style1 { }

#footer-wrapper header.style1 h2 { color: #fff; }

#footer-wrapper header.style1 .p { color: inherit; }

#footer-wrapper .feature-list { }

#footer-wrapper .feature-list section { border-top-color: #333; border-top-color: rgba(255,255,255,0.05); }

#footer-wrapper .feature-list h3 { }

#footer-wrapper .feature-list h3:before { background: #3d4249 url('https://static.igem.org/mediawiki/2014/7/7c/Technion-Israel-overlay.png'); }

/*********************************************************************************/ /* */ /*********************************************************************************/

# { }

# h1 { font-weight: 900; text-transform: uppercase; color: #fff; }

# p { color: #eee; color: rgba(255,255,255,0.5); text-transform: uppercase; }

/*********************************************************************************/ /* Intro */ /*********************************************************************************/

#intro { }

#intro > .style1 { }

#intro > .style2 { font-weight: 700; color: #fff; border-radius: 0.35em; box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25); }

#intro > .style2 a { color: inherit; text-decoration: none; }

#intro > .style3 { }

/*********************************************************************************/ /* Highlights */ /*********************************************************************************/

#highlights { }

#highlights .highlight { text-align: center; }

#highlights .highlight h3 { color: #e97770; }

#highlightsB .highlight { text-align: center; }

#highlightsB .highlight h3 { color: #black; }

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

#copyright { text-align: center; }

#copyright ul { display: inline-block; border-radius: 0.35em; box-shadow: inset 0px 0px 1px 1px rgba(224,71,73,0.5); color: #e04749; color: rgba(0,0,0,0.8); }

#copyright a { color: inherit; }

#copyright a:hover { color: #e04749; } </style> </html>