Team:UT-Dallas/style-css
From 2014.igem.org
(6 intermediate revisions not shown) | |||
Line 14: | Line 14: | ||
#top-section { | #top-section { | ||
- | display: | + | bottom: 0; |
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
} | } | ||
Line 1,108: | Line 1,111: | ||
div.page_content p | div.page_content p | ||
{ | { | ||
- | |||
padding-left: 220px; | padding-left: 220px; | ||
padding-right: 220px; | padding-right: 220px; | ||
- | text-align: | + | text-align: justify; |
- | + | font-size: 20px; | |
+ | } | ||
+ | div.page_content p u | ||
+ | { | ||
+ | font-size: 20px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | div.frame | ||
+ | { | ||
+ | width:136px; | ||
+ | } | ||
+ | div.frame div | ||
+ | { | ||
+ | width:135px; | ||
+ | } | ||
+ | ul.horizontal_menu li | ||
+ | { | ||
+ | display: inline; | ||
+ | list-style-type: none; | ||
+ | padding-right: 20px; | ||
} | } |
Latest revision as of 03:56, 18 October 2014
/* ==== Google font ==== */ @import url('http://fonts.googleapis.com/css?family=Lato:400,300,700,900');
/*==========================================================================
General ========================================================================== */
- contentSub {
display: none;
}
- catlinks {
display: none;
}
- top-section {
bottom: 0;
display: block; position: absolute; width: 100%;
}
- footer-box {
display: none;
}
- content {
background-color: transparent; border: 0 none; font-size: 100%; height: 100%; margin: 0; padding: 0; width: 100%;
}
body {
color: #777; background: #f7f7f7; font-size: 16px; line-height: 1.6em; font-weight: 300; text-shadow: none;
}
h1.firstHeading {
display: none;
}
/* Containers
- /
- content-wrapper, #example-wrapper {
height: 100%; } .scrollContainer { overflow-y: scroll; overflow-x: hidden; width: 100% } .scrollContainer { height: 100%; margin: auto; }
- example-wrapper .scrollContent {
height: 100%; }
.horizontal.scrollContainer { overflow-y: hidden; overflow-x: scroll; }
- example-wrapper.scrollContainer .scrollContent {
width: 100%; height: auto; }
- example-wrapper.scrollContainer.horizontal .scrollContent {
width: auto; height: 100%; }
- example-wrapper.horizontal {
white-space: nowrap; font-size: 0; /* fix for spaces between inline block divs */ }
- example-wrapper.horizontal div {
font-size: 13px; }
- example-wrapper .scrollContent, #example-wrapper.horizontal .scrollContent {
font-size: 0; }
- example-wrapper .scrollContent div {
font-size: 13px; }
- example-wrapper section {
}
section#titlechart { text-align: center; position: relative; height: 100%; min-height: 500px; min-width: 100%; background-color: #70b9b0;
} .horizontal section { display: inline-block; vertical-align: top; height: 100%; } section#titlechart #description { top: 50%; left: 50%; position: absolute; width: 600px; height: 200px; margin: -100px auto auto -300px; } section#titlechart #description h1 { margin: 0; } section#titlechart #description h2 { margin-bottom: 20px; } section#titlechart #description a.viewsource { display: block; margin-bottom: 20px; } section#titlechart #description code { background-color: #E1F1FF; padding-left: 2px; padding-right: 2px; white-space: nowrap; }
section#titlechart #description ol, section#titlechart #description p { text-align: left; max-width: 400px; margin: 10px auto 10px auto; white-space: normal; } section#titlechart #description ol { list-style-position: outside; }
- example-wrapper section#titlechart #description:after {
content: "?"; font-size: 40px; }
- example-wrapper.horizontal section#titlechart #description:after {
content: "?"; }
section.demo * {
font-size: 13px;
}
section.demo {
font-size: 0;
text-align: center;
background-image: url("../img/example_bg_v.png");
}
section.demo.fullheight {
min-height: 100%;
}
section.demo.doublewidth, .spacer.doublewidth {
min-width: 200%;
}
.horizontal section.demo {
text-align: inherit;
white-space: nowrap;
background-image: url("../img/example_bg_h.png");
}
.horizontal section.demo.fullwidth {
min-width: 100%;
}
/* Elements
- /
.spacer { text-align: center; min-height: 100px; background-image: url("../img/example_bg_spacer_v.gif"); } .spacer.s0 { min-height: 1px; } .spacer.s1 { min-height: 100px; } .spacer.s2 { min-height: 200px; } .spacer.s3 { min-height: 300px; } .spacer.s4 { min-height: 400px; } .spacer.s5 { min-height: 500px; } .spacer.s6 { min-height: 600px; } .spacer.s7 { min-height: 700px; } .spacer.s8 { min-height: 800px; } .spacer.s9 { min-height: 900px; } .spacer.s10 { min-height: 1000px; } .spacer.s_viewport { min-height: 100%; } .horizontal .spacer { background-image: url("../img/example_bg_spacer_h.gif"); margin-bottom: 0; min-height: initial; min-width: 100px; height: 100%; display: inline-block; vertical-align: top; } .horizontal .spacer.s0 { min-width: 1px; } .horizontal .spacer.s1 { min-width: 100px; } .horizontal .spacer.s2 { min-width: 200px; } .horizontal .spacer.s3 { min-width: 300px; } .horizontal .spacer.s4 { min-width: 400px; } .horizontal .spacer.s5 { min-width: 500px; } .horizontal .spacer.s6 { min-width: 600px; } .horizontal .spacer.s7 { min-width: 700px; } .horizontal .spacer.s8 { min-width: 800px; } .horizontal .spacer.s9 { min-width: 900px; } .horizontal .spacer.s10 { min-width: 1000px; } .spacer.s_viewport { min-width: 100%; }
.box1, .box2, .box3 { display: inline-block; position: relative; border-radius: 8px; text-align: center; vertical-align: middle; padding: 0 5px; } .box1 { min-width: 100px; height: 100px; margin: 0 auto 0 auto; } .box2 { min-width: 50px; height: 50px; margin: 25px auto 25px auto; } .box3 { min-width: 26px; height: 26px; margin: 37px auto 37px auto; } .horizontal .box1 { top: 50%; max-height: 100px; margin: -50px 0 auto 0; } .horizontal .box2 { top: 50%; max-height: 50px; margin: -25px 25px auto 25px; } .horizontal .box3 { top: 50%; max-height: 26px; margin: -13px 37px auto 37px; } .box1 p, .box2 p, .box3 p { margin: 5px 15px 5px 15px; font-size: 13px; font-weight: lighter; color: white; } .box1 p:first-child { margin-top: 27px; } .box1 a, .box2 a, .box3 a { color: white; } .box1.white *, .box2.white *, .box3.white * { color: #2e639e; } .box2.mario { background-color: #004fae; border-top: 30px solid #fc112f; border-bottom: 10px solid #c4723b; } .box3.goomba { min-width: 30px; height: 4px; margin-top: 75px; margin-left: 30px; margin-bottom: 25px; background-color: #b39475; border-top: 30px solid #744527; border-bottom: 6px solid #c4723b; } /* colors
- /
.box1.outline, .box2.outline, .box3.outline { border: 1px solid white; } .blue { background-color: #3883d8; } .skin { background-color: #ED9F4C; } .black { background-color: #000000; } .white { background-color: #FFFFFF; } .red { background-color: #cf3535; } .green { background-color: #00af10; } .orange { background-color: #ea6300; } /* Form
- /
form.move { text-align: left; position: fixed; top: 30px; left: 20px; display: block; background-color: white; background-color: rgba(255, 255, 255, 0.9); border-radius: 4px; padding: 20px; z-index: 20; } form > div, form > fieldset > div { margin: 10px 0 10px 0; display: block; } form .slider { min-width: 199px; display: inline-block; position: relative; height: 9px; border-right: 1px solid #2e639e; border-left: 1px solid #2e639e; vertical-align: middle; margin-right: 5px; } form .slider .trackbar { margin-top: 4px; border-top: 1px solid #2e639e; height: 4px; } form .slider .handle { height: 14px; width: 6px; position: absolute; top: -4px; margin-left: -4px; left: 0%; background-color: white; border-radius: 4px; cursor: pointer; border: 1px solid #2e639e; } form .slider .handle:hover, form .slider.dragging .handle { background-color: #79b0ee; } form .slider + input { background-color: transparent; border: none; padding: 0; } form #options label, form #actions label, form #tweenparams label { min-width: 90px; text-align: right; display: inline-block; margin-right: 10px; } form #tweenparams label { min-width: 50px; } form #options button { width: 65px; } form fieldset { padding: 0 10px 0 10px; margin: 5px 0 0 0; } form fieldset:first-child { margin-top: -5px; } form fieldset legend { padding: 0 5px 0 5px; margin: 0; }
.move { cursor: move; } .move * { cursor: auto; } .move label { cursor: default; }
/* MENU
- /
ul#menu, ul#menu ul { list-style: none; padding: 0; }
ul#menu { position: fixed; z-index: 999; width: 500px; left: 50%; margin: 10px auto auto -250px; text-align: center; }
- titlechart ul#menu {
margin-top: 40px; position: static; z-index: inherit; width: auto; left: auto; margin: 40px auto auto auto; } ul#menu > li { display: inline-block; margin: 0 5px 0 5px; position: relative; min-height: 30px; border-radius: 4px; background-color: #79b0ee; vertical-align: top; min-width: 152px; } ul#menu li a { padding: 0 5px 0 5px; display: block; text-decoration: none; line-height: 30px; color: white; text-transform: uppercase; letter-spacing: 0.05em; font-size: 15px; } ul#menu ul { display: none; }
ul#menu li:hover > a { color: #2e639e; } html.touch ul#menu li:hover > a { color: white; } html.touch ul#menu li:hover ul { display: none; } ul#menu li:hover ul, html.touch ul#menu li.open ul { display: block; width: 100%; padding: 5px 0 5px 0; border-top: 1px dashed white; } ul#menu ul li a { text-transform: none; font-size: 11px; line-height: 20px; font-weight: lighter; color: #133f71; } ul#menu ul li a:hover { background-color: #3883d8; color: white; }
.menuwrap { position: fixed; background-color: white; background-color: rgba(255, 255, 255, 0.9); min-width: 500px; left: 50%; margin-left: -250px; min-height: 51px; top: -51px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; z-index: 998; text-align: center; transition: top 0.5s; -webkit-transition: top 0.5s; /* Safari */ transition-delay: 1s; -webkit-transition-delay: 1s; /* Safari */ } .menuwrap:hover, .menuwrap.open { top: 0px; transition-delay: 0s; -webkit-transition-delay: 0s; /* Safari */ } .menuwrap ul#menu { position: absolute; } .menuwrap div.flag { top: 51px; position: absolute; width: 60px; left: inherit; left: 50%; color: #2e639e; margin-left: -30px; background-color: inherit; line-height: 20px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; font-size: 11px; text-transform: uppercase; transition: top 0.5s; -webkit-transition: top 0.5s; /* Safari */ transition-delay: 1.5s; -webkit-transition-delay: 1.5s; /* Safari */ } .menuwrap:hover div.flag, .menuwrap.open div.flag { opacity: 0; top: -20px; transition: top 0.1s; -webkit-transition: top 0.1s; /* Safari */ transition-delay: 0.5s; -webkit-transition-delay: 0.5s; /* Safari */ } html.touch .menuwrap.open div.flag { top: -50px; } html.touch .menuwrap div.flag { width: 100px; margin-left: -50px; font-size: 25px; line-height: 50px; } html.touch .menuwrap div.flag { /*opacity: 1; top: 51px;*/ } /* Codecontainer
- /
- codecontainer {
position: fixed; top: 30px; bottom: 20px; right: 20px; left: 20px; background-color: white; border-radius: 4px; z-index: 900; min-height: 300px; }
- codecontainer pre {
margin: 0; padding: 0; line-height: 16px; tab-size: 4; }
- codecontainer pre .break {
background-color: #F6F6F6; font-weight: bold; color: #aaa; }
- codecontainer pre .break:before {
content: "?" }
- codecontainer .codewrap {
position: absolute; top: 10px; bottom: 10px; width: 100%; overflow: hidden; overflow: scroll; white-space: nowrap; }
- codecontainer .code, #codecontainer .linenumbers {
min-height: 100%; }
- codecontainer .code {
padding: 0; display: inline-block; }
- codecontainer .code {
padding: 0 15px 10px 5px; }
- codecontainer .linenumbers {
float: left; padding: 0px 5px 0px 10px; color: #aaa; text-align: right; border-right: 1px solid #e5e5e5; }
- codecontainer span.indent {
width: 31px; display: inline-block; white-space: nowrap; }
- codecontainer #close.button {
position: fixed; top: 20px; right: 10px; width: 20px; height: 20px; }
- codecontainer #select.button {
position: fixed; top: 20px; right: 40px; height: 20px; padding: 0 10px 0 10px; }
- codecontainer #close.button:after {
content: "?"; }
- codecontainer .button {
background-color: white; border-radius: 10px; border: 1px solid #e5e5e5; text-align: center; cursor: pointer; color: #2e639e; }
- codecontainer .button:hover {
background-color: #3883d8; color: white; }
/* OTHER
- /
a.viewsource:after { content: " }"; } a.viewsource:before { content: "{ "; }
- parallaxContainer {
width: 900px; height: 500px; top: 30px; position: relative; }
- parallaxContainer .layer1 {
height: 100%; text-align: center; background-image: url("../img/example_parallax_l1.gif"); }
- parallaxContainer .layer2 {
background-image: url("../img/example_parallax_l2.png"); position: absolute; height: 139px; width: 100%; bottom: 32px }
- parallaxContainer .layer3 {
background-image: url("../img/example_parallax_l3.gif"); position: absolute; height: 32px; width: 100%; bottom: 0px; }
- parallaxText {
width: 0; height: 100%; margin: auto; position: relative; }
- parallaxText .layer1, #parallaxText .layer2, #parallaxText .layer3 {
position: absolute; font-size: 50px; line-height: 50px; margin-left: -150px; margin-top: -25px; width: 300px; top: 50%; left: 50%; text-align: center; color: #133f71; }
- parallaxText .layer1 {
top: 48%; }
- parallaxText .layer2 {
top: 49%; }
- parallaxText .layer3 a {
display: block; font-family: "Source Sans Pro", Arial, sans-serif; font-style: normal; font-weight: normal; }
.dynamicContent #content { width: 480px; margin: auto; text-align: left; } .dynamicContent #content .box1 { margin: 10px; }
.dynamicContent #loader { height: 0; overflow: hidden; line-height: 60px; } .dynamicContent #loader.active { height: 60px; } .dynamicContent #loader img { vertical-align: text-bottom; }
- customactions {
height: 160px; width: 170px; margin: auto; padding-top: 40px; text-align: left; }
- customactions label {
width: 100px; display: inline-block; }
- customactions code {
color: #3883d8; }
- customactions a.viewsource {
margin-top: 20px; display: block; text-align: center; } .demo.responsiveDuration { position: relative; } .responsiveDuration .box1 { top: 50%; left: 50%; position: absolute; margin-top: -50px; margin-left: -50px; }
- destroybox a {
display: block; margin-top: 20px; }
- destroybox a.disabled {
color: #79b0ee; }
- mobileadvanced {
width: 150px; height: 150px; }
- mobileadvanced p {
margin-top: 50px; }
- multiDirect {
text-align: left; }
- multiDirect .box1 {
margin: 200px auto auto 200px; }
- multiDirect .box1 p:first-child {
margin-top: 20px; }
- imagesequence {
height: 300px; }
.copyright { font-variant: italic; font-size: 11px; }
- bezier {
overflow: hidden; position: relative; }
- bezier #plane {
position: absolute; left: -100px; }
- bezier a.viewsource {
margin: 100px; display: inline-block; }
/*
Codehighlighting github.com style (c) Vasily Polovnyov <vast@whiteants.net>
- /
.hljs {
display: block; padding: 0.5em; color: #333; /*background: #f8f8f8*/
}
.hljs-comment, .hljs-template_comment, .diff .hljs-header, .hljs-javadoc {
color: #998; font-style: italic
}
.hljs-keyword, .css .rule .hljs-keyword, .hljs-winutils, .javascript .hljs-title, .nginx .hljs-title, .hljs-subst, .hljs-request, .hljs-status {
color: #333; font-weight: bold
}
.hljs-number, .hljs-hexcolor, .ruby .hljs-constant {
color: #099;
}
.hljs-string, .hljs-tag .hljs-value, .hljs-phpdoc, .tex .hljs-formula {
color: #d14
}
.hljs-title, .hljs-id, .coffeescript .hljs-params, .scss .hljs-preprocessor {
color: #900; font-weight: bold
}
.javascript .hljs-title, .lisp .hljs-title, .clojure .hljs-title, .hljs-subst {
font-weight: normal
}
.hljs-class .hljs-title, .haskell .hljs-type, .vhdl .hljs-literal, .tex .hljs-command {
color: #458; font-weight: bold
}
.hljs-tag, .hljs-tag .hljs-title, .hljs-rules .hljs-property, .django .hljs-tag .hljs-keyword {
color: #000080; font-weight: normal
}
.hljs-attribute, .hljs-variable, .lisp .hljs-body {
color: #008080
}
.hljs-regexp {
color: #009926
}
.hljs-symbol, .ruby .hljs-symbol .hljs-string, .lisp .hljs-keyword, .tex .hljs-special, .hljs-prompt {
color: #990073
}
.hljs-built_in, .lisp .hljs-title, .clojure .hljs-built_in {
color: #0086b3
}
.hljs-preprocessor, .hljs-pragma, .hljs-pi, .hljs-doctype, .hljs-shebang, .hljs-cdata {
color: #999; font-weight: bold
}
.hljs-deletion {
background: #fdd
}
.hljs-addition {
background: #dfd
}
.diff .hljs-change {
background: #0086b3
}
.hljs-chunk {
color: #aaa
}
- top_bar
{ background-color: rgba(0, 0, 0, 0.5);
border: 0px; height: 80px; top: 0px; padding-left: 20px; padding-right: 20px; text-align: left; width: 100%; z-index:5; position:absolute;
}
- bodyContent p
{
display:none;
}
- top_bar h2
{
border: 0 none; color: #ffffff; font-weight: bold; margin-bottom: 0; margin-top: -5px; text-decoration: none;
float:left; }
- top_bar h2 a
{
border: 0 none; color: #ffffff; font-weight: bold; margin-bottom: 0; text-decoration: none;
}
- top_bar h2 a:hover
{
border: 0 none; color: #ffd851; font-weight: bold; margin-bottom: 0; text-decoration: none;
}
- navlist
{ float: right;
font-size: 22px; margin-right: 20px;
}
- navlist li
{ display: inline; list-style-type: none; padding-right: 20px; }
- navlist li a
{ color:#ffffff; text-decoration: none; }
- navlist li a:hover
{ color:#ffd851; text-decoration: none; }
- project_desc
{
background-color: #ffffff; padding-left: 220px; padding-right: 220px; text-align: left;
}
- project_desc h2
{ border: 0 none;
font-size: 30px; font-weight: bold; text-align: center; text-decoration: underline;
}
- project_desc p
{
display: block;
text-align: justify; font-size: 20px; }
- team_box
{
background-color: #ffffff; padding-left: 220px; padding-right: 220px; text-align: left;
}
- team_box h2
{ border: 0 none;
font-size: 30px; font-weight: bold; text-align: center; text-decoration: underline;
}
- team_box p
{
display: block;
text-align: justify; font-size: 20px; }
- pad_td
{ padding-left:140px; } .tooltipster-content { text-align: justify; } h2.info_h2 {
color: #ffd851; border: 0 none; margin-top: -8px; margin-bottom: 10px; font-weight: bold;
} div.page_content {
background-color: #ffffff; padding-left: 220px; padding-right: 220px; text-align: left;
} div.page_content h2 { border: 0 none;
font-size: 30px; font-weight: bold; text-align: center; text-decoration: underline;
} div.page_content p {
padding-left: 220px; padding-right: 220px; text-align: justify;
font-size: 20px; } div.page_content p u { font-size: 20px; font-weight: bold; } div.frame { width:136px; } div.frame div { width:135px; } ul.horizontal_menu li { display: inline; list-style-type: none; padding-right: 20px; }