├── CNAME ├── css ├── .DS_Store └── main.css ├── img ├── .DS_Store ├── BizFriendly-logo.png └── bizfriendly-screenshot.png ├── index.html └── README.md /CNAME: -------------------------------------------------------------------------------- 1 | bizfriend.ly 2 | -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/bizfriendly-web/gh-pages/css/.DS_Store -------------------------------------------------------------------------------- /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/bizfriendly-web/gh-pages/img/.DS_Store -------------------------------------------------------------------------------- /img/BizFriendly-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/bizfriendly-web/gh-pages/img/BizFriendly-logo.png -------------------------------------------------------------------------------- /img/bizfriendly-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/bizfriendly-web/gh-pages/img/bizfriendly-screenshot.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | BizFriend.ly 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 |
20 |
21 | 22 |

BizFriend.ly was an expirement in how to creatively teach small business owners how to use the internet to run their businesses.

23 |

The code can be found at:
24 | https://github.com/codeforamerica/bizfriendly-web 25 |
26 | https://github.com/codeforamerica/bizfriendly-api 27 |

28 |

Built by Code for America in partnership with Kansas City, Missouri and Kansas City, Kansas.

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | BizFriend.ly 2 | ========= 3 | 4 | BizFriend.ly was an expirement in how to creatively teach small business owners how to use the internet to run their businesses. 5 | 6 | ## Made in Kansas City 7 | 8 | 
 9 | 
