Team:UT-Dallas/style-css

From 2014.igem.org

(Difference between revisions)

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