Team:Marburg/2
From 2013.igem.org
(Difference between revisions)
m |
m |
||
Line 1: | Line 1: | ||
- | |||
<html> | <html> | ||
+ | <style> | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'Luckiest Guy'; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | src: local('Luckiest Guy'), local('LuckiestGuy-Regular'), url(http://themes.googleusercontent.com/static/fonts/luckiestguy/v4/5718gH8nDy3hFVihOpkY5HhCUOGz7vYGh680lGh-uXM.woff) format('woff'); | ||
+ | } | ||
+ | |||
+ | /*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */ | ||
+ | |||
+ | /* ============================================================================= | ||
+ | HTML5 display definitions | ||
+ | ========================================================================== */ | ||
+ | |||
+ | /* | ||
+ | * Corrects block display not defined in IE6/7/8/9 & FF3 | ||
+ | */ | ||
+ | |||
+ | article, | ||
+ | aside, | ||
+ | details, | ||
+ | figcaption, | ||
+ | figure, | ||
+ | footer, | ||
+ | header, | ||
+ | hgroup, | ||
+ | nav, | ||
+ | section { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Corrects inline-block display not defined in IE6/7/8/9 & FF3 | ||
+ | */ | ||
+ | |||
+ | audio, | ||
+ | canvas, | ||
+ | video { | ||
+ | display: inline-block; | ||
+ | *display: inline; | ||
+ | *zoom: 1; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Prevents modern browsers from displaying 'audio' without controls | ||
+ | */ | ||
+ | |||
+ | audio:not([controls]) { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 | ||
+ | * Known issue: no IE6 support | ||
+ | */ | ||
+ | |||
+ | [hidden] { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Base | ||
+ | ========================================================================== */ | ||
+ | |||
+ | /* | ||
+ | * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units | ||
+ | * http://clagnut.com/blog/348/#c790 | ||
+ | * 2. Keeps page centred in all browsers regardless of content height | ||
+ | * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom | ||
+ | * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ | ||
+ | */ | ||
+ | |||
+ | html { | ||
+ | font-size: 100%; /* 1 */ | ||
+ | overflow-y: scroll; /* 2 */ | ||
+ | -webkit-text-size-adjust: 100%; /* 3 */ | ||
+ | -ms-text-size-adjust: 100%; /* 3 */ | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Addresses margins handled incorrectly in IE6/7 | ||
+ | */ | ||
+ | |||
+ | body { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Addresses font-family inconsistency between 'textarea' and other form elements. | ||
+ | */ | ||
+ | |||
+ | body, | ||
+ | button, | ||
+ | input, | ||
+ | select, | ||
+ | textarea { | ||
+ | font-family: sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Links | ||
+ | ========================================================================== */ | ||
+ | |||
+ | a { | ||
+ | color: #00e; | ||
+ | } | ||
+ | |||
+ | a:visited { | ||
+ | color: #551a8b; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Addresses outline displayed oddly in Chrome | ||
+ | */ | ||
+ | |||
+ | a:focus { | ||
+ | outline: 0; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Improves readability when focused and also mouse hovered in all browsers | ||
+ | * people.opera.com/patrickl/experiments/keyboard/test | ||
+ | */ | ||
+ | |||
+ | a:hover, | ||
+ | a:active { | ||
+ | outline: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Typography | ||
+ | ========================================================================== */ | ||
+ | |||
+ | /* | ||
+ | * Addresses styling not present in IE7/8/9, S5, Chrome | ||
+ | */ | ||
+ | |||
+ | abbr[title] { | ||
+ | border-bottom: 1px dotted; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome | ||
+ | */ | ||
+ | |||
+ | b, | ||
+ | strong { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | blockquote { | ||
+ | margin: 1em 40px; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Addresses styling not present in S5, Chrome | ||
+ | */ | ||
+ | |||
+ | dfn { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Addresses styling not present in IE6/7/8/9 | ||
+ | */ | ||
+ | |||
+ | mark { | ||
+ | background: #ff0; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Corrects font family set oddly in IE6, S4/5, Chrome | ||
+ | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 | ||
+ | */ | ||
+ | |||
+ | pre, | ||
+ | code, | ||
+ | kbd, | ||
+ | samp { | ||
+ | font-family: monospace, serif; | ||
+ | _font-family: 'courier new', monospace; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Improves readability of pre-formatted text in all browsers | ||
+ | */ | ||
+ | |||
+ | pre { | ||
+ | white-space: pre; | ||
+ | white-space: pre-wrap; | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Addresses CSS quotes not supported in IE6/7 | ||
+ | * 2. Addresses quote property not supported in S4 | ||
+ | */ | ||
+ | |||
+ | /* 1 */ | ||
+ | |||
+ | q { | ||
+ | quotes: none; | ||
+ | } | ||
+ | |||
+ | /* 2 */ | ||
+ | |||
+ | q:before, | ||
+ | q:after { | ||
+ | content: ''; | ||
+ | content: none; | ||
+ | } | ||
+ | |||
+ | small { | ||
+ | font-size: 75%; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Prevents sub and sup affecting line-height in all browsers | ||
+ | * gist.github.com/413930 | ||
+ | */ | ||
+ | |||
+ | sub, | ||
+ | sup { | ||
+ | font-size: 75%; | ||
+ | line-height: 0; | ||
+ | position: relative; | ||
+ | vertical-align: baseline; | ||
+ | } | ||
+ | |||
+ | sup { | ||
+ | top: -0.5em; | ||
+ | } | ||
+ | |||
+ | sub { | ||
+ | bottom: -0.25em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Lists | ||
+ | ========================================================================== */ | ||
+ | |||
+ | ul, | ||
+ | ol { | ||
+ | margin: 1em 0; | ||
+ | padding: 0 0 0 40px; | ||
+ | } | ||
+ | |||
+ | dd { | ||
+ | margin: 0 0 0 40px; | ||
+ | } | ||
+ | |||
+ | nav ul, | ||
+ | nav ol { | ||
+ | list-style: none; | ||
+ | list-style-image: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Embedded content | ||
+ | ========================================================================== */ | ||
+ | |||
+ | /* | ||
+ | * 1. Removes border when inside 'a' element in IE6/7/8/9, F3 | ||
+ | * 2. Improves image quality when scaled in IE7 | ||
+ | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ | ||
+ | */ | ||
+ | |||
+ | img { | ||
+ | border: 0; /* 1 */ | ||
+ | -ms-interpolation-mode: bicubic; /* 2 */ | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Corrects overflow displayed oddly in IE9 | ||
+ | */ | ||
+ | |||
+ | svg:not(:root) { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Figures | ||
+ | ========================================================================== */ | ||
+ | |||
+ | /* | ||
+ | * Addresses margin not present in IE6/7/8/9, S5, O11 | ||
+ | */ | ||
+ | |||
+ | figure { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Forms | ||
+ | ========================================================================== */ | ||
+ | |||
+ | /* | ||
+ | * Corrects margin displayed oddly in IE6/7 | ||
+ | */ | ||
+ | |||
+ | form { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Define consistent margin and padding | ||
+ | */ | ||
+ | |||
+ | fieldset { | ||
+ | margin: 0 2px; | ||
+ | padding: 0.35em 0.625em 0.75em; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Corrects color not being inherited in IE6/7/8/9 | ||
+ | * 2. Corrects alignment displayed oddly in IE6/7 | ||
+ | */ | ||
+ | |||
+ | legend { | ||
+ | border: 0; /* 1 */ | ||
+ | *margin-left: -7px; /* 2 */ | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Corrects font size not being inherited in all browsers | ||
+ | * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome | ||
+ | * 3. Improves appearance and consistency in all browsers | ||
+ | */ | ||
+ | |||
+ | button, | ||
+ | input, | ||
+ | select, | ||
+ | textarea { | ||
+ | font-size: 100%; /* 1 */ | ||
+ | margin: 0; /* 2 */ | ||
+ | vertical-align: baseline; /* 3 */ | ||
+ | *vertical-align: middle; /* 3 */ | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet | ||
+ | * 2. Corrects inner spacing displayed oddly in IE6/7 | ||
+ | */ | ||
+ | |||
+ | button, | ||
+ | input { | ||
+ | line-height: normal; /* 1 */ | ||
+ | *overflow: visible; /* 2 */ | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Corrects overlap and whitespace issue for buttons and inputs in IE6/7 | ||
+ | * Known issue: reintroduces inner spacing | ||
+ | */ | ||
+ | |||
+ | table button, | ||
+ | table input { | ||
+ | *overflow: auto; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Improves usability and consistency of cursor style between image-type 'input' and others | ||
+ | * 2. Corrects inability to style clickable 'input' types in iOS | ||
+ | */ | ||
+ | |||
+ | button, | ||
+ | html input[type="button"], | ||
+ | input[type="reset"], | ||
+ | input[type="submit"] { | ||
+ | cursor: pointer; /* 1 */ | ||
+ | -webkit-appearance: button; /* 2 */ | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Addresses box sizing set to content-box in IE8/9 | ||
+ | * 2. Addresses excess padding in IE8/9 | ||
+ | */ | ||
+ | |||
+ | input[type="checkbox"], | ||
+ | input[type="radio"] { | ||
+ | box-sizing: border-box; /* 1 */ | ||
+ | padding: 0; /* 2 */ | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Addresses appearance set to searchfield in S5, Chrome | ||
+ | * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) | ||
+ | */ | ||
+ | |||
+ | input[type="search"] { | ||
+ | -webkit-appearance: textfield; /* 1 */ | ||
+ | -moz-box-sizing: content-box; | ||
+ | -webkit-box-sizing: content-box; /* 2 */ | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Corrects inner padding displayed oddly in S5, Chrome on OSX | ||
+ | */ | ||
+ | |||
+ | input[type="search"]::-webkit-search-decoration { | ||
+ | -webkit-appearance: none; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Corrects inner padding and border displayed oddly in FF3/4 | ||
+ | * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ | ||
+ | */ | ||
+ | |||
+ | button::-moz-focus-inner, | ||
+ | input::-moz-focus-inner { | ||
+ | border: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 1. Removes default vertical scrollbar in IE6/7/8/9 | ||
+ | * 2. Improves readability and alignment in all browsers | ||
+ | */ | ||
+ | |||
+ | textarea { | ||
+ | overflow: auto; /* 1 */ | ||
+ | vertical-align: top; /* 2 */ | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ============================================================================= | ||
+ | Tables | ||
+ | ========================================================================== */ | ||
+ | |||
+ | /* | ||
+ | * Remove most spacing between table cells | ||
+ | */ | ||
+ | |||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | } | ||
+ | |||
+ | .clearfix:before,.clearfix:after{content:" ";display:table;} | ||
+ | .clearfix:after{clear:both;} | ||
+ | .clearfix{zoom:1;} | ||
+ | |||
+ | /* | ||
+ | COLORS | ||
+ | |||
+ | Dark Blue #222438 | ||
+ | Medium Blue #69697A | ||
+ | Light Blue #C5C3DE | ||
+ | Yellow #FFB000 | ||
+ | Red #D92B00 | ||
+ | |||
+ | */ | ||
+ | |||
+ | body { | ||
+ | background: #222438; | ||
+ | font-family: Georgia, Times New Roman, Times, serif; | ||
+ | font-weight: bold; | ||
+ | font-size: 20px; | ||
+ | text-align: center; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .simple-demo, .mobile-demo { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | .simple-demo #content-wrapper { | ||
+ | height: 1600px; | ||
+ | padding-top: 400px; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: 120px; | ||
+ | font-weight: normal; | ||
+ | margin: 0; | ||
+ | font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif; | ||
+ | text-transform: uppercase; | ||
+ | color: #FFB000; | ||
+ | text-shadow: 0 2px 1px #000; | ||
+ | line-height: .8; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 150px; | ||
+ | font-weight: normal; | ||
+ | margin: 0; | ||
+ | color: #FFB000; | ||
+ | padding: 60px; | ||
+ | text-shadow: 0 2px 1px #000; | ||
+ | font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | h3 { | ||
+ | font-size: 60px; | ||
+ | font-weight: normal; | ||
+ | margin: 0; | ||
+ | color: #FFB000; | ||
+ | text-shadow: 0 2px 1px #000; | ||
+ | font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | p { width: 80%; margin: 20px auto; text-shadow: 0 2px 1px #000; color: #C5C3DE; } | ||
+ | a, a:visited { color: #D92B00; font-weight: bold; font-style: italic; } | ||
+ | ul { list-style: none; } | ||
+ | |||
+ | figcaption { text-shadow: 0 2px 1px #000; color: #C5C3DE; } | ||
+ | |||
+ | .download { padding: 10px; } | ||
+ | |||
+ | pre { font-size: 15px; } | ||
+ | code { font-style: normal; } | ||
+ | blockquote { | ||
+ | text-align: left; | ||
+ | width: 720px; | ||
+ | margin: 10px auto; | ||
+ | background: #C5C3DE; | ||
+ | border: solid 2px #69697A; | ||
+ | padding: 0 40px; | ||
+ | } | ||
+ | |||
+ | #console { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 15px; | ||
+ | width: 500px; | ||
+ | margin: 0; | ||
+ | font-size: 14px; | ||
+ | font-style: italic; | ||
+ | background-color: #69697A; | ||
+ | text-shadow: none; | ||
+ | text-align: left; | ||
+ | padding: 3px 10px; | ||
+ | border-radius: 0 0 10px 10px; | ||
+ | z-index: 99; | ||
+ | opacity: .8; | ||
+ | } | ||
+ | |||
+ | #title { | ||
+ | overflow: hidden; | ||
+ | font-size: 180px; | ||
+ | margin: 0 auto -580px; | ||
+ | width: 100%; | ||
+ | height: 1000px; | ||
+ | position: relative; | ||
+ | padding-top: 30px; | ||
+ | z-index: 99; | ||
+ | } | ||
+ | |||
+ | .title-line { position: relative; display: block; margin: auto; width: 300%; left: -100%; } | ||
+ | #title-line2 { top: -60px; } | ||
+ | #title-line3 { top: -120px; } | ||
+ | .title-line span { display: inline-block; line-height: 1.1; position: relative; } | ||
+ | .twitter-follow-button { position: relative; top: 8px; left: 4px; } | ||
+ | #title-info { position: relative; z-index:99998; margin-top: 40px; opacity: 0; } | ||
+ | |||
+ | .credit { | ||
+ | font-size: 20px; | ||
+ | margin: 10px auto; | ||
+ | text-align: center; | ||
+ | font-style: italic; | ||
+ | color: #D92B00; | ||
+ | z-index:100; | ||
+ | } | ||
+ | |||
+ | #download { | ||
+ | position: relative; | ||
+ | margin: 50px auto; | ||
+ | font-size: 18px; | ||
+ | width: 100%; | ||
+ | line-height: 1.8; | ||
+ | z-index: 99999; | ||
+ | } | ||
+ | #hire { margin-bottom: 80px; } | ||
+ | |||
+ | #download a { color: #69697A; } | ||
+ | |||
+ | #examples-1 { overflow: hidden; } | ||
+ | #fly-it { position: relative; } | ||
+ | #scale-it { width: 500%; margin: 0px -200%; padding: 0; } | ||
+ | |||
+ | #examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; } | ||
+ | .pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; } | ||
+ | .pin-frame h2 { margin-top: 120px; } | ||
+ | #pin-frame-slide { background: #D92B00; margin-left:-100%; } | ||
+ | #pin-frame-wipe { background: #FFB000; top:100%; } | ||
+ | #pin-frame-wipe h2 { color: #D92B00; } | ||
+ | #pin-frame-bounce { background: #222438; } | ||
+ | #pin-frame-color { background: #222438; } | ||
+ | #pin-frame-unpin { top:100%; } | ||
+ | |||
+ | #examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; } | ||
+ | #fling-it, #move-it { position: relative; } | ||
+ | #examples-parallax { | ||
+ | padding-top: 200px; | ||
+ | height: 800px; | ||
+ | margin-bottom: -600px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #parallax-it { | ||
+ | padding: 0; | ||
+ | font-size: 80px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #parallax-it-left { | ||
+ | position: relative; | ||
+ | font-size: 120px; | ||
+ | left: -160px; | ||
+ | color: #C5C3DE; | ||
+ | opacity: 0.5; | ||
+ | -moz-opacity: 0.5; | ||
+ | filter:alpha(opacity=5); | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #parallax-it-right { | ||
+ | position: relative; | ||
+ | font-size: 160px; | ||
+ | left: 80px; | ||
+ | color: #C5C3DE; | ||
+ | opacity: 0.25; | ||
+ | -moz-opacity: 0.25; | ||
+ | filter:alpha(opacity=2.5); | ||
+ | overflow: hidden; | ||
+ | width: 900px; | ||
+ | } | ||
+ | |||
+ | #showcase { padding: 60px 0; } | ||
+ | .gallery { width: 960px; margin: 0 auto; text-align: center; } | ||
+ | .gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; } | ||
+ | |||
+ | #howtouse { padding-top: 200px; } | ||
+ | |||
+ | .divider { font-size: 14px; padding-top: 20px; } | ||
+ | |||
+ | .disclaimer { | ||
+ | font-size: 18px; | ||
+ | font-style: italic; | ||
+ | font-weight: normal; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | #instructions { padding-top: 40px; } | ||
+ | |||
+ | #instructions p { margin: 0px auto 20px; } | ||
+ | |||
+ | #instructions-animation { padding-top: 40px; } | ||
+ | |||
+ | #instructions .documentation { | ||
+ | font-size: 16px; | ||
+ | text-align: left; | ||
+ | width: 720px; | ||
+ | margin: 10px auto 30px; | ||
+ | padding: 20px 40px; | ||
+ | text-shadow: none; | ||
+ | border: solid 1px #69697A; | ||
+ | color:#C5C3DE; | ||
+ | } | ||
+ | |||
+ | #instructions .param-list { | ||
+ | font-size: 18px; | ||
+ | line-height: 1.4; | ||
+ | padding: 0 18px; | ||
+ | margin: 1em 0 0; | ||
+ | } | ||
+ | |||
+ | #instructions .param-list-sub { | ||
+ | padding-left: 36px; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | #instructions .param-list li { | ||
+ | font-weight: normal; | ||
+ | padding-bottom: 20px; | ||
+ | text-shadow: 0 2px 1px #000; | ||
+ | } | ||
+ | .param { | ||
+ | font-style:italic; | ||
+ | } | ||
+ | |||
+ | .param-list small { | ||
+ | display: block; | ||
+ | font-weight: normal; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | #credits { padding: 80px 0; } | ||
+ | |||
+ | /* mobile demo */ | ||
+ | |||
+ | .mobile-demo #fade-it { | ||
+ | margin: 400px 0 500px 0; | ||
+ | } | ||
+ | .mobile-demo #examples-1 { | ||
+ | margin-bottom: 200px; | ||
+ | } | ||
+ | .mobile-demo #instructions { | ||
+ | width: 800px; | ||
+ | text-align: left; | ||
+ | margin: auto; | ||
+ | } | ||
+ | .mobile-demo ul { | ||
+ | list-style: disc; | ||
+ | color:#FFFFFF; | ||
+ | margin: 20px 80px 100px 80px; | ||
+ | } | ||
+ | .mobile-demo #content-wrapper { | ||
+ | margin-bottom: 100px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .mobile-demo h2 { | ||
+ | width: 90%; | ||
+ | } | ||
+ | .mobile-demo h3 { | ||
+ | color:#C5C3DE; | ||
+ | } | ||
+ | |||
+ | #newversion { | ||
+ | position: absolute; | ||
+ | top: 230px; | ||
+ | left: 50%; | ||
+ | margin-left: 250px; | ||
+ | z-index: 100; | ||
+ | background-color: #D92B00; | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border-radius: 100px; | ||
+ | box-shadow: 0 2px 1px #000; | ||
+ | } | ||
+ | #newversion h2 { | ||
+ | font-size: 43px; | ||
+ | margin: 0; | ||
+ | padding: 30px 0px 0px 0px; | ||
+ | color: #FFFFFF; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | #newversion a { | ||
+ | text-decoration: none; | ||
+ | padding: 0px 20px 20px 20px; | ||
+ | display: block; | ||
+ | font-size: 18px; | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | #newversion a:hover span { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
<div class="simple-demo"> | <div class="simple-demo"> | ||
<div id="content-wrapper"> | <div id="content-wrapper"> |
Revision as of 11:08, 9 March 2014