10 | 
11 |      oyyyyyyyyyyy+          .yyyyyyyyyyyy
12 |      ``:yyyyyyy-``       ``` ```osyyyyyo:`
13 |         oyyyyyo`:/+ossyyyyyyyysso+////-+yy/`
14 |         oyyyyyo.yyyyyyyyyyyyyyyyyyyyyyo/+yyy/`
15 |         oyyyyyo.yyo+/:-..`.//////+oyyyyyyyyyyy/`
16 |      .+-oyyyyyo`.       `/yyyyyy+`  .:oyyyyyyys:
17 |    `oyy-oyyyyyo       `/yyyyyyo.       `:oyys:
18 |   :yyyy-oyyyyyo     `/yyyyyyo.            .-
19 |  /yyyyy-oyyyyyo   `/yyyyyyo.
20 | :yyyyy/ oyyyyyo `/yyyyyyo.
21 | `yyyyy+  oyyyyyo/yyyyyyy/
22 | /yyyyy`  oyyyyyyyyyyyyyyyo.
23 | :yyyyys   oyyyyyyyyyoyyyyyyy/`
24 | .yyyyy+   oyyyyyyy+. .oyyyyyys:
25 | /yyyys   oyyyyys`     -syyyyyyo.
26 | `syyyy:  oyyyyyo        /yyyyyyy+`
27 | -yyyyy- oyyyyyo         `+yyyyyyy:
28 |  -yyyyy:.syyyyo           -syyyyyys.         ./-
29 |   .syyyyo-/yyyo             :yyyyyyy+`     `/yy/
30 |     /yyyyyo-:++              `+yyyyyyy:  `/yyyy:
31 |      `/syyyys/.                .oyyyyyys-/ys+-.`
32 |         -+syyyyyo/-.`           `:syyyyyy+-
33 |         o+:-:+syyyyyyyssooooossyyo./yyyyyyy/
34 |      ``.syyys+:--::/+oossssssoo+/:-`.syyyyyys-`
35 |      oyyyyyyyyyyy+                :yyyyyyyyyyyy/
36 | 
37 | 
38 |                    `..----..`
39 |                .-://////////:-.
40 |              .:////////////////:.
41 |             -////////////////////-
42 |            -////////-....-////////-
43 |           `://////:`      `://////:`
44 |           .///////.        .///////.
45 |           `///////-       `:///////`
46 | `-:::-.    -///////:`    `:///////-    .::::-`
47 | ://////-    :///////:`  `:///////-    -//////:
48 | :///////-    -///////: `:///////-    -///////:
49 | `:///////:    -/////:`.:///////-    :///////:`
50 |  `:///////:`   .///:`.////////-   `:///////:`
51 |   `:///////:`   .::`.////////-   `:///////:`
52 |    `:///////:`   ``.////////-   `:///////:`
53 |     `:///////:.   .////////-   `:///////:`
54 |       -///////:. -////////-`. `:///////:`
55 |       `:////////:////////-`:/-:///////:`
56 |         :///////////////.`://////////:`
57 |          -/////////////.`://////////:
58 |           -///////////- ://////////:
59 |            -/////////-  `:////////-`
60 |             -///////.    .://////:
61 |              `.---.`      `.----.
62 | 
63 | 
64 |
65 | 66 | 67 | ## Copyright 68 | Copyright (c) 2013 Code for America. See [LICENSE][] for details. 69 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Author's custom styles 3 | ========================================================================== */ 4 | 5 | /* Fonts */ 6 | 7 | @font-face { 8 | font-family: 'MuseoSlab'; /*a name to be used later*/ 9 | src: url('../fonts/Museo_Slab_500_2.otf'); /*URL to font*/ 10 | } 11 | 12 | body { 13 | font-family: 'MuseoSlab'; 14 | color: #585b5b; 15 | overflow-x: hidden; 16 | } 17 | 18 | a { 19 | color : #0F6095; 20 | cursor: pointer; 21 | } 22 | 23 | .nav li a:hover, .nav li a:focus { 24 | background-color: transparent; 25 | } 26 | 27 | .navbar, footer{ 28 | font-family: 'Open Sans'; 29 | } 30 | 31 | #signinlinks a{ 32 | color: #585b5b; 33 | font-weight: 700; 34 | border-left:2px solid #585b5b; 35 | padding-left: 5px; 36 | } 37 | 38 | #signinlinks a:first-child, 39 | #signinlinks #bfUserName 40 | { 41 | border-left:none; 42 | padding-left: 0px; 43 | } 44 | 45 | #main-message { 46 | font-family: "MuseoSlab"; 47 | color: #0F6095; 48 | } 49 | 50 | .btn { 51 | font-family: 'Open Sans'; 52 | font-weight: 700; 53 | color: #FFF; 54 | } 55 | 56 | #bottom a { 57 | color: #0F6095; 58 | font-size: 18px; 59 | line-height: 20px; 60 | } 61 | 62 | #bottom a:hover { 63 | color: #ff4000; 64 | } 65 | 66 | .bold { 67 | font-family: 'Open Sans'; 68 | font-weight: 700; 69 | line-height: 14px; 70 | } 71 | 72 | #top-learners .bold, #top-teachers .bold { 73 | line-height: 20px; 74 | } 75 | 76 | #subheader h1 { 77 | color: #79C040; 78 | font-family: 'Open Sans'; 79 | font-size: 18px; 80 | line-height: 20px; 81 | font-weight: 700; 82 | 83 | } 84 | 85 | #subheader p { 86 | color: #585b5b; 87 | font-family: 'Open Sans'; 88 | font-size: 14px; 89 | font-weight: 700; 90 | } 91 | 92 | #service-media { 93 | position: relative; 94 | padding-bottom: 56.25%; /* 16/9 ratio */ 95 | height: 0; 96 | overflow: hidden; 97 | } 98 | 99 | #service-media iframe, 100 | #service-media object, 101 | #service-media embed { 102 | position: absolute; 103 | top: 0; 104 | left: 0; 105 | width: 100%; 106 | height: 100%; 107 | } 108 | 109 | #service-media img { 110 | width: 100%; 111 | } 112 | 113 | .service-link { 114 | font-family: 'Open Sans'; 115 | color: #FF4000; 116 | font-weight: 700; 117 | } 118 | 119 | .service-description { 120 | font-size: 12px; 121 | } 122 | 123 | #service-name { 124 | color:#79C040; 125 | } 126 | 127 | #tips { 128 | list-style: disc; 129 | } 130 | 131 | .orange-bg { 132 | background-color: #FFC9AE; 133 | } 134 | #additional-resources a { 135 | color: #0F6095; 136 | text-decoration: underline; 137 | } 138 | 139 | th { 140 | font-family: 'Open Sans'; 141 | font-size: 12px; 142 | font-weight: 700; 143 | } 144 | 145 | .author-name { 146 | font-size: 12px; 147 | } 148 | 149 | .modal-title { 150 | color: #79C040; 151 | font-weight: 700; 152 | } 153 | 154 | #instructions-title { 155 | font-size: 18px; 156 | line-height: 20px; 157 | color: #FF4000; 158 | } 159 | 160 | #subnav { 161 | z-index: 1000; 162 | } 163 | 164 | #subnav a { 165 | color: #FF4000; 166 | font-weight: 700; 167 | font-family: 'Open Sans'; 168 | } 169 | 170 | #subnav a:hover { 171 | color: #FF8C66; 172 | text-decoration: none; 173 | border-color: #FF8C66; 174 | } 175 | 176 | #subnav .active { 177 | border-bottom: 5px solid #FF4000; 178 | } 179 | 180 | #subheader a { 181 | } 182 | 183 | #elements h3 { 184 | color: #FFF; 185 | } 186 | 187 | #elements .draggable { 188 | font-family: 'Open Sans'; 189 | font-weight: 700; 190 | font-size: 12px; 191 | line-height: 14px; 192 | } 193 | 194 | .temp-text{ 195 | font-family: 'Open Sans'; 196 | font-size: 12px; 197 | font-weight: 700; 198 | line-height: 14px; 199 | width: 150px; 200 | } 201 | 202 | .plain { 203 | font-size: 12px; 204 | line-height: 12px; 205 | position: relative; 206 | top: -7px; 207 | list-style:disc; 208 | overflow: auto; 209 | } 210 | 211 | .plain li { 212 | margin-left:15px; 213 | margin-bottom: 5px; 214 | } 215 | 216 | #add-droppable { 217 | font-family: 'Open Sans'; 218 | color: #0F6095; 219 | font-size: 12px; 220 | font-weight: 700; 221 | } 222 | 223 | #img-upload-form label { 224 | font-family: 'Open Sans'; 225 | color: #0F6095; 226 | font-size: 12px; 227 | font-weight: 700; 228 | } 229 | 230 | /*END FONTS*/ 231 | 232 | 233 | /*POSITION */ 234 | header { 235 | height: 180px; 236 | } 237 | 238 | .navbar { 239 | position: relative; 240 | margin-bottom: 0; 241 | } 242 | 243 | /*#bottom, footer, #about-subheader { 244 | position: relative; 245 | top: -50px; 246 | }*/ 247 | 248 | #main-text a { 249 | margin-top: 25px; 250 | } 251 | 252 | #bottom { 253 | margin-top: 50px; 254 | } 255 | 256 | #bottom img { 257 | padding-bottom: 10px; 258 | } 259 | 260 | #bottom p { 261 | margin: 10px; 262 | } 263 | 264 | footer { 265 | margin-bottom: 100px; 266 | } 267 | 268 | #subnav { 269 | position : relative; 270 | top: -60px; 271 | } 272 | 273 | #subheader h1 { 274 | margin-bottom: 5px; 275 | } 276 | 277 | hr { 278 | margin:0; 279 | } 280 | 281 | .service-header a { 282 | padding-left: 10px; 283 | } 284 | 285 | #service-name { 286 | padding-left: 15px; 287 | display: inline; 288 | } 289 | 290 | #tips li { 291 | margin-bottom: 10px; 292 | } 293 | 294 | #service-description li, #tips li { 295 | position: relative; 296 | left: 15px; 297 | } 298 | 299 | .modal-body { 300 | text-align: center; 301 | } 302 | 303 | #draftMessage a, #submittedMessage a, #submissionModal a { 304 | text-decoration: underline; 305 | } 306 | 307 | #submissionModal .btn { 308 | text-decoration: none; 309 | } 310 | 311 | #teach-landing #subheader, #teach-landing #main, #teach-header, 312 | #teach-main, #new-service #subheader, #new-service #main, #new-category #subheader, 313 | #new-category #main { 314 | position: relative; 315 | top: -31px; 316 | } 317 | 318 | #profile #subheader, #connect #subheader { 319 | padding-bottom: 15px; 320 | } 321 | 322 | #teach footer { 323 | position: relative; 324 | top: -56px; 325 | } 326 | 327 | #lesson-form { 328 | text-align: center; 329 | } 330 | 331 | #step-builder { 332 | position: relative; 333 | top: -25px; 334 | } 335 | 336 | #teach-dots { 337 | margin: 0 auto; 338 | text-align: center; 339 | position: relative; 340 | top: -30px; 341 | left:30px; 342 | padding-top: 35px; 343 | width : 300px; 344 | } 345 | 346 | #teach-dots-amount { 347 | position: relative; 348 | left:-30px; 349 | } 350 | 351 | #instructions section{ 352 | position: relative; 353 | top: -10px; 354 | height: 400px; 355 | } 356 | 357 | #elements .draggable { 358 | position:relative; 359 | background-color: #FFF; 360 | border: 3px dashed #999; 361 | border-radius: 15px; 362 | width: 100px; 363 | height: 70px; 364 | margin-left: 6px; 365 | margin-bottom: 10px; 366 | font-weight: 700; 367 | text-align: center; 368 | z-index: 1; 369 | padding-top: 13px; 370 | } 371 | 372 | #elements p{ 373 | padding-top: 10px; 374 | } 375 | 376 | #elements hr { 377 | padding: 5px; 378 | } 379 | 380 | #advanced-options { 381 | padding-top: 25px; 382 | } 383 | 384 | #add-droppable img { 385 | margin-right: 5px; 386 | } 387 | 388 | #step-text-content { 389 | margin: 15px auto; 390 | width: 310px; 391 | } 392 | 393 | #close-lesson { 394 | display:none; 395 | } 396 | /*END POSITION*/ 397 | 398 | 399 | /*COLORS*/ 400 | 401 | #teach-main { 402 | background-color: #BCDCE9; 403 | } 404 | 405 | .close { 406 | opacity: 1; 407 | } 408 | 409 | #elements { 410 | background-color: #BFBFBF; 411 | } 412 | 413 | #congrats-icons { 414 | background-color: #C7E4EE; 415 | } 416 | 417 | #congrats-share, #congrats-links { 418 | background-color: #FFC9AE 419 | } 420 | 421 | #congrats-links { 422 | height: 150px; 423 | } 424 | 425 | #congrats-links ul { 426 | width: 200px; 427 | margin: 0 auto; 428 | } 429 | 430 | hr { 431 | height: 1px; 432 | background-color: #BFBFBF; 433 | } 434 | 435 | /*END COLORS*/ 436 | 437 | .right { 438 | float: right; 439 | } 440 | 441 | .left { 442 | float:left; 443 | } 444 | 445 | /*added color to font styles*/ 446 | h1 { 447 | color: #79C040; 448 | font-family: 'Open Sans', sans-serif; 449 | font-size: 24pt; 450 | font-weight: 700; 451 | line-height: 26px; 452 | margin-top: 0px; 453 | } 454 | 455 | h2 { 456 | color: #FF4000; 457 | font-family: 'Open Sans', sans-serif; 458 | font-size: 18px; 459 | font-weight: 700; 460 | line-height: 20px; 461 | } 462 | 463 | h3 { 464 | font-family: 'Open Sans', sans-serif; 465 | font-size: 14px; 466 | font-weight: 700; 467 | line-height: 20px; 468 | } 469 | 470 | ul{ 471 | padding-left: 0px; 472 | list-style: none; 473 | } 474 | 475 | .navbar li, footer li { 476 | padding-top: 5px; 477 | } 478 | 479 | .nav { 480 | position: absolute; 481 | top: 75px; 482 | left: 199px; 483 | height: 33px; 484 | background-color: #585b5b; 485 | } 486 | 487 | .navbar-brand { 488 | position: absolute; 489 | left: 0; 490 | } 491 | 492 | .navbar-nav li a { 493 | padding-top: 0px; 494 | font-size: 18px; 495 | line-height: 20px; 496 | font-weight: 700; 497 | color: #FFF; 498 | 499 | } 500 | 501 | .navbar-nav li a:hover{ 502 | color: #74bbd4; 503 | } 504 | 505 | .navbar-nav li a.active { 506 | border-bottom: 5px solid #ffffff; 507 | } 508 | 509 | .nav > li > a 510 | { 511 | padding:0px !important; 512 | margin: 15px !important; 513 | display: inline; !important; 514 | } 515 | 516 | #bfUserName, #signOutLink { 517 | display: none; 518 | } 519 | 520 | 521 | #subheader img { 522 | float: right; 523 | } 524 | 525 | .login-required { 526 | display: none; 527 | } 528 | 529 | #signinlinks { 530 | text-align: right; 531 | margin-top: 45px; 532 | margin-left: 200px; 533 | } 534 | 535 | #signinlinks a { 536 | white-space: nowrap; 537 | } 538 | 539 | #main-text { 540 | margin-top: 50px; 541 | } 542 | 543 | #main-text .lesson-name { 544 | padding-bottom: 15px; 545 | } 546 | 547 | /* 548 | * 549 | * BUTTONS 550 | */ 551 | .btn { 552 | border-radius:5px; 553 | font-family: MuseoSlab; 554 | text-align: center; 555 | } 556 | 557 | .btn-primary { 558 | background-color: #FF4000; 559 | border-color: #FF4000; 560 | font-weight: 700; 561 | } 562 | 563 | .btn-primary:hover { 564 | background-color: #FF8C66; 565 | border-color: #FF8C66; 566 | color: black; 567 | font-weight: 700; 568 | } 569 | 570 | .btn-default { 571 | background-color: #0F6095; 572 | border-color: #0F6095; 573 | font-weight: 700; 574 | } 575 | 576 | .btn-default:hover { 577 | background-color: #74BBD4; 578 | border-color: #74BBD4; 579 | color: black; 580 | font-weight: 700; 581 | } 582 | 583 | .btn-green { 584 | background-color: #79c040; 585 | border-color: #79c040; 586 | } 587 | 588 | .btn-green:hover { 589 | background-color: #C9E6B3; 590 | border-color: #C9E6B3; 591 | } 592 | 593 | .btn-blue { 594 | background-color: #74BBD4; 595 | border-color: #74BBD4; 596 | } 597 | 598 | .btn-blue:hover { 599 | background-color: #C7E4EE; 600 | border-color: #C7E4EE; 601 | } 602 | 603 | .btn-gray { 604 | background-color: #BFBFBF; 605 | border-color: #BFBFBF; 606 | font-weight: 700; 607 | } 608 | 609 | .btn-gray:hover { 610 | background-color: #BFBFBF; 611 | border-color: #BFBFBF; 612 | font-weight: 700; 613 | } 614 | 615 | #laptop { 616 | width: 420px; 617 | height: 240px; 618 | } 619 | 620 | #main-video iframe { 621 | position:absolute; 622 | top: 25px; 623 | left: 75px; 624 | } 625 | 626 | #about-main { 627 | padding-top: 25px; 628 | } 629 | 630 | #category-menu{ 631 | margin-top: 15px; 632 | margin-bottom: 10px; 633 | } 634 | 635 | #category-menu a { 636 | color: #0F5F94; 637 | text-decoration: underline; 638 | } 639 | 640 | .category { 641 | margin-top: 15px; 642 | margin-bottom: 25px; 643 | } 644 | 645 | #subsubheader h2 { 646 | color: #79C040; 647 | } 648 | 649 | #subsubheader a { 650 | color: #ff4000; 651 | font-weight: 700; 652 | } 653 | 654 | .category-name { 655 | font-size: 18px; 656 | line-height: 20px; 657 | font-weight: 700; 658 | color: #ff4000; 659 | } 660 | 661 | #recent-content { 662 | padding-top: 25px; 663 | border: solid 1px; 664 | height: 150px; 665 | font-weight: 700; 666 | margin-bottom: 25px; 667 | } 668 | 669 | #recent-content a { 670 | color: #FF4000; 671 | } 672 | 673 | #recent-content a:hover { 674 | color: #FF4000; 675 | } 676 | 677 | legend { 678 | padding-top: 10px; 679 | } 680 | 681 | 682 | #teach-callout { 683 | background-color: #C7E4EE; 684 | border-radius: 15px; 685 | padding: 10px; 686 | } 687 | 688 | #teach-callout p{ 689 | display: inline; 690 | } 691 | 692 | #teach-content { 693 | padding: 25px; 694 | } 695 | 696 | .inline-block { 697 | display: inline-block; 698 | } 699 | 700 | #current-dot{ 701 | background-image: url('../img/teach-dot.png'); 702 | height: 90px; 703 | width: 90px; 704 | color: #FFF; 705 | text-align: center; 706 | list-style: none; 707 | } 708 | 709 | #current-dot h1 { 710 | position: relative; 711 | top: 35px; 712 | font-size: 48px; 713 | } 714 | 715 | #add-new-step { 716 | width: 50px; 717 | float: right; 718 | font-size: 10px; 719 | } 720 | 721 | #elements .disabled { 722 | background-color: #666; 723 | cursor: not-allowed; 724 | } 725 | 726 | #step-close-btn { 727 | position: relative; 728 | top:-10px; 729 | right:-10px; 730 | } 731 | 732 | .selectpicker a { 733 | color: #ff4000; 734 | } 735 | 736 | #alpha { 737 | position: relative; 738 | top: 15px; 739 | } 740 | 741 | #teach h3{ 742 | font-size: 14px; 743 | font-weight: 700; 744 | } 745 | 746 | .teach-column { 747 | width: 340px; 748 | /*height: 780px;*/ 749 | margin-right: 15px; 750 | float: left; 751 | } 752 | 753 | .temp-close-btn { 754 | position:relative; 755 | top: -20px; 756 | left: 19px; 757 | } 758 | 759 | .teach-box-elements { 760 | height: 775px; 761 | text-align: center; 762 | } 763 | 764 | .teach-box { 765 | border: solid 1px; 766 | box-shadow: 10px 10px 5px #888888; 767 | height: 775px; 768 | padding: 15px; 769 | } 770 | 771 | .orange-square { 772 | width: 25px; 773 | height: 25px; 774 | background-color: #FFC9AE; 775 | border: 1px solid #999999; 776 | } 777 | 778 | .orange-bg { 779 | background-color: #FFC9AE; 780 | } 781 | 782 | .blue-square { 783 | width: 25px; 784 | height: 25px; 785 | background-color: #C7E4EE; 786 | border: 1px solid #999999; 787 | } 788 | .white-square { 789 | width: 25px; 790 | height: 25px; 791 | background-color: #FFFFFF; 792 | border: 1px solid #999999; 793 | } 794 | 795 | .btn-teach, .btn-teach:hover { 796 | color: #585b5b; 797 | background-color: transparent; 798 | border: 1px solid; 799 | font-weight: 700; 800 | } 801 | 802 | .popover { 803 | text-align: center; 804 | } 805 | 806 | #feedback-window { 807 | height: 250px; 808 | background-color: #FFF; 809 | border: 1px solid; 810 | border-radius: 15px; 811 | box-shadow: 10px 10px 5px #888888; 812 | } 813 | 814 | #feedback-window h2 { 815 | margin-top: 10px; 816 | } 817 | 818 | #feedback-content { 819 | color: #585b5b; 820 | } 821 | 822 | #feedback-content h2 { 823 | color: #79c040; 824 | } 825 | 826 | #feedback-content hr { 827 | margin: 25px 0; 828 | } 829 | 830 | #feedback-control { 831 | text-align: center; 832 | /* position:absolute;*/ 833 | } 834 | 835 | #state-btns { 836 | margin-top : 25px; 837 | } 838 | 839 | .uploaded-image { 840 | border: 1px solid; 841 | background-color: #FFF; 842 | } 843 | 844 | .instruction-header-img { 845 | margin-top: 10px; 846 | } 847 | 848 | #instructions header, #instructions footer { 849 | position:relative; 850 | top: 0px; 851 | } 852 | 853 | #instructions .btn { 854 | margin-top: 10px; 855 | } 856 | 857 | .draggable { 858 | cursor: -webkit-grab; 859 | cursor: -moz-grab; 860 | } 861 | 862 | .step-text{ 863 | padding: 10px; 864 | margin-bottom: 15px; 865 | border-radius: 15px; 866 | /*width: 260px;*/ 867 | } 868 | 869 | .temp { 870 | border: 3px dashed #999; 871 | border-radius: 15px; 872 | } 873 | 874 | #step-texts .active, #feedback-content .active { 875 | border: 3px solid #999; 876 | border-radius: 15px; 877 | } 878 | 879 | .hidden { 880 | display: none; 881 | } 882 | 883 | .temp-text { 884 | color: #999; 885 | text-align: center; 886 | padding-top: 20px; 887 | margin: 0 auto; 888 | min-height: 75px; 889 | } 890 | 891 | .gray { 892 | width: 300px; 893 | padding-left: 35px; 894 | padding-top: 150px; 895 | color: #BFBFBF; 896 | } 897 | 898 | .lesson-name { 899 | color: #FF4000; 900 | font-weight: 700; 901 | font-family: 'Open Sans'; 902 | } 903 | 904 | .service-name { 905 | font-weight: 700; 906 | font-family: 'Open Sans'; 907 | } 908 | 909 | #teach #main .btn{ 910 | margin: 0px; 911 | } 912 | 913 | #teach-instructions { 914 | background-image: url('../img/fake-instructions.png'); 915 | padding-top: 150px; 916 | } 917 | 918 | .three-columns { 919 | width: 30%; 920 | } 921 | 922 | .three-column-spacer { 923 | margin-right: 3%; 924 | } 925 | 926 | 927 | 928 | 929 | #loading { 930 | height: 390px; 931 | } 932 | 933 | #about section a { 934 | color: #FF4000; 935 | } 936 | 937 | .text-overlay{ 938 | color: #FFF !important; 939 | font-weight: 700; 940 | position: absolute; 941 | top: 200px; 942 | } 943 | 944 | #about section { 945 | position: relative; 946 | top: -75px; 947 | } 948 | 949 | #lesson .bottom_links { 950 | height: auto; 951 | } 952 | 953 | .bottom_links a:hover { 954 | color: #0F6095; 955 | } 956 | 957 | .bottom_links li { 958 | color: #FFF; 959 | } 960 | 961 | #footer-menu { 962 | background-color: #585b5b; 963 | font-weight: 700; 964 | margin-top: 25px; 965 | height: 33px; 966 | color: #FFF; 967 | } 968 | 969 | footer a { 970 | color: #FFF; 971 | } 972 | 973 | #credits { 974 | font-size: 12px; 975 | font-weight: 400; 976 | text-align: right; 977 | } 978 | 979 | #credits img { 980 | width: 55px; 981 | } 982 | 983 | footer a:hover { 984 | text-decoration: none; 985 | color: #74BBD4; 986 | } 987 | 988 | #instructions { 989 | width: 340px; 990 | overflow-x:hidden; 991 | } 992 | 993 | #instructions .col-6{ 994 | padding-left: 0px; 995 | } 996 | 997 | #share { 998 | margin-top: 20px; 999 | } 1000 | 1001 | #next { 1002 | -webkit-animation-duration: 1.5s; 1003 | -webkit-animation-iteration-count: infinite; 1004 | -moz-animation-duration: 1.5s; 1005 | -moz-animation-iteration-count: infinite; 1006 | -ms-animation-duration: 1.5s; 1007 | -ms-animation-iteration-count: infinite; 1008 | -o-animation-duration: 1.5s; 1009 | -o-animation-iteration-count: infinite; 1010 | } 1011 | 1012 | #bf_ribbon { 1013 | margin-top: 40px; 1014 | margin-left: 135px; 1015 | height: 35px; 1016 | background-color: #585b5b; 1017 | } 1018 | 1019 | .progress-dots { 1020 | text-align: center; 1021 | } 1022 | 1023 | .progress-dots .unfinished { 1024 | background-image: url('../img/unfinished_dot.png'); 1025 | height: 15px; 1026 | width: 15px; 1027 | } 1028 | 1029 | .progress-dots .active { 1030 | background-image: url('../img/active_dot.png'); 1031 | height: 30px; 1032 | width: 30px; 1033 | color: #FFF; 1034 | } 1035 | 1036 | .progress-dots .active h2 { 1037 | position: relative; 1038 | top: 5px; 1039 | /*left: 15px;*/ 1040 | } 1041 | 1042 | .progress-dots .finished { 1043 | background-image: url('../img/finished_dot.png'); 1044 | height: 15px; 1045 | width: 15px; 1046 | } 1047 | 1048 | .progress-dots li { 1049 | margin-right: 5px; 1050 | vertical-align: middle; 1051 | } 1052 | 1053 | 1054 | section .btn{ 1055 | margin-bottom: 10px; 1056 | } 1057 | 1058 | .tooltip { 1059 | background-color: #FFF; 1060 | } 1061 | 1062 | 1063 | 1064 | .step_text #popover { 1065 | color: #ff4000; 1066 | } 1067 | 1068 | .step_text #popover:hover { 1069 | color: #ff4000; 1070 | } 1071 | 1072 | .feedback{ 1073 | display: none; 1074 | margin: 15px auto; 1075 | width: 260px; 1076 | } 1077 | 1078 | .feedback 1079 | 1080 | { 1081 | color: #79C040; 1082 | } 1083 | 1084 | .feedback .responseDisplay { 1085 | color: #ff4000; 1086 | font-size: 14px; 1087 | font-weight: 700; 1088 | } 1089 | 1090 | .feedback span { 1091 | color: #ff4000; 1092 | } 1093 | 1094 | .orange { 1095 | color: #ff4000; 1096 | } 1097 | 1098 | .blue { 1099 | color: #74BBD4; 1100 | } 1101 | 1102 | .green { 1103 | color: #79c040; 1104 | } 1105 | 1106 | #congrats { 1107 | display: none; 1108 | width: 260px; 1109 | text-align: center; 1110 | margin: 0 auto; 1111 | } 1112 | 1113 | #congrats h3 { 1114 | font-size: 18px; 1115 | line-height: 20px; 1116 | font-weight: 700; 1117 | } 1118 | 1119 | #controls { 1120 | width: 125px; 1121 | margin: 0 auto; 1122 | } 1123 | 1124 | #teach-controls { 1125 | width: 125px; 1126 | position: absolute; 1127 | bottom: 60px; 1128 | left: 105px; 1129 | } 1130 | 1131 | #close-lesson-wrapper { 1132 | /*width: 145px;*/ 1133 | } 1134 | 1135 | #instructions footer { 1136 | height: 15px; 1137 | } 1138 | 1139 | #rating { 1140 | background: #74BBD4; 1141 | } 1142 | 1143 | #signin a:hover { 1144 | color: #74BBD4; 1145 | } 1146 | 1147 | #rating { 1148 | background: #74BBD4; 1149 | width: 280px; 1150 | height: 40px; 1151 | position: relative; 1152 | top: -100px; 1153 | right: -310px; 1154 | padding-left: 35px; 1155 | border-radius: 25px; 1156 | } 1157 | 1158 | #rating-handle { 1159 | position: absolute; 1160 | top: 10px; left: 10px; 1161 | border-radius: 25px; 1162 | } 1163 | 1164 | #rating-content { 1165 | background: #74BBD4; 1166 | color: #FFF; 1167 | border-radius: 25px; 1168 | } 1169 | 1170 | #rating-form .form-group { 1171 | padding-left : 15px; 1172 | } 1173 | 1174 | .center { 1175 | text-align: center; 1176 | } 1177 | 1178 | #connect #left-column { 1179 | min-width:330px; 1180 | } 1181 | 1182 | #top-learners a, #top-teachers a, #latest-activity a { 1183 | font-weight: 700; 1184 | text-decoration: underline; 1185 | } 1186 | 1187 | #profile-info { 1188 | background-color: #C7E4EE; 1189 | color: #0F6095; 1190 | border-radius: 15px; 1191 | padding: 10px; 1192 | margin-bottom: 15px; 1193 | } 1194 | 1195 | #fb-plugin-box { 1196 | background-color: #C7E4EE; 1197 | color: #0F6095; 1198 | border-radius: 15px; 1199 | padding: 10px; 1200 | min-width:330px; 1201 | } 1202 | 1203 | #profile-info .location, #profile-info .biz-name { 1204 | font-size : 14px; 1205 | font-family: 'Open Sans'; 1206 | font-weight: 700; 1207 | } 1208 | 1209 | /*#profile-info .biz-name, #profile-social-links, #profile-info .profile-description { 1210 | position: relative; 1211 | top: -15px; 1212 | }*/ 1213 | 1214 | #profile-info .profile-description a{ 1215 | text-decoration: underline; 1216 | font-size: bold; 1217 | } 1218 | 1219 | #profile-social-links { 1220 | margin-bottom: 15px; 1221 | } 1222 | 1223 | #profile-info #profile-social-links a { 1224 | margin-right : 15px; 1225 | } 1226 | 1227 | #fb-plugin { 1228 | background-color: #FFF; 1229 | } 1230 | 1231 | 1232 | #profile-activity { 1233 | margin-left: 25px; 1234 | } 1235 | 1236 | #profile-activity h1, #leader-boards h1, #latest-activity h1 { 1237 | text-align: center; 1238 | background-color: #FFC9AE; 1239 | color: #ff4000; 1240 | line-height: 48px; 1241 | border-radius: 15px; 1242 | } 1243 | 1244 | #edit-profile legend { 1245 | color: #ff4000; 1246 | font-size: 24px; 1247 | font-weight: 700; 1248 | } 1249 | 1250 | #latest-activity { 1251 | padding-top: 25px; 1252 | } 1253 | 1254 | #recent-activity { 1255 | margin-left: 25px; 1256 | font-weight: 700; 1257 | } 1258 | 1259 | #recent-activity hr { 1260 | margin-bottom: 10px; 1261 | } 1262 | 1263 | .activity{ 1264 | /*height : 150px;*/ 1265 | padding-bottom: 15px; 1266 | } 1267 | 1268 | #accomplishments { 1269 | text-align: center; 1270 | font-weight: 700; 1271 | font-size: 14px; 1272 | font-family: 'Open Sans'; 1273 | color: #004E84; 1274 | } 1275 | 1276 | .activity-number { 1277 | font-size: 48px; 1278 | color: #79C040; 1279 | } 1280 | 1281 | #services-learned { 1282 | /*text-align: left;*/ 1283 | } 1284 | 1285 | #services-created h3 { 1286 | font-family: 'Open Sans'; 1287 | font-size: 14px; 1288 | font-weight: 700; 1289 | } 1290 | 1291 | .service-learned a{ 1292 | color: #004E84; 1293 | text-decoration: underline; 1294 | } 1295 | 1296 | .teach-top h2 { 1297 | color: #FF4000; 1298 | text-align: center; 1299 | } 1300 | 1301 | .teach-bottom h2 { 1302 | text-align: center; 1303 | color: #0F6095; 1304 | } 1305 | 1306 | #teach-landing #main hr { 1307 | margin: 20px; 1308 | } 1309 | 1310 | #teach-landing #main ul { 1311 | list-style: disc; 1312 | } 1313 | 1314 | #teach-landing #main li { 1315 | margin-left: 15px; 1316 | } 1317 | 1318 | #teach-landing #main .description { 1319 | color: #FF4000; 1320 | font-weight: 700; 1321 | font-family: 'Open Sans'; 1322 | } 1323 | 1324 | .teach-top { 1325 | background-color: #FFC9AE; 1326 | border-radius: 15px; 1327 | padding-top: 16px; 1328 | padding-bottom: 16px; 1329 | min-height: 425px; 1330 | margin-bottom: 15px; 1331 | } 1332 | 1333 | .teach-bottom { 1334 | background-color: #C7E4EE; 1335 | border-radius: 15px; 1336 | padding-top:16px; 1337 | padding-bottom: 16px; 1338 | min-height: 225px; 1339 | margin-bottom: 15px; 1340 | } 1341 | 1342 | .teach-top a, .teach-bottom a { 1343 | margin: 15px auto; 1344 | white-space: normal; 1345 | } 1346 | 1347 | .teach-top, .teach-bottom { 1348 | margin-right: 25px; 1349 | } 1350 | 1351 | #teaching-guide h2, #about-page h2 { 1352 | color: #79C040; 1353 | } 1354 | 1355 | #teaching-guide #main ul, #teaching-guide #subheader ul, #about-page ul { 1356 | padding-left: 35px; 1357 | list-style: disc; 1358 | } 1359 | 1360 | #teaching-guide #tg-nav ul, 1361 | #about-page #tg-nav ul { 1362 | list-style: none; 1363 | } 1364 | 1365 | #teaching-guide .padded-img { 1366 | padding-bottom: 25px; 1367 | } 1368 | 1369 | #teaching-guide #main a { 1370 | text-decoration: underline; 1371 | } 1372 | /*modified*/ 1373 | #about-page #subheader a { 1374 | text-decoration: underline; 1375 | } 1376 | 1377 | #new-service input { 1378 | margin-bottom: 10px; 1379 | } 1380 | 1381 | legend { 1382 | font-family: 'Open Sans'; 1383 | font-weight: 700; 1384 | color: #0F6095; 1385 | font-size: 18px; 1386 | } 1387 | 1388 | label { 1389 | font-family: 'Open Sans'; 1390 | font-weight: 700; 1391 | color: #0F6095; 1392 | font-size: 14px; 1393 | } 1394 | 1395 | #about-page #main hr {margin-bottom: 10px;} 1396 | #about-page #main h2 {margin-bottom: 10px;} 1397 | 1398 | /* bootstrap additions */ 1399 | .alert-success a{ 1400 | color: #FF4000; 1401 | } 1402 | 1403 | .back-to-top {text-align: right;} 1404 | 1405 | .back-to-top + p { 1406 | border-top: solid 1px #BFBFBF; 1407 | padding-top: 10px; 1408 | margin-top: -10px; 1409 | } 1410 | 1411 | .back-to-top a { 1412 | margin-right: 20px; 1413 | padding-top: -20px; 1414 | background: #fff; 1415 | padding: 0px 10px 0px 10px; 1416 | text-decoration: none; 1417 | } 1418 | 1419 | media (max-width: 1200px) { 1420 | .teach-top { 1421 | min-height: 480px; 1422 | } 1423 | .teach-bottom { 1424 | min-height: 255px; 1425 | } 1426 | } 1427 | 1428 | @media (max-width: 990px) { 1429 | .teach-top { 1430 | min-height: 575px; 1431 | } 1432 | .teach-bottom { 1433 | min-height: 300px; 1434 | } 1435 | } 1436 | 1437 | @media (max-width: 786px) { 1438 | .teach-top { 1439 | min-height: 585px; 1440 | } 1441 | .teach-bottom { 1442 | min-height: 355px; 1443 | } 1444 | } 1445 | 1446 | @media (max-width: 768px) { 1447 | .teach-top { 1448 | min-height: 330px; 1449 | } 1450 | .teach-bottom { 1451 | min-height: 170px; 1452 | } 1453 | } 1454 | /*Modifications included on 25th April 2015*/ 1455 | #category-left a:hover{ 1456 | color: #990066; 1457 | 1458 | } 1459 | #category-right a:hover{ 1460 | color: #990066; 1461 | 1462 | } 1463 | #teach-landing #subheader a:hover{ 1464 | color:#990066; 1465 | 1466 | } 1467 | #teaching-guide #subheader a{ 1468 | text-decoration:underline; 1469 | } 1470 | #teaching-guide #main a:hover{ 1471 | text-decoration:underline; 1472 | color:#990066; 1473 | } 1474 | #connect #main a:hover{ 1475 | color: #990066; 1476 | } 1477 | .back-to-top a:hover{ 1478 | color: #990066; 1479 | } 1480 | #teach-callout a:hover{ 1481 | color: #990066; 1482 | } 1483 | #about-page #subheader a:hover{ 1484 | color: #990066; 1485 | } 1486 | #about-page #main a:hover{ 1487 | color: #990066; 1488 | } 1489 | #teach-header #subheader a:hover ,#new-service #subheader a:hover,#new-category #subheader a:hover{ 1490 | 1491 | color: #990066; 1492 | } 1493 | #main #additional-resources a:hover{ 1494 | color: #990066; 1495 | } --------------------------------------------------------------------------------