From 2bfb88b887e5f71a61fb4394870529e7b60377a0 Mon Sep 17 00:00:00 2001 From: sebastien Date: Mon, 13 Jan 2014 11:45:10 +0100 Subject: [PATCH] Add new CSS styles and person profile view first version --- app/css/app.css | 30 - app/css/edoStyle.css | 319 --- app/css/style.css | 4567 +++++++++++++++++++++++++++++++++ app/img/webid.png | Bin 0 -> 3593 bytes app/index.html | 3 +- app/js/app.js | 3 +- app/partials/friendsView.html | 22 +- app/partials/profileView.html | 107 + 8 files changed, 4690 insertions(+), 361 deletions(-) delete mode 100644 app/css/app.css delete mode 100644 app/css/edoStyle.css create mode 100644 app/css/style.css create mode 100644 app/img/webid.png create mode 100644 app/partials/profileView.html diff --git a/app/css/app.css b/app/css/app.css deleted file mode 100644 index c925240..0000000 --- a/app/css/app.css +++ /dev/null @@ -1,30 +0,0 @@ -/* app css stylesheet */ - -.menu { - list-style: none; - border-bottom: 0.1em solid black; - margin-bottom: 2em; - padding: 0 0 0.5em; -} - -.menu:before { - content: "["; -} - -.menu:after { - content: "]"; -} - -.menu > li { - display: inline; -} - -.menu > li:before { - content: "|"; - padding-right: 0.3em; -} - -.menu > li:nth-child(1):before { - content: ""; - padding: 0; -} diff --git a/app/css/edoStyle.css b/app/css/edoStyle.css deleted file mode 100644 index 96313f4..0000000 --- a/app/css/edoStyle.css +++ /dev/null @@ -1,319 +0,0 @@ -/* ------------------------------- */ -/* COLORS */ - -/* DARK GREY: #24221f */ -/* MEDIUM GREY: #938b7f */ -/* LIGHT GREY: #E2E2E2 */ -/* RED: #b80b5b */ -/* BLUE: #3fabd3 */ -/* GREEN: #0bb988 */ -/* ORANGE: #FF793A */ -/* BROWN: #938b7f */ - - -@import url(http://weloveiconfonts.com/api/?family=fontawesome); - -/* fontawesome */ -[class*="fontawesome-"]:before { - font-family: 'FontAwesome', sans-serif; -} - -html { - width: 100%; - height: 100%; -} - -body { - background: #EDEDED; - width: 100%; - height: 100%; - font-family: "Noto Sans", sans-serif; -} - -.clearfix:before, .clearfix:after { content: ""; display: table; } -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } - -a, a:visited { - text-decoration: none; - color: #3fabd3; -} - -.hide { - display: none; -} - -#search { - width: 800px; - height: 60px; - background: white; - box-shadow: 6px 6px rgba(0, 0, 0, 0.2); - margin: 40px auto; - border: 10px solid #e3e3e3; -} - -#add { - font-weight: bold; - height: 60px; - width: 60px; - text-align: center; - line-height: 60px; - background: #333333; - color: white; - font-size: 50px; - float: left; - cursor: pointer; - transition: all 0.2s; - -moz-transition: all 0.2s; - -webkit-transition: all 0.2s; -} - -#add:hover { - background: #3fabd3; - transform: rotate(2deg); - -moz-transform: rotate(-5deg) scale(1.1); - -webkit-transform: rotate(-5deg) scale(1.1); -} - -#search input[type="text"] { - height: 60px; - width: 680px; - border: 0; - box-shadow: none; - padding: 20px; - box-sizing: border-box; - outline: none; - font-family: "Noto Sans", sans-serif; - font-size: 20px; - float: left; -} - -#search input[type="text"]:focus { - box-shadow: none; - outline: none; - - } - -#search button[type="submit"] { - height: 60px; - width: 60px; - text-align: center; - line-height: 60px; - background: #333333; - color: white; - font-size: 30px; - float: right; - border: none; - cursor: pointer; - transition: all 0.2s; - -moz-transition: all 0.2s; - -webkit-transition: all 0.2s; -} - -#search button[type="submit"]:hover { - box-shadow: none; - outline: none; - background: #0bb988; - transform: rotate(2deg); - -moz-transform: rotate(-5deg) scale(1.1); - -webkit-transform: rotate(-5deg) scale(1.1); - -} - -#actionNeeded { - width: 800px; - background: #b80b5b; - color: white; - font-weight: bold; - text-transform: uppercase; - text-align: center; - padding: 10px; - box-sizing: border-box; - margin: 0 auto 20px; -} - -.contacts { - width: 800px; - margin: 0 auto; -} - -.contacts ul { - width: 100%; - margin: 0; - padding: 0; -} - -.contacts li { - position: relative; - font-size: 10px; - float: left; - width: 32%; - height: 220px; - background: white; - margin: 0 2% 2% 0; - box-sizing: border-box; - box-shadow: 6px 6px rgba(0, 0, 0, 0.2); - list-style-type: none; - cursor: default; -} - -.contacts li:nth-child(3n + 3) { - margin: 0 0 2% 0; -} - -.loading { - opacity: 0.4; -} - -.cssLoader { - position: absolute; - z-index: 1000000000; - top: 50%; - left: 50%; - margin-top: -19px; - margin-left: -19px; -} - -.loader { - display: none; - border: 17px solid; - border-color: #3fabd3 #24221f #24221f; - border-radius: 50%; - -webkit-animation: spin 1s linear infinite; - -moz-animation: spin 1s linear infinite; - -o-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; -} - -.loading .loader { - display: block; -} - -@-webkit-keyframes spin { - 100% { -webkit-transform: rotate(359deg); } -} - -@-moz-keyframes spin { - 100% { -moz-transform: rotate(359deg); } -} - -@-o-keyframes spin { - 100% { -moz-transform: rotate(359deg); } -} - -@keyframes spin { - 100% { transform: rotate(359deg); } -} - - -.error { - background: rgb(255, 230, 230) !important; -} - -.name { - font-weight: bold; - font-size: 18px; - text-transform: uppercase; - margin: 10px 10px 0; -} - -.surname { - font-weight: bold; - font-size: 14px; - text-transform: uppercase; - margin: 0 10px 0; -} - -.company { - margin: 2px 10px 0; - font-size: 12px; - color: #bfbfbf; -} - -.moreInfo { - clear: both; - margin: 45px 10px 0; - color: #e2e2e2; -} - -.contact:hover .moreInfo { - color: black; -} - -.contact a, -.contact a:visited { - color: #e2e2e2; -} - -.contact:hover a, -.contact:hover a:visited { - color: #3fabd3; -} - -.lastInteraction { - text-align: center; - margin-bottom: 10px; -} - -.lastInteraction span { - font-weight: bold; -} - -.message { - font-style: italic; - padding: 7px 10px; - margin: 5px 0; - background: #f8f8f8; - -} - -.contact:hover .message { - background: #fffdcb; -} - -.nextStep { - position: absolute; - bottom: 10px; - right: 10px; - text-align: right; -} - -.picture { - margin: 10px; - float: right; - width: 92px; -} - -.picture img { - width: 100%; - height: auto; -} - -.recentInteractions, -.newMessages, -.updates { - float: left; - text-align: center; - width: 21px; - height: 21px; - line-height: 20px; - border-radius: 11px; - color: white; - margin: 8px 0 10px 10px; -} - -.newMessages { - background: #b80b5b; -} - -.recentInteractions { - background: #0bb988; -} - -.updates { - background: #3fabd3; -} - - - - diff --git a/app/css/style.css b/app/css/style.css new file mode 100644 index 0000000..c2db321 --- /dev/null +++ b/app/css/style.css @@ -0,0 +1,4567 @@ +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base, +.contacts .contact { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3), +.contacts .contact:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture, +.contacts .contact .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img, +.contacts .contact .picture img { + width: 100%; + height: auto; +} +.contact-base .name, +.contacts .contact .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname, +.contacts .contact .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company, +.contacts .contact .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo, +.contacts .contact .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited, +.contacts .contact:hover a, +.contacts .contact:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo, +.contacts .contact:hover .moreInfo { + color: black; +} +.contact-base:hover .message, +.contacts .contact:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates, +.contacts .contact .recentInteractions, +.contacts .contact .newMessages, +.contacts .contact .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction, +.contacts .contact .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span, +.contacts .contact .lastInteraction span { + font-weight: bold; +} +.contact-base .message, +.contacts .contact .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep, +.contacts .contact .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages, +.contacts .contact .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions, +.contacts .contact .recentInteractions { + background: #0bb988; +} +.contact-base .updates, +.contacts .contact .updates { + background: #3fabd3; +} +#actionNeeded { + width: 800px; + background: #b80b5b; + color: white; + font-weight: bold; + text-transform: uppercase; + text-align: center; + padding: 10px; + box-sizing: border-box; + margin: 0 auto 20px; +} +.contacts { + width: 800px; + margin: 0 auto; +} +.contacts a, +.contacts a:visited { + color: #e2e2e2; +} +.contacts ul { + width: 100%; + margin: 0; + padding: 0; +} +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base, +#profile > #contacts .contact { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3), +#profile > #contacts .contact:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture, +#profile > #contacts .contact .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img, +#profile > #contacts .contact .picture img { + width: 100%; + height: auto; +} +.contact-base .name, +#profile > #contacts .contact .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname, +#profile > #contacts .contact .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company, +#profile > #contacts .contact .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo, +#profile > #contacts .contact .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited, +#profile > #contacts .contact:hover a, +#profile > #contacts .contact:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo, +#profile > #contacts .contact:hover .moreInfo { + color: black; +} +.contact-base:hover .message, +#profile > #contacts .contact:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates, +#profile > #contacts .contact .recentInteractions, +#profile > #contacts .contact .newMessages, +#profile > #contacts .contact .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction, +#profile > #contacts .contact .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span, +#profile > #contacts .contact .lastInteraction span { + font-weight: bold; +} +.contact-base .message, +#profile > #contacts .contact .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep, +#profile > #contacts .contact .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages, +#profile > #contacts .contact .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions, +#profile > #contacts .contact .recentInteractions { + background: #0bb988; +} +.contact-base .updates, +#profile > #contacts .contact .updates { + background: #3fabd3; +} +#profile { + position: relative; + width: 800px; + height: auto; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + padding: 30px; + box-sizing: border-box; + margin-bottom: 50px; +} +#profile > .basic .name { + font-size: 50px; + margin-top: -15px; +} +#profile > .basic .surname { + line-height: 30px; + font-size: 30px; +} +#profile > .basic .company { + line-height: 40px; + font-size: 16px; + color: #938b7f; +} +#profile > .notifications { + color: white; + cursor: pointer; + font-size: 20px; +} +#profile > .notifications div { + text-align: center; + width: 42px; + height: 42px; + line-height: 42px; + margin: 8px 10px 10px 0; +} +#profile > .notifications .newMessages { + background: #b80b5b; +} +#profile > .notifications .recentInteractions { + background: #0bb988; +} +#profile > .notifications .updates { + background: #3fabd3; +} +#profile > .moreInfo .lastInteraction { + clear: both; + text-align: center; + padding: 40px 0 20px; +} +#profile > .moreInfo .lastInteraction span { + font-weight: bold; +} +#profile > .moreInfo .message { + font-style: italic; + padding: 14px 20px; + margin: 5px 0; + background: #fffdcb; + color: #938b7f; + line-height: 1.8em; +} +#profile > .moreInfo .nextStep { + position: relative; + width: 120px; + margin: 30px auto; + text-align: center; + padding: 10px 14px; + background: #0bb988; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; +} +#profile > .moreInfo .nextStep:hover { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + background: #b80b5b; +} +#profile > .moreInfo .nextStep a { + color: white; +} +#profile > #details { + color: #938b7f; +} +#profile > #details .title { + background: #3fabd3; + padding: 7px 10px; + margin: 30px 0; + color: #ffffff; +} +#profile > #details .title-case { + margin: 0 0 5px; +} +#profile > #details .content { + margin: 0 0 20px; +} +#profile > #details ul { + padding: 0; +} +#profile > #details li { + height: 150px; + padding: 10px; + background: #f8f8f8; +} +#profile > #webid { + background: #f8f8f8; + margin: 20px 0; + padding: 10px; +} +#profile > #webid img { + width: 40px; + height: 40px; + margin-right: 10px; +} +#profile > #webid #webid-address { + color: #938b7f; + height: 40px; + line-height: 40px; + vertical-align: middle; +} +#profile > #contacts .title { + background: #3fabd3; + padding: 7px 10px; + margin: 30px 0; + color: #ffffff; +} +#profile > #contacts li img { + width: 100%; + height: auto; +} +#profile > #contacts .contact { + background: #f8f8f8; + box-shadow: none; +} +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img { + width: 100%; + height: auto; +} +.contact-base .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo { + color: black; +} +.contact-base:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span { + font-weight: bold; +} +.contact-base .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions { + background: #0bb988; +} +.contact-base .updates { + background: #3fabd3; +} +#conversation { + width: 800px; + padding: 0; +} +#title { + width: 800px; + background: #3fabd3; + padding: 10px; + color: white; + box-sizing: border-box; + margin-bottom: 30px; +} +.message { + position: relative; + list-style-type: none; + margin-bottom: 30px; + width: 800px; + height: auto; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + box-sizing: border-box; +} +.message.right { + text-align: right; +} +.message .author { + position: absolute; + top: 10px; + width: 100px; + height: 100px; + border-radius: 50px; + overflow: hidden; +} +.message .author.left { + left: 0; + margin-left: -130px; +} +.message .author.right { + right: 0; + margin-right: -130px; +} +.message .author img { + width: 100%; + height: auto; +} +.message .title { + padding: 30px; + font-size: 30px; +} +.message .summary { + width: 100%; + margin-top: 10px; + background: #fffdcb; + padding: 20px 30px; + box-sizing: border-box; +} +.message .content { + width: 100%; + padding: 20px 30px; + box-sizing: border-box; +} +.message #summary { + width: 100%; + margin-top: 10px; + background: #fffdcb; + padding: 20px 30px; + box-sizing: border-box; +} +.message #content { + width: 100%; + padding: 20px 30px; + box-sizing: border-box; +} +.message button[type="submit"] { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + text-transform: uppercase; + font-weight: bold; + color: white; + background: #0bb988; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + padding: 10px; + margin: 30px; + cursor: pointer; +} +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img { + width: 100%; + height: auto; +} +.contact-base .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo { + color: black; +} +.contact-base:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span { + font-weight: bold; +} +.contact-base .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions { + background: #0bb988; +} +.contact-base .updates { + background: #3fabd3; +} diff --git a/app/img/webid.png b/app/img/webid.png new file mode 100644 index 0000000000000000000000000000000000000000..69834443692083537461ea1894a8b6ae6716d78e GIT binary patch literal 3593 zcmaJ^c{r49+aC!JWqQ9P!XP9P**zLFlCq>2OJT&Qu?{tap)7;aJjK)_*|H4T#$zeV zki95Vmh>BZ$9-Sd@jK7+x~}`Ye!ug4gfcf46c7`D zKp=vqCKs$A5H1Vw==`z|%;d0b_`!?c$Hd+b0#T9Od$@vf^a)_{nEypPe`~y(f8dQf zt`Gwk{7qMB(_1&(U9DVixZL&qx z7YZPekmGU@&*%e(=`Va?FPUP#%9BmEj~a=RwLLm$9f--@IDNYe_ORJ*s^45){aVRg z^2#xY=EAQvkPHHZ0S#wyq2Lf4-#HG13WLzNGYJ2C<|pjGF+XR18vY-y0PKG_{|`e= zt@fA1xgRh8sBUyUuidS$_hzE)zf6(6?p{unEtrUsA$j(I1pkn!{P`@|cYnrusQaE3 z%T>aWtU{{Fq=Ni9eDnx#$vR2?%UeP|-U@H$UJ|H^y>2>AYdgY08nUvY(FdCwZDqN8 zvu^MbaikW#RlU)x-xRgkbo$}YO76kfh(m^o%-pAZSgCVZR0b2)^LW@0{L$JqD(N3MCijmqNBM71tZLR zRvFNhlN$k1tueOlZ+02yL<|u$!%!j8a!lq99^wAv;XT7o`!~l@Mq2Fc+^9p>b{ZeC zC_N%qt2D}($APWwO7lSaL_SRO5RO#cu2aaYZgOa0XAq`J)AeaLXV7_xbp{+1g`U1P zQ7XtMQtWoqg7f8kP9D>)O`{|az>;+2SLu{~yL65-9tCGiwx)$Te>lo}7e_L>zlBLG z#-7+SNN(+YeRJj#DcTWu!xXpI&j;)G#Wy5@;g`nduei@0mT-T|Z;D}o8)j#v3MR#0 zwfvY{910oT?GfcpG^h1A&Zfc_-NM-GQC^ap2m3XZ$O)3c>yyJFHgcJs;w-xJ1Iv->SLD0{j`d6S*?TKR2)2m?_kM?MgIC313FEPE&u zHS|KmSX*;f9S>$O%qthJ(to(b{MyfuksYwY(G3rGjyUq+()BGFo%5AkqOm#23M}53&twPsj$+1 z@hNn`^r8Gzrue&tnynK!zE0`qmqmp(D^=<#r3P$l2mFnX7LEIxuL2{n#h|{^x{!JN z9*(rayCK_)wptq1j<+fBfB%Ga1F^DW)~~<4Q_9jC)W(pd%zhm?BVhGH=WobaRXdWBWW=DOUd zu>HFpPRd1@gmW*4Q}i3WJDXdtBcmmYvk260<8y9H_4;K+*$FJJN41@7m(C(QxT{KG zh$pPfLX`R<+Tp$_<`J=EN*Bi`*Qq8p7&!jmn1iIgxI1kmjg|SvFcTT~glT^}D33tJ zTUZnvI}p?=IM0A8A6*D8PWsL`>Gjtr^~po=;0{k@tu@@gq#&<5CdJ`u2UrmjpQ1`x z8~u=Zh3DBph zFjn6TUIoEfH$gVM9GiqywW<<;`WfImTgkY z%>r?J`zA}h^rqg1d7~xVr`I!+Mm*VN z#0jtcLE^i3>r&&4dp;~lQ&a5fdY2_!RWZcaj&nHuK^9@SJ~?FhC>EX(6+33TuTs8W z5v)+&5%uFaSXJElPY)U?Pgq=zDEI}R{oR{% z>&3qudm=`C_y=Av`An?f($6~7tQolvN7eYHq)oxWEiFB8MEk)d;}^KC;0u%zL|_H= zisRG$U}evlUT&LNm4AKZogr#!p5ugPAFVn70)961XFy~8+}-ZZ-hElo6AYK0q-PVP zv1v7^;hrtoJsSp~x&5~}jsL*HrDrtj+s1|7c<3t+T?K}}QJT$aJn{fOVCQgzLyg$6 z43KI{FqH`7Q9)zFItKKkM^l#!->UOznaN}Vjx;xrY~Rtg%s((Zj-s?t5?PtAU>m~w z@R%DOu|Z-W&(QIe7lwOWkZVSqFTu`h36Dd6v8fs83c``fmS&F6$+Mf)9>qSY;{y2xsNveWw*D%nqJ<7b?j`Uy+dC*fyHW{QJvJU{ z>o}r5l7f(`m0wC^Q(&=LHAR0uG{~$nMM*S}Ynm%YepnREo5)RkuB65$;uc_(I_B z0Y+Qr#@1KenN(~ZLE$#3l94Uz_poVD`RG}?IR~Y;0@y#Pd~s*Qpy0Z&1xI=XUwLi{ zS1|`J{O>=SaI=V$yBsPNmc4UJkd8fy_|+IdjF(p9<)bB2Yuv?lv))b<#?P=pF*5yB zbz%W1#kCRX&O}rFxdXFu|f@1*7 z1JT9U77B%BO}**|j46EPSq|Yfim2I6!64i<0?)Ej$ zc}w_dY*~%-X5>}*(EBS~O^eK@9Xl6GU?v=A6Cw%(XsyV)re9;ud7TbpcV0Qsoqw$J z07X;kAk?DKai#g22y)$I;bzn|pjKyx zkgr;1TSs&KkwI6;UI6F6L$n&|WM{8R<`S}p+yV^-yUeU=k-f?RIO7+5OH$Pb(mOEE zA`dv5rm+JK=XcV38Ua`w9XOq^zyZ~Q98yFkFb4@X5y5|=;GL@XIzAEBB{ayj zdHr`T-xG~fcxUI*5ift@OiT_TWNC3@rokhIDTJSxB<~i}k%o<#o5ZPuYYkxC>|RHz zV<4sIZd#g8Lo?eChdE`;39mm8fFn6+QtE*29P2z3SUE*_L1ty9?Toy`&~z02YV2@) zxsshj^SW8x7w<5ju(U%?!C5m$3j9GfMwWcsnX{Gv(xw`~M{D}pJTEti$4-MJ3wcyO zZ=_^Am=E&@q?~3Amo8ej`|6#s`Fd9djGk*rJOxq_r10f~@2@yg>Di|3Jl<-XP!k~< zcOc&qD19%p@?kATY{_Z3%GqIq=m1qve^A#KMf~r+_)rf=g zIVcqqMQ-eX3ci*GS)Wu%9P1%_B+cho!WsN<_VE$*Um5P9_sI8QbF~xSaLyi zb^QJ2pJTR|n3#rLclEH*Aq3{PhxS1ZAF)efGkpibp_1+*Kl%G-Gx1j!^8dCD|L#=& q#_;bNnt#FmPBB2lg>WLjDn#A01s+t^TL;=Wi0MW13&rQ1BmW6%ulSh& literal 0 HcmV?d00001 diff --git a/app/index.html b/app/index.html index 0ac9b19..7402321 100644 --- a/app/index.html +++ b/app/index.html @@ -3,8 +3,7 @@ My AngularJS App - - +
diff --git a/app/js/app.js b/app/js/app.js index 6ed5c5d..5da26b8 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -16,6 +16,7 @@ angular.module('myApp', [ .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/personProfile', {templateUrl: 'partials/personProfile.html', controller: 'PersonProfileCtrl'}); $routeProvider.when('/friendsView', {templateUrl: 'partials/friendsView.html', controller: 'PersonProfileCtrl'}); - $routeProvider.otherwise({redirectTo: '/friendsView'}); + $routeProvider.when('/profileView', {templateUrl: 'partials/profileView.html', controller: 'PersonProfileCtrl'}); + $routeProvider.otherwise({redirectTo: '/profileView'}); }]) ; diff --git a/app/partials/friendsView.html b/app/partials/friendsView.html index f4e78f2..ab75b90 100644 --- a/app/partials/friendsView.html +++ b/app/partials/friendsView.html @@ -10,19 +10,23 @@
    -
  • -
    -
    +
  • +
    +
    Picture
    -
    {{ relationshipPg | predicateIn:['foaf:name','foaf:nick','foaf:givenName'] }}
    -
    {{ relationshipPg | predicate:'foaf:nick' }}
    -
    {{ 'TodoCompany' }}
    -
    {{ relationshipPg.graph.toArray().length }}
    -
    10
    -
    4
    +
    +
    {{ relationshipPg | predicateIn:['foaf:name','foaf:nick','foaf:givenName'] }}
    +
    {{ relationshipPg | predicate:'foaf:nick' }}
    +
    {{ 'TodoCompany' }}
    +
    +
    +
    {{ relationshipPg.graph.toArray().length }}
    +
    10
    +
    4
    +
    Last message from Edward: three days ago
    Hey, how was the play? I hope you enjoyed it. Let's talk about it this week...
    diff --git a/app/partials/profileView.html b/app/partials/profileView.html new file mode 100644 index 0000000..8a68508 --- /dev/null +++ b/app/partials/profileView.html @@ -0,0 +1,107 @@ + +
    + +
    + + Picture + +
    + +
    +
    {{ personPg | predicateIn:['foaf:name','foaf:nick','foaf:givenName'] }}
    +
    {{ personPg | predicate:'foaf:nick' }}
    +
    {{ 'TodoCompany' }}
    +
    + +
    +
    {{ personPg.graph.toArray().length }}
    +
    10
    +
    4
    +
    + +
    +
    Last message from Edward: three days ago
    +
    Hey, how was the play? I hope you enjoyed it. + Let's talk about it this week at the office. Did you send the documents to John? + Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget + urna mollis ornare vel eu leo. +
    +
    Write back
    +
    + +
    +
    DETAILS
    + +
      +
    • + +
      +
      Phone
      + +
      +
      • +
    • +
      +
      Address ========= {{ personPg | predicate:'contact:home' }}
      +
      + 5, rue Seveste
      + 75018 Paris
      + France +
      +
      +
      • +
    • +
      +
      Website
      +
      + https://stample.co +
      +
      +
      • + +
    +
    + +
    + Web ID logo +
    Web ID {{ personPg.subject }}
    +
    + +
    +
    Edward's contacts
    + +
      +
    • +
      +
      + + Picture + +
      + +
      +
      {{ relationshipPg | predicateIn:['foaf:name','foaf:nick','foaf:givenName'] }}
      +
      {{ relationshipPg | predicate:'foaf:nick' }}
      +
      {{ 'TodoCompany' }}
      +
      + +
      +
      {{ relationshipPg.graph.toArray().length }}
      +
      10
      +
      4
      +
      + +
      +
      You have not exchanged messages yet.
      +
      Write back
      +
      +
      • +
    + +
    + +