/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for `hidden` attribute not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* * 1. Sets default font family to sans-serif. * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * Removes default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, * Safari 5, and Chrome. */ h1 { font-size: 2em; } /* * Addresses styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /* * Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* * Addresses styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /* * Corrects font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /* * Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * Sets consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* * Addresses inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /* * Removes border when inside `a` element in IE 8/9. */ img { border: 0; } /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * Addresses margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. Corrects color not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /* * 1. Corrects font family not being inherited in all browsers. * 2. Corrects font size not being inherited in all browsers. * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /* * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /* * Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to `content-box` in IE 8/9. * 2. Removes excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and 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; } /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Removes default vertical scrollbar in IE 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; } /* === Editor === */ .etch-editor-panel { display: none; padding: 5px; position: absolute; z-index: 10000; background: #dadada; border: 1px solid #bdbdbd; color: #535353; text-shadow: 0 1px 0 #fff; background-image: -moz-linear-gradient(center bottom, #ccc 0%, #ddd 100%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#ccc)); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 1px 0 0 #dfdfdf, inset 0 1px 0 #dfdfdf, inset -1px 0 0 #dfdfdf, inset 0 -1px 0 #dfdfdf, 0 0 5px rgba(0,0,0,.3); } .etch-editor-button { display: block; float: left; margin-right: 3px; position: relative; text-decoration: none; display: block; width: 27px; height: 27px; background: #dadada; border: 1px solid #aaa; color: #535353; text-shadow: 0 1px 0 #fff; background: -moz-linear-gradient(center bottom, #e1e1e1 0%, #efefef 100%); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fFfFfF), to(#f1f1f1)); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .etch-editor-button:last-child { margin-right: 0; } .etch-editor-button:hover { background: #fff; border-color: #999; } .etch-editor-button span:active { box-shadow: inset 0 0 15px rgba(0,0,0,.5); border-color: #999; } .etch-editor-button span, .etch-editor-button span { background: url('../images/editor_icons.png') no-repeat; display: block; height: 100%; width: 100%; } .etch-editor-panel .etch-bold span { background-position: 0 0; } .etch-editor-panel .etch-italic span { background-position: -30px 0; } .etch-editor-panel .etch-underline span { background-position: -60px 0; } .etch-editor-panel .etch-unordered-list span { background-position: -90px 0; } .etch-editor-panel .etch-ordered-list span { background-position: -120px 0; } .etch-editor-panel .etch-image span { background-position: -150px 0; } .etch-editor-panel .etch-link span { background-position: -180px 0; } .etch-editor-panel .etch-save span { background-position: -210px 0; } .etch-editor-panel .etch-justify-left span { background-position: -240px 0; } .etch-editor-panel .etch-justify-center span { background-position: -270px 0; } .etch-editor-panel .etch-justify-right span { background-position: -300px 0; } .etch-editor-panel .etch-cite span { background-position: -330px 0; } .etch-editor-panel .etch-heading span { background-position: -360px 0; } .etch-editor-panel .etch-clear-formatting span { background-position: -390px 0; } newebe/newebe/static/css/fileuploader.css at master · gelnior/newebe · GitHub
GitHub GitHub
Sign up for free Sign in

public / newebe

branch: master
Switch branches/tags
development
feature/package-debian
gh-pages
master
mike-perdide/packaging
refactoring/ui
Nothing to show
newebe / newebe / static / css / fileuploader.css
[BIG] Reordering the file tree.

1 contributor

file 36 lines (30 sloc) 1.372 kb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.qq-uploader { position:relative; width: 100%;}

.qq-upload-button {
    display:block; /* or inline-block */
    width: 100%; padding: 7px 0; text-align:center;    
    background: black; border-bottom:1px solid #ddd;color:#fff;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 26px;
    margin-bottom: 20px;
}
.qq-upload-button-hover {background:#DDEEFF; color: black; }
.qq-upload-button-focus {outline:1px dotted black;}

.qq-upload-drop-area {
    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
    background:#FF9797; text-align:center; 
}
.qq-upload-drop-area span {
    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
}
.qq-upload-drop-area-active {background:#FF7171;}

.qq-upload-list { display: none; margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
    margin-right: 7px;
}

.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("/static/images/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:11px;}

.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}

Markdown Cheat Sheet

Format Text

Headers

# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag

Text styles

*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__

*You **can** combine them*

Lists

Unordered

* Item 1
* Item 2
  * Item 2a
  * Item 2b

Ordered

1. Item 1
2. Item 2
3. Item 3
   * Item 3a
   * Item 3b

Miscellaneous

Images

![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)

Links

http://github.com - automatic!
[GitHub](http://github.com)

Blockquotes

As Kanye West said:

> We're living the future so
> the present is our past.

Code Examples in Markdown

Syntax highlighting with GFM

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```

Or, indent your code 4 spaces

Here is a Python code example
without syntax highlighting:

    def foo:
      if not bar:
        return true

Inline code for comments

I think you should use an
`<addr>` element here instead.
Something went wrong with that request. Please try again.
/* Font Awesome the iconic font designed for use with Twitter Bootstrap ------------------------------------------------------- The full suite of pictographic icons, examples, and documentation can be found at: http://fortawesome.github.com/Font-Awesome/ License ------------------------------------------------------- The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0: http://creativecommons.org/licenses/by/3.0/ A mention of 'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable source code is considered acceptable attribution (most common on the web). If human readable source code is not available to the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or mobile software). Contact ------------------------------------------------------- Email: dave@davegandy.com Twitter: http://twitter.com/fortaweso_me Work: http://lemonwi.se co-founder */ @font-face { font-family: "FontAwesome"; src: url('../fonts/fontawesome/fontawesome-webfont.eot'); src: url('../fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('../fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } /* Font Awesome styles ------------------------------------------------------- */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style: normal; display: inline-block; text-decoration: inherit; } a [class^="icon-"], a [class*=" icon-"] { display: inline-block; text-decoration: inherit; } /* makes the font 33% larger relative to the icon container */ .icon-large:before { vertical-align: top; font-size: 1.3333333333333333em; } .btn [class^="icon-"], .btn [class*=" icon-"] { /* keeps button heights with and without icons the same */ line-height: .9em; } li [class^="icon-"], li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; } li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] { /* 1.5 increased font size for icon-large * 1.25 width */ width: 1.875em; } li[class^="icon-"], li[class*=" icon-"] { margin-left: 0; list-style-type: none; } li[class^="icon-"]:before, li[class*=" icon-"]:before { text-indent: -2em; text-align: center; } li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before { text-indent: -1.3333333333333333em; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } .icon-search:before { content: "\f002"; } .icon-envelope:before { content: "\f003"; } .icon-heart:before { content: "\f004"; } .icon-star:before { content: "\f005"; } .icon-star-empty:before { content: "\f006"; } .icon-user:before { content: "\f007"; } .icon-film:before { content: "\f008"; } .icon-th-large:before { content: "\f009"; } .icon-th:before { content: "\f00a"; } .icon-th-list:before { content: "\f00b"; } .icon-ok:before { content: "\f00c"; } .icon-remove:before { content: "\f00d"; } .icon-zoom-in:before { content: "\f00e"; } .icon-zoom-out:before { content: "\f010"; } .icon-off:before { content: "\f011"; } .icon-signal:before { content: "\f012"; } .icon-cog:before { content: "\f013"; } .icon-trash:before { content: "\f014"; } .icon-home:before { content: "\f015"; } .icon-file:before { content: "\f016"; } .icon-time:before { content: "\f017"; } .icon-road:before { content: "\f018"; } .icon-download-alt:before { content: "\f019"; } .icon-download:before { content: "\f01a"; } .icon-upload:before { content: "\f01b"; } .icon-inbox:before { content: "\f01c"; } .icon-play-circle:before { content: "\f01d"; } .icon-repeat:before { content: "\f01e"; } /* \f020 doesn't work in Safari. all shifted one down */ .icon-refresh:before { content: "\f021"; } .icon-list-alt:before { content: "\f022"; } .icon-lock:before { content: "\f023"; } .icon-flag:before { content: "\f024"; } .icon-headphones:before { content: "\f025"; } .icon-volume-off:before { content: "\f026"; } .icon-volume-down:before { content: "\f027"; } .icon-volume-up:before { content: "\f028"; } .icon-qrcode:before { content: "\f029"; } .icon-barcode:before { content: "\f02a"; } .icon-tag:before { content: "\f02b"; } .icon-tags:before { content: "\f02c"; } .icon-book:before { content: "\f02d"; } .icon-bookmark:before { content: "\f02e"; } .icon-print:before { content: "\f02f"; } .icon-camera:before { content: "\f030"; } .icon-font:before { content: "\f031"; } .icon-bold:before { content: "\f032"; } .icon-italic:before { content: "\f033"; } .icon-text-height:before { content: "\f034"; } .icon-text-width:before { content: "\f035"; } .icon-align-left:before { content: "\f036"; } .icon-align-center:before { content: "\f037"; } .icon-align-right:before { content: "\f038"; } .icon-align-justify:before { content: "\f039"; } .icon-list:before { content: "\f03a"; } .icon-indent-left:before { content: "\f03b"; } .icon-indent-right:before { content: "\f03c"; } .icon-facetime-video:before { content: "\f03d"; } .icon-picture:before { content: "\f03e"; } .icon-pencil:before { content: "\f040"; } .icon-map-marker:before { content: "\f041"; } .icon-adjust:before { content: "\f042"; } .icon-tint:before { content: "\f043"; } .icon-edit:before { content: "\f044"; } .icon-share:before { content: "\f045"; } .icon-check:before { content: "\f046"; } .icon-move:before { content: "\f047"; } .icon-step-backward:before { content: "\f048"; } .icon-fast-backward:before { content: "\f049"; } .icon-backward:before { content: "\f04a"; } .icon-play:before { content: "\f04b"; } .icon-pause:before { content: "\f04c"; } .icon-stop:before { content: "\f04d"; } .icon-forward:before { content: "\f04e"; } .icon-fast-forward:before { content: "\f050"; } .icon-step-forward:before { content: "\f051"; } .icon-eject:before { content: "\f052"; } .icon-chevron-left:before { content: "\f053"; } .icon-chevron-right:before { content: "\f054"; } .icon-plus-sign:before { content: "\f055"; } .icon-minus-sign:before { content: "\f056"; } .icon-remove-sign:before { content: "\f057"; } .icon-ok-sign:before { content: "\f058"; } .icon-question-sign:before { content: "\f059"; } .icon-info-sign:before { content: "\f05a"; } .icon-screenshot:before { content: "\f05b"; } .icon-remove-circle:before { content: "\f05c"; } .icon-ok-circle:before { content: "\f05d"; } .icon-ban-circle:before { content: "\f05e"; } .icon-arrow-left:before { content: "\f060"; } .icon-arrow-right:before { content: "\f061"; } .icon-arrow-up:before { content: "\f062"; } .icon-arrow-down:before { content: "\f063"; } .icon-share-alt:before { content: "\f064"; } .icon-resize-full:before { content: "\f065"; } .icon-resize-small:before { content: "\f066"; } .icon-plus:before { content: "\f067"; } .icon-minus:before { content: "\f068"; } .icon-asterisk:before { content: "\f069"; } .icon-exclamation-sign:before { content: "\f06a"; } .icon-gift:before { content: "\f06b"; } .icon-leaf:before { content: "\f06c"; } .icon-fire:before { content: "\f06d"; } .icon-eye-open:before { content: "\f06e"; } .icon-eye-close:before { content: "\f070"; } .icon-warning-sign:before { content: "\f071"; } .icon-plane:before { content: "\f072"; } .icon-calendar:before { content: "\f073"; } .icon-random:before { content: "\f074"; } .icon-comment:before { content: "\f075"; } .icon-magnet:before { content: "\f076"; } .icon-chevron-up:before { content: "\f077"; } .icon-chevron-down:before { content: "\f078"; } .icon-retweet:before { content: "\f079"; } .icon-shopping-cart:before { content: "\f07a"; } .icon-folder-close:before { content: "\f07b"; } .icon-folder-open:before { content: "\f07c"; } .icon-resize-vertical:before { content: "\f07d"; } .icon-resize-horizontal:before { content: "\f07e"; } .icon-bar-chart:before { content: "\f080"; } .icon-twitter-sign:before { content: "\f081"; } .icon-facebook-sign:before { content: "\f082"; } .icon-camera-retro:before { content: "\f083"; } .icon-key:before { content: "\f084"; } .icon-cogs:before { content: "\f085"; } .icon-comments:before { content: "\f086"; } .icon-thumbs-up:before { content: "\f087"; } .icon-thumbs-down:before { content: "\f088"; } .icon-star-half:before { content: "\f089"; } .icon-heart-empty:before { content: "\f08a"; } .icon-signout:before { content: "\f08b"; } .icon-linkedin-sign:before { content: "\f08c"; } .icon-pushpin:before { content: "\f08d"; } .icon-external-link:before { content: "\f08e"; } .icon-signin:before { content: "\f090"; } .icon-trophy:before { content: "\f091"; } .icon-github-sign:before { content: "\f092"; } .icon-upload-alt:before { content: "\f093"; } .icon-lemon:before { content: "\f094"; } .icon-phone:before { content: "\f095"; } .icon-check-empty:before { content: "\f096"; } .icon-bookmark-empty:before { content: "\f097"; } .icon-phone-sign:before { content: "\f098"; } .icon-twitter:before { content: "\f099"; } .icon-facebook:before { content: "\f09a"; } .icon-github:before { content: "\f09b"; } .icon-unlock:before { content: "\f09c"; } .icon-credit-card:before { content: "\f09d"; } .icon-rss:before { content: "\f09e"; } .icon-hdd:before { content: "\f0a0"; } .icon-bullhorn:before { content: "\f0a1"; } .icon-bell:before { content: "\f0a2"; } .icon-certificate:before { content: "\f0a3"; } .icon-hand-right:before { content: "\f0a4"; } .icon-hand-left:before { content: "\f0a5"; } .icon-hand-up:before { content: "\f0a6"; } .icon-hand-down:before { content: "\f0a7"; } .icon-circle-arrow-left:before { content: "\f0a8"; } .icon-circle-arrow-right:before { content: "\f0a9"; } .icon-circle-arrow-up:before { content: "\f0aa"; } .icon-circle-arrow-down:before { content: "\f0ab"; } .icon-globe:before { content: "\f0ac"; } .icon-wrench:before { content: "\f0ad"; } .icon-tasks:before { content: "\f0ae"; } .icon-filter:before { content: "\f0b0"; } .icon-briefcase:before { content: "\f0b1"; } .icon-fullscreen:before { content: "\f0b2"; } .icon-group:before { content: "\f0c0"; } .icon-link:before { content: "\f0c1"; } .icon-cloud:before { content: "\f0c2"; } .icon-beaker:before { content: "\f0c3"; } .icon-cut:before { content: "\f0c4"; } .icon-copy:before { content: "\f0c5"; } .icon-paper-clip:before { content: "\f0c6"; } .icon-save:before { content: "\f0c7"; } .icon-sign-blank:before { content: "\f0c8"; } .icon-reorder:before { content: "\f0c9"; } .icon-list-ul:before { content: "\f0ca"; } .icon-list-ol:before { content: "\f0cb"; } .icon-strikethrough:before { content: "\f0cc"; } .icon-underline:before { content: "\f0cd"; } .icon-table:before { content: "\f0ce"; } .icon-magic:before { content: "\f0d0"; } .icon-truck:before { content: "\f0d1"; } .icon-pinterest:before { content: "\f0d2"; } .icon-pinterest-sign:before { content: "\f0d3"; } .icon-google-plus-sign:before { content: "\f0d4"; } .icon-google-plus:before { content: "\f0d5"; } .icon-money:before { content: "\f0d6"; } .icon-caret-down:before { content: "\f0d7"; } .icon-caret-up:before { content: "\f0d8"; } .icon-caret-left:before { content: "\f0d9"; } .icon-caret-right:before { content: "\f0da"; } .icon-columns:before { content: "\f0db"; } .icon-sort:before { content: "\f0dc"; } .icon-sort-down:before { content: "\f0dd"; } .icon-sort-up:before { content: "\f0de"; } .icon-envelope-alt:before { content: "\f0e0"; } .icon-linkedin:before { content: "\f0e1"; } .icon-undo:before { content: "\f0e2"; } .icon-legal:before { content: "\f0e3"; } .icon-dashboard:before { content: "\f0e4"; } .icon-comment-alt:before { content: "\f0e5"; } .icon-comments-alt:before { content: "\f0e6"; } .icon-bolt:before { content: "\f0e7"; } .icon-sitemap:before { content: "\f0e8"; } .icon-umbrella:before { content: "\f0e9"; } .icon-paste:before { content: "\f0ea"; } .icon-user-md:before { content: "\f200"; } /* * www.KNACSS.com V2.3 @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ /* ----------------------------- */ /* summary */ /* ----------------------------- */ /* 1- colors 2- reset 3- layout and modules 4- header 5- sidebar 6- footer 7- forms 8- main 9- iefix 10- print 11- desktop medias 12- mobile */ /* ----------------------------- */ /* ==colors */ /* ----------------------------- */ /* ----------------------------- */ /* ==reset */ /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ html { font-size: 62.5%; } body { background-color: #fff; color: #000; font-family: "Century Gothic", helvetica, arial, sans-serif; font-size: 1.4em; /* equiv 14px */ line-height: 1.5; /* adapt to your design */ } /* font-sizing for content */ /* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ p, ul, ol, dl, blockquote, pre, td, th, label, textarea { font-size: 1em; /* equiv 14px */ line-height: 1.5; margin: 21px 0; } h1, .h1-like { font-size: 1.8571em; /* equiv 26px */ font-weight: normal; line-height: 1.6154; margin: 42px 0 21px 0; } h2, .h2-like { font-size: 1.7143em; /* equiv 24px */ font-weight: normal; line-height: 1.75; margin: 42px 0 21px 0; } h3, .h3-like { font-size: 1.5714em; /* equiv 22px */ font-weight: normal; line-height: 1.909; margin: 42px 0 21px 0; } h4, .h4-like { font-size: 1.4286em; /* equiv 20px */ font-weight: normal; line-height: 1.05; margin: 42px 0 21px 0; } h5, .h5-like { font-size: 1.2857em; /* equiv 18px */ font-weight: normal; line-height: 1.1667; margin: 42px 0 21px 0; } h6, .h6-like { font-size: 1.1429em; /* equiv 16px */ font-weight: normal; line-height: 1.3125; margin: 42px 0 21px 0; } /* alternate font-sizing */ .smaller { font-size: .7143em; /* equiv 10px */ line-height: 2.1; } .small { font-size: .8571em; /* equiv 12px */ line-height: 1.75; } .big { font-size: 1.1429em; /* equiv 16px */ line-height: 1.3125; } .bigger { font-size: 1.2857em; /* equiv 18px */ line-height: 1.1667; } .biggest { font-size: 1.4286em; /* equiv 20px */ line-height: 1.05; } /* soft reset */ html, body, label { margin: 0; padding: 0; } ul, ol { padding-left: 2em; } code, pre, samp { white-space: pre-wrap; font-family: consolas, 'DejaVu Sans Mono', courier, monospace; } code { line-height: 1em; } table { margin-bottom: 1.5em; } .m-reset { margin: 0 !important; } .p-reset { padding: 0 !important; } /* avoid collapsing margins on headings */ h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } /* avoid margins on nested elements */ li p, li ul, li ol { margin-top: 0; margin-bottom: 0; } /* HTML5 tags */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } /* max values */ img, table, td, blockquote, code, pre, textarea, input, video { max-width: 100%; height: auto; } /* you shall not pass */ textarea, table, td, th, code, pre, samp, p { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } /* pictures */ img { width: auto; vertical-align: middle; } a img { border: 0; } /* ----------------------------- */ /* ==layout and modules */ /* ----------------------------- */ /* switching box model for all elements */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* float layout */ /* ----------- */ /* tutorial : http://knacss.com/demos/tutoriel.html; */ /* module, contains floats */ .mod { padding: 1em; overflow: hidden; } /* same as .mod, no paddings */ .item { overflow: hidden; } /* table layout */ /* ------------------ */ .row { display: table; table-layout: fixed; width: 100%; } .row > *, .col { display: table-cell; vertical-align: top; padding: 1em; } /* blocks that needs to be placed under floats */ .clear, .line, .row { clear: both; } /* blocks that must contain floats */ .clearfix:before, .clearfix:after, .line:before, .line:after, .mod:before, .mod:after { content: ""; display: table; } .clearfix:after, .line:after, .mod:after { clear: both; } /* alignments (blocks and inline) */ /* ------------------------------ */ /* left elements */ .left { float: left; margin-right: 1em; } .mod.left, .col.left { margin-right: 0; } /* right elements */ .right { float: right; margin-left: 1em; } .mod.right, .col.right { margin-left: 0; } img.left, img.right { margin-bottom: 5px; } .center { margin: auto; } .txtleft { text-align: left; } .txtright { text-align: right; } .txtcenter { text-align: center; } /* gutters (for row and lines) */ /* ------------------------------ */ /* 1em gutter between elements if parent is .gut */ .row.gut > * + * { border-left: 1em solid #fff; /* must be color of parent background */ } .line.gut > .left { margin-right: 1em; } .line.gut > .right { margin-left: 1em; } /* "multicolumns" with % gutter */ .line.gut2 > * { width: 49%; } .line.gut2 > * + * { margin-left: 2%; } .line.gut3 > * { width: 32.333%; } .line.gut3 > * + * { margin-left: 1.5%; } .line.gut4 > * { width: 24%; } .line.gut4 > * + * { margin-left: 1.333%; } /* just inline-block */ .inbl { display: inline-block; vertical-align: top; margin-right: -.25em; } /* blocks widths (percentage and pixels) */ .w10 { width: 10%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w33 { width: 33.333%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w66 { width: 66.666%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; } .w50p { width: 50px; } .w100p { width: 100px; } .w150p { width: 150px; } .w200p { width: 200px; } .w300p { width: 300px; } .w400p { width: 400px; } .w500p { width: 500px; } .w600p { width: 600px; } .w700p { width: 700px; } .w800p { width: 800px; } .w960p { width: 960px; } .mw960p { max-width: 960px; } /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left s,m,l,n = small(10px),medium(20px),large(30px),none(0) source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css */ .mt0, .mtn { margin-top: 0; } .mt1, .mts { margin-top: 10px; } .mt2, .mtm { margin-top: 20px; } .mt3, .mtl { margin-top: 30px; } .mr0, .mrn { margin-right: 0; } .mr1, .mrs { margin-right: 10px; } .mr2, .mrm { margin-right: 20px; } .mr3, .mrl { margin-right: 30px; } .mb0, .mbn { margin-bottom: 0; } .mb1, .mbs { margin-bottom: 10px; } .mb2, .mbm { margin-bottom: 20px; } .mb3, .mbl { margin-bottom: 30px; } .ml0, .mln { margin-left: 0; } .ml1, .mls { margin-left: 10px; } .ml2, .mlm { margin-left: 20px; } .ml3, .mll { margin-left: 30px; } .pt0, .ptn { padding-top: 0; } .pt1, .pts { padding-top: 10px; } .pt2, .ptm { padding-top: 20px; } .pt3, .ptl { padding-top: 30px; } .pr0, .prn { padding-right: 0; } .pr1, .prs { padding-right: 10px; } .pr2, .prm { padding-right: 20px; } .pr3, .prl { padding-right: 30px; } .pb0, .pbn { padding-bottom: 0; } .pb1, .pbs { padding-bottom: 10px; } .pb2, .pbm { padding-bottom: 20px; } .pb3, .pbl { padding-bottom: 30px; } .pl0, .pln { padding-left: 0; } .pl1, .pls { padding-left: 10px; } .pl2, .plm { padding-left: 20px; } .pl3, .pll { padding-left: 30px; } /* hiding content */ .visually-hidden { position: absolute; left: -7000px; overflow: hidden; } [dir=rtl] .visually-hidden { left: auto; right: -7000px; } .desktop-hidden { display: none; } /* hidden on desktop */ .mobile-hidden {} /* hidden on mobile */ .tablet-hidden {} /* hidden on tablets */ .phone-hidden {} /* hidden on smartphones */ /* ----------------------------- */ /* ==header */ /* ----------------------------- */ /* ----------------------------- */ /* ==sidebar */ /* ----------------------------- */ /* ----------------------------- */ /* ==footer */ /* ----------------------------- */ /* ----------------------------- */ /* ==forms */ /* ----------------------------- */ form, fieldset { border: none; } input, button, select, label { vertical-align: middle; /* @bugfix alignment */ } /* ----------------------------- */ /* ==main */ /* ----------------------------- */ /* ----------------------------- */ /* ==iefix */ /* ----------------------------- */ /* haslayout for IE6/IE7 */ .ie67 .clearfix, .ie67 .line, .ie67 .mod, .ie67 .row, .ie67 .col { zoom: 1; } /* inline-block and table-cell for IE6/IE7 */ /* warning: .col needs width on IE6/IE7 */ .ie67 .btn, .ie67 .col, .ie67 .inbl { display: inline; zoom: 1; } .ie8 img { width: auto; /* @bugfix for IE8 */ } /* box-sizing for IE6/IE7 */ /* @source https://github.com/Schepp/box-sizing-polyfill */ /* .ie67 * { behavior: url(/js/boxsizing.htc); } */ /* ----------------------------- */ /* ==print */ /* ----------------------------- */ /* quick print reset */ @media print { p, blockquote { orphans: 2; widows: 2; } blockquote, ul, ol { page-break-inside: avoid; } h1, h2, h3, caption { page-break-after: avoid; } } /* ----------------------------- */ /* ==desktop medias */ /* ----------------------------- */ @media (min-width: 641px) { /* here go rules for big resources and big screens like: background-images, font-faces, etc. */ } /* ----------------------------- */ /* ==mobile */ /* ----------------------------- */ /* quick tablet reset */ @media (max-width: 768px) { .tablet-hidden { display: none; } .w60, .w66, .w70, .w75, .w80, .w90, .w100, .w600p, .w700p, .w800p, .w960p, .mw960p { width: auto; } } /* quick smartphone reset */ @media (max-width: 640px) { .phone-hidden { display: none; } .mod, .col, label, fieldset { display: block !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; float: none !important; width: auto !important; } .w30, .w33, .w40, .w50, .w300p, .w400p, .w500p { width: auto; } .row { display: block !important; width: 100% !important; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Style adjustments for high resolution devices */ } /* orientation iOS font-size fix */ @media (orientation: landscape) and (max-device-width: 768px) { html, body { -webkit-text-size-adjust: 100%; } } /* nav.css : styles de base pour une navigation responsive. Attention : ne fonctionne pas toujours très bien sur les anciens navigateurs ou OS mobiles (par exemple Android 2.1) */ label[for^="toggle"], [type="checkbox"] { cursor: pointer; } label[for^="toggle"] + [type="checkbox"] { display: none; } #navigation ul { margin: 0; padding: 0; } #navigation li { display: inline; } #navigation li a { display: inline-block; padding: .6em 1em; color: #111; border: 1px solid #aaa; text-decoration: none; text-shadow: 1px 1px 0 #fff; background: #eee; } #navigation li a:hover, #navigation li a:active { background: #ddd; text-decoration: underline; } @media (max-width: 640px) { /* unicode character for button */ [data-icon]:before { content: attr(data-icon); } /* styling menu button */ label[for^="toggle"] { position: absolute; top: 7px; right: 4px; z-index: 1337; padding: .1em .25em; font-size: 3.8em; font-weight: bold; line-height: .7em; background-color: #444; text-shadow: 1px 1px 0 rgba(255, 255, 255, .3); border-radius: 4px; color: #fff; } /* handling click/tap with CSS3 target */ #toggle-menu:checked + ul { max-height: 30em !important; /* number of menu items * 6em */ } /* styling navigation items */ #navigation ul { max-height: 0; overflow: hidden; -webkit-transition: max-height .4s; -moz-transition: max-height .4s; -o-transition: max-height .4s; -ms-transition: max-height .4s; transition: max-height .4s; } #navigation li a { display: block; padding: .9em .6em; border: 0; border-top: 1px solid #aaa; font-size: 1.1em; } #navigation li a:before { content: "›"; font-size: 1.2em; margin-right: .6em; line-height: 1; } #navigation li:last-child a { border-bottom: 1px solid #aaa; } #navigation li a:hover, #navigation li a:active { text-decoration: none; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } a:focus, a:active { outline: none; } html, body { height: 100%; width: 100%; } body { text-rendering: optimizeLegibility; } a, a:visited { color: #0086cc; text-decoration: none; } a:hover, a:visited:hover { text-decoration: underline; } button { background-color: #e67e22; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; -webkit-border-radius: 0; border-radius: 0; border: 0; padding: 10px; margin: 10px; color: #fff; font-weight: bold; } button.smaller { padding: 3px; } button:hover { background-color: #ad2bad; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } button:active { background-color: #9c279c; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2); box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2); } textarea { border: 1px solid #808080; margin: 10px; -webkit-border-radius: 0em; border-radius: 0em; padding: 5px; border: 1px solid #ddd; -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1); box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1); width: 600px; } textarea:focus, textarea:active, textarea:hover { border: 1px solid #ad2bad; } input { outline: 0; } .date { display: inline-block; } .middle { padding-top: 20%; } .pa1 { padding: 10px; } .pt05 { padding-top: 5px; } .success { color: #a0b046; } .error { color: #f71568; } .full-size { width: 100%; height: 100%; } .full-height { height: 100%; } .field { -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2); box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2); padding-left: 10px; } .toggle-button { background-color: #000; -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .toggle-button:hover { background: #ad2bad; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .toggle-button.selected { background-color: #def; color: #00305f; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .toggle-button.selected:hover { background: #ad2bad; color: #fff; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } .simple-row { border-top: 1px solid #ddd; } .full-size { width: 100%; height: 100%; } @-moz-keyframes fadein { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } to { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes fadein { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } to { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes fadein { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } to { opacity: 1; -ms-filter: none; filter: none; } } @keyframes fadein { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } to { opacity: 1; -ms-filter: none; filter: none; } } @-moz-keyframes pullin { from { -webkit-box-shadow: 0; box-shadow: 0; } to { -webkit-box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; } } @-webkit-keyframes pullin { from { -webkit-box-shadow: 0; box-shadow: 0; } to { -webkit-box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; } } @-o-keyframes pullin { from { -webkit-box-shadow: 0; box-shadow: 0; } to { -webkit-box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; } } @keyframes pullin { from { -webkit-box-shadow: 0; box-shadow: 0; } to { -webkit-box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; box-shadow: inset 4px 4px 10px #888, 0px 0px 5px #fff; } } @font-face { font-family: main; src: url("../fonts/open-sans-regular.ttf"); } @font-face { font-family: robotic; src: url("../fonts/andale-mono.ttf"); } [data-state~="default"], [data-state~="enabled"] { cursor: inherit; opacity: 1; -ms-filter: none; filter: none; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } [data-state~="disabled"], cursor not-allowed { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } [data-state~="hidden"] { display: none; } [data-state~="visible"] { visibility: visible; } [data-state~="invisible"] { visibility: hidden; } [data-state~="waiting"], [data-state~="loading"] { cursor: wait; } [data-state~="success"], [data-state~="valid"] { border-color: #82cf82; color: #82cf82; -webkit-transition: color 0.2s linear, border-color 0.2s linear; -moz-transition: color 0.2s linear, border-color 0.2s linear; -o-transition: color 0.2s linear, border-color 0.2s linear; -ms-transition: color 0.2s linear, border-color 0.2s linear; transition: color 0.2s linear, border-color 0.2s linear; } [data-state~="error"], [data-state~="invalid"] { border-color: #f0dddd; color: #f0dddd; -webkit-transition: color 0.2s linear, border-color 0.2s linear; -moz-transition: color 0.2s linear, border-color 0.2s linear; -o-transition: color 0.2s linear, border-color 0.2s linear; -ms-transition: color 0.2s linear, border-color 0.2s linear; transition: color 0.2s linear, border-color 0.2s linear; } .layout-container { width: 940px; } .layout-centered { margin: 0 auto; } .layout-left { float: left; } .layout-right { float: right; } .layout-to-left { left: auto; right: 0; } .layout-to-right { right: auto; left: 0; } .center { text-align: center; } #navigation { background: #000; -webkit-box-shadow: -3px 2px 3px #bbb; box-shadow: -3px 2px 3px #bbb; height: 38px; } #navigation li a { border: 0; font-weight: bold; color: #fff; background-color: #000; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; cursor: pointer; text-shadow: 0 0 0 #fff; } #navigation li a:hover { color: #444; font-weight: bold; text-decoration: none; text-shadow: 0 0 0 #fff; background-color: #ad2bad; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; color: #fff; } #navigation li a.active { background-color: #def; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; color: #00305f; } #navigation li#responsive-menu { display: none; } #microposts-view .js-fileapi-wrapper { display: none; } #microposts-view .js-fileapi-wrapper input { border: 1px solid #000; margin-left: 10px; font-size: 14px; } #microposts-view .js-fileapi-wrapper canvas { margin-left: 10px; } #microposts-view .micropost { border-top: 1px solid #ddd; } #microposts-view .micropost .left img { width: 20px; } #microposts-view .micropost div { padding: 0; } #microposts-view .micropost .micropost-attachments { display: none; } #microposts-view .micropost .infos .tags { color: #888; font-weight: bold; } #microposts-view .author { font-weight: bold; margin-right: 5px; } #microposts-view .micropost-buttons { display: none; } #microposts-view .micropost button { margin-left: 0; padding: 5px; font-size: 12px; } #microposts-view .micropost p { margin: 3px 0; } #microposts-view .micropost:hover { background: #f5f0fa; } #microposts-view .micropost.selected { background: #ebf5ff; } #microposts-view .micropost.selected .micropost-attachments { display: inline-block; } #microposts-view .tag-list div { float: left; } #microposts-view #microposts-search { font-size: 12px; margin-left: 5px; } .note-buttons { display: none; } #notes-view { padding-top: 10px; } #notes-view .note { padding-top: 10px; } #notes-view .note button { margin-left: 0; padding: 5px; font-size: 12px; } #notes-view .note p { margin: 3px 0; } #notes-view .note input { padding: 0; } #notes-view .note .note-title { -webkit-border-radius: 0; border-radius: 0; padding-left: 0; border-bottom: 1px solid transparent; } #notes-view .note .note-title:hover { border-bottom: 1px solid #e67e22; } #notes-view .note .note-title:active, #notes-view .note .note-title:focus { border-bottom: 1px solid #ad2bad; } #notes-view .note .mod { padding: 0 10px; } #notes-view .note:hover { background: #f5f0fa; } #notes-view .note.selected { background: #ebf5ff; } #notes-view .note-content { height: 100%; width: 100%; } #notes-view .note-content:hover { border: 1px solid #ad2bad; } #profile-view p { margin: 0; } #profile-view input:hover, #profile-view input:active, #profile-view input:focus { border-bottom: 1px solid #ad2bad; } #profile-view input { -webkit-border-radius: 0em; border-radius: 0em; padding: 0em; border-bottom: 1px solid transparent; width: 100%; } #profile-view button { margin-left: 0; } #profile-view #profile-description { border: 1px solid transparent; padding: 1em; font-size: 1.4em; } #profile-view #profile-description:hover, #profile-view #profile-description:active { border: 1px solid #ad2bad; } #profile-view #profile-name-field:hover, #profile-view #profile-name-field:active, #profile-view #profile-url-field:hover, #profile-view #profile-url-field:active { border-bottom: 1px solid #ad2bad; } #profile-view #profile-name-field { padding-left: 0; padding-bottom: 3px; -webkit-border-radius: 0; border-radius: 0; border-bottom: 1px solid transparent; font-size: 40px; font-weight: bold; } #profile-view #profile-url-field { -webkit-border-radius: 0; border-radius: 0; border-bottom: 1px solid transparent; font-size: 16px; } #profile-view .main-section #change-picture-button:not(:hover) { background-color: #eee; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } #profile-view .main-section #sesame-stuff button:not(:hover) { background-color: #eee; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } #profile-view .main-section #change-password-button { margin-left: 0; } #profile-view .main-section:hover #change-picture-button:not(:hover) { background-color: #e67e22; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } #profile-view .main-section:hover #sesame-stuff button:not(:hover) { background-color: #e67e22; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } #profile-view .main-section:hover #change-password-button { display: inline; } #profile-view #sesame-form { display: none; } #profile-view #profile-sesame-field { -webkit-border-radius: 0; border-radius: 0; } #profile-view #profile-sesame-field:focus, #profile-view #profile-sesame-field:hover { border-bottom: 1px solid #ad2bad; } #profile-view #change-picture-button { cursor: pointer; background-color: #e67e22; padding: 10px; color: #fff; font-weight: bold; height: 45px; width: 100%; max-width: 400px; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } #profile-view #change-picture-button input { cursor: pointer; font-size: 0.1em; padding: 0em; -webkit-border-radius: 0em; border-radius: 0em; } #profile-view #change-picture-button:hover { cursor: pointer; background-color: #ad2bad; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } #profile-view #change-picture-button:active { cursor: pointer; background-color: #9c279c; -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2); box-shadow: inset 3px 3px 3px rgba(0,0,0,0.2); } #contacts-view { padding-top: 10px; padding-left: 10px; } #contacts-view #new-contact-field { margin: 2px 0 0 10px; -webkit-border-radius: 0em; border-radius: 0em; width: 600px; padding: 0 0 0 10px; border: 1px solid #ddd; } #contacts-view #new-contact-field:focus, #contacts-view #new-contact-field:active { border-bottom: 1px solid #ad2bad; } #contacts-view .contact-line:not(:hover) .contact-buttons button { background: #eee; } #contacts-view .contact-line { display: block; width: 100%; padding: 0; } #contacts-view .contact-line .name { padding-top: 15px; } #contacts-view .contact-line .url { font-style: italic; margin-left: 20px; padding-top: 15px; } #contacts-view .contact-line .state { padding-top: 15px; width: 100px; } #contacts-view .contact-line .contact-buttons { padding: 0; } #contacts-view .contact-line .contact-buttons button { padding: 5px 10px; } #contacts-view .contact-line .contact-tag { font-size: 10px; padding: 5px; } #contacts-view .contact-line:hover .contact-buttons { display: table; } #contacts-view p.error { margin: 0 0 0 20px; } #contacts-view .tag-delete-button { margin-left: 0; padding: 2px 4px; } #contacts-view .tag-selector { display: inline; } #contacts-view .tag-selector:not(:hover) .tag-delete-button { background: #eee; } #contacts-view #tag-list { margin-bottom: 20px; } #contacts-view #tag-list, #contacts-view #add-tag, #contacts-view .contact-tags { display: inline-block; } #contacts-view .tag-all:not(:hover) .tag-add-button { background: #eee; } #contacts-view .contact-tags { padding: 0; margin-top: 4px; } .tag-select-button { display: inline-block; } .toggle-button:active { -webkit-box-shadow: none; box-shadow: none; } @media (max-width: 480px) { #microposts-view textarea { width: 100%; margin: 0; } #microposts-view #micropost-post-button { margin-left: 0; } #microposts-view #micropost-all { padding: 0; } #microposts-view #micropost-tag-list button { font-size: 12px; padding: 4px; margin: 0 3px 0 0; } .common a { display: block; width: 100%; } .common span { font-size: 10px; } #notes-view button { font-size: 14px; padding: 4px; margin: 3px; } #notes-view .note { margin: 0; } #notes-view .note .row { padding: 0; } #contacts-view { padding: 10px; } #contacts-view input#new-contact-field.field { margin: 0; width: 100%; font-size: 16px; } #contacts-view #add-contact-button { margin-left: 0; font-size: 14px; padding: 5px; } #contacts-view .tag-select-button { margin: 0 4px 0 0; font-size: 12px; padding: 5px; } #contacts-view .contact-tag { margin: 0 4px 0 0; font-size: 10px; } #contacts-view .name { padding: 0; } #contacts-view diV#tag-list { display: none; } #contacts-view .contact-line .mod { display: inline; width: auto; float: left !important; } #contacts-view .contact-line div.name { padding-top: 5px; padding-left: 5px; padding-right: 5px; } #contacts-view .contact-line .contact-buttons button { margin: 0; padding: 4px; } #profile-view div#profile-description { padding: 0; } #activities-view #sync-activities-button, #activities-view #more-activities-button { margin-left: 0; } #activities-view #activity-all { padding: 0; } #activities-view #activity-all .infos span { font-size: 10px; } #activities-view #activity-all .infos .date.mr2 { margin-right: 5px; width: 80px; } } @media (max-width: 760px) { body { padding: 0 0px; text-rendering: optimizeSpeed; } .layout-container { width: auto; } #home .question p { font-size: 20px; } #home .question input { font-size: 20px; } #responsive-menu { display: block; } #navigation ul { width: 100%; display: block; overflow: inherit; z-index: 1000; position: fixed; display: none; } #navigation li { width: 100%; z-index: 1000; display: block; } #navigation li a { width: 100%; padding: 5px; z-index: 1000; } #navigation li#responsive-menu { display: block; } #navigation li#responsive-menu a { color: #fff; } } iframe { border: 0; } html, body, #content { height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: main; } #content { text-align: center; } #home .question { font-family: robotic, main; font-size: 3em; } #home input { border: none; font-size: 2em; padding: 0.4em; -webkit-border-radius: 2em; border-radius: 2em; } #home input:active { border: 0; } #home input:focus { border: 0; } #alert-widget, #note-selector-widget { display: none; width: 320px; background: #000; color: #fff; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; } #alert-widget .note-selector-line, #note-selector-widget .note-selector-line { padding: 5px 10px; } #alert-widget .note-selector-line:hover, #note-selector-widget .note-selector-line:hover { background: #ad2bad; cursor: pointer; } #alert-widget .note-selector-line.selected, #note-selector-widget .note-selector-line.selected { background: #005fbe; } #alert-widget { height: 160px; text-align: center; padding: 20px; font-size: 26px; -webkit-border-radius: 10px; border-radius: 10px; font-family: robotic, main; } #note-selector-widget { height: 320px; } .activity-errors { display: none; } .error { cursor: pointer; } #pictures .row { vertical-align: middle; } .picture { top: 0; bottom: 0; cursor: pointer; display: table-cell; text-align: center; vertical-align: middle; height: 100%; } .picture.selected { background: #ebf5ff; } .picture-buttons button { padding: 3px; font-size: 12px; } #commons { margin-top: 10px; cursor: pointer; } .common { padding: 5px 20px; } .common button { padding: 3px; } #more-commons { margin-left: 15px; } .common.selected { background: #ebf5ff; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /*# sourceMappingURL=app.css.map*/