egghead-styles 1.0.29

data/app/assets/stylesheets/shared/_miscellaneous.scss

@@ -0,0 +1,7 @@
+/* Miscellaneous */
+
+// Avatars
+.avatar {
+  border-radius: 50%;
+  width: 140px;
+}

data/app/assets/stylesheets/shared/_pagination.scss

@@ -0,0 +1,80 @@
+/* Pagination */
+
+.pagination {
+  font-size: 16px;
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  > li {
+    > a, span {
+      line-height: 34px;
+      min-width: 40px;
+      text-align: center;
+      color: $link-color;
+      border-color: $pagination-links-border-color;
+      @include respond-to(phones) {
+        min-width: 34px;
+        line-height: 26px;
+        padding: 6px;
+      }
+    }
+    &.active {
+      > a, > a:focus, > span {
+        background: none $site-color-grey;
+        border-color: $pagination-links-border-color;
+        color: $site-color-light-graphite;
+        box-shadow: 2px 2px 3px $pagination-links-border-color inset;
+        &:hover {
+          cursor: default;
+          background: none $site-color-grey;
+          border-color: $pagination-links-border-color;
+          color: $site-color-light-graphite;
+        }
+      }
+    }
+  }
+  .direction-title {
+    @include respond-to(phones) {
+      display: none;
+    }
+  }
+  .direction-icon {
+    font-size: 12px;
+    position: relative;
+    top: -1px;
+  }
+  .next,
+  .prev {
+    > a {
+      color: $site-color-blue-calypso;
+      @include respond-to(phones) {
+        min-width: 40px;
+      }
+    }
+  }
+  .prev {
+    .direction-icon {
+      margin-right: 7px;
+      @include respond-to(phones) {
+        margin-right: 0;
+      }
+    }
+  }
+  .next {
+    .direction-icon {
+      margin-left: 7px;
+      @include respond-to(phones) {
+        margin-left: 0;
+      }
+    }
+  }
+  > .disabled {
+    > span {
+      color: $site-color-light-graphite;
+      &:hover {
+        color: $site-color-light-graphite;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/shared/_styles.css.scss

@@ -0,0 +1,1373 @@
+/* GENERAL styles */
+.section {
+  padding: 50px 0;
+  @include respond-to(tablets-small) {
+      padding: 40px 0;
+  }
+  @include respond-to(tablets-small) {
+      padding: 30px 0;
+  }
+  @include respond-to(phones) {
+      padding: 20px 0;
+  }
+  &.section-even {
+      background-color: $section-even-bg;
+  }
+}
+
+.clearfix-row {
+    @extend .clearfix;
+    margin-bottom: 30px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+}
+
+.with-gap,
+.with-gap:last-child {
+    margin-bottom: 30px !important;
+}
+
+.title-subtitle-block {
+	margin-bottom: 45px;
+	text-align: center;
+	@include respond-to(tablets-small) {
+		margin-bottom: 35px;
+	}
+	@include respond-to(phones) {
+		margin-bottom: 25px;
+	}
+	.title {
+      margin-bottom: 15px;
+      color: $site-color-dark-graphite;
+      font-size: 40px;
+      @include respond-to(tablets-small) {
+        font-size: 30px;
+      }
+      @include respond-to(phones) {
+        font-size: 22px;
+      }
+	}
+	.subtitle {
+		margin-bottom: 0;
+		color: $site-color-medium-graphite;
+		a {
+			color: $site-color-medium-graphite;
+			&:hover {
+				color: $site-color-dark-graphite;
+			}
+		}
+	}
+}
+
+//Vartical align help classes
+.vertical-top {
+    vertical-align: top !important;
+}
+.vertical-middle {
+    vertical-align: middle !important;
+}
+.vertical-bottom {
+    vertical-align: bottom !important;
+}
+
+//Like-table blocks
+.block-table {
+    display: table;
+    width: 100%;
+    font-size: 0;
+    &.block-table-fixed {
+        table-layout: fixed;
+    }
+}
+.block-table-cell {
+    font-size: $body-font-size;
+    display: table-cell;
+    padding-left: 5px;
+    padding-right: 5px;
+    &[class*='xs-'] {
+        @include respond-to(phones) {
+            display: block;
+            display: inline-block;
+        }
+    }
+    &.xs-4 {
+        @include respond-to(phones) {
+            width: 33.33333%;
+        }
+    }
+    &.xs-6 {
+        @include respond-to(phones) {
+            width: 50%;
+        }
+    }
+}
+
+.logo-holder {
+  margin: 30px auto 40px auto;
+  text-align: center;
+  img {
+    padding: 5px;
+  }
+}
+
+.tab-content > .tab-pane {
+    visibility: visible;
+}
+
+.alert {
+    color: $site-color-white;
+    font-size: $body-font-size;
+    line-height: 22px;
+    padding: 20px;
+    &.green {
+        background: $site-color-green-dim;
+    }
+    button.close {
+        color: rgba($site-color-black, 0.5);
+        float: right;
+        height: 22px;
+        opacity: 1.0;
+        line-height: 22px;
+        text-shadow: none;
+        font-size: 20px;
+        .icon {
+            font-size: 20px;
+            line-height: 22px;
+            vertical-align: middle;
+        }
+    }
+}
+
+/* MISCELLANEOUS */
+.mb-mobile {
+    @include respond-to(phones) {
+        margin-bottom: 20px;
+    }
+}
+
+/* File Input styles */
+.file-input-name {
+    font-weight: 600;
+    margin-left: 25px;
+}
+
+.delete-link {
+    text-decoration: none;
+    color: $site-color-light-graphite;
+    &:hover {
+        color: $site-color-red;
+    }
+}
+
+/* STATUS BAR styles */
+.section-status-bar {
+    padding: 15px;
+    color: $site-color-white;
+    @extend .clearfix;
+    .part-left {
+        float: left;
+        padding: 9px 0;
+        @include respond-to(tablets-small) {
+            margin-bottom: 15px;
+        }
+        @include respond-to(phones) {
+            margin-bottom: 5px;
+        }
+    }
+    .part-right {
+        float: right;
+    }
+    .part-left,
+    .part-right {
+        @include respond-to(tablets-small) {
+            float: none;
+            text-align: center;
+        }
+    }
+    &.status-bar-red {
+        background: $site-color-red;
+    }
+    &.status-bar-green {
+        background: $site-color-green-dim;
+    }
+    .lesson-actions {
+        position: relative;
+        font-size: 22px;
+        color: rgba($site-color-black, 0.6);
+        margin: 0 12px;
+        vertical-align: middle;
+        @include respond-to(tablets-small) {
+            margin: 0 10px;
+        }
+        &:hover {
+            color: rgba($site-color-black, 0.9);
+        }
+    }
+    .lesson-status-title {
+        vertical-align: middle;
+        margin-left: 20px;
+        &:before {
+            content: 'Lesson status:';
+            margin-right: 5px;
+        }
+        @include respond-to(tablets-small) {
+            margin-left: 10px;
+        }
+        @include respond-to(phones) {
+            display: block;
+            margin-top: 15px;
+            margin-left: 0;
+        }
+    }
+}
+
+.search-field-holder {
+  position: relative;
+  box-shadow: none;
+    margin-bottom: 40px;
+    &:last-child {
+        margin-bottom: 0;
+    }
+  //margin-bottom: 50px;
+  .input-search {
+    border-radius: 0;
+    padding: 9px 40px 9px 15px;
+        border: 1px solid $site-color-silver;
+    height: 40px;
+    font-size: 16px;
+        line-height: 22px;
+        @include custom-placeholder($color: $site-color-dusty-gray, $font-size: 16px, $line-height: 22px);
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  .btn-submit {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    right: 0;
+    top: 0;
+    z-index: 10;
+    border: none;
+    text-align: center;
+    background: none;
+    color: $site-color-red;
+  }
+}
+
+.colored-box {
+	padding: 30px;
+	margin-bottom: 40px;
+    color: $body-font-color;
+    line-height: $body-line-height;
+    @extend .clearfix;
+    &:last-child {
+        margin-bottom: 0;
+    }
+	@include respond-to(phones) {
+		padding: 15px;
+		margin-bottom: 25px;
+	}
+    &.small-padding {
+        padding: 20px;
+        @include respond-to(phones) {
+            padding: 10px;
+            margin-bottom: 20px;
+        }
+    }
+	&.grey {
+		background-color: $site-color-grey;
+	}
+    &.green {
+        background-color: $site-color-green-dim;
+    }
+	&.light-blue {
+		background-color: $site-color-blue-light;
+	}
+}
+
+.related-lessons-list {
+    margin-bottom: 0;
+    @extend .list-unstyled;
+    > li {
+        margin-bottom: 5px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+    .related-lesson-logo {
+        height: 34px;
+        margin-right: 15px;
+        float: left;
+    }
+    .custom-checkbox {
+        .icon-holder {
+            margin-top: 7px;
+        }
+        .checkbox-icon {
+            width: 20px;
+            height: 20px;
+            line-height: 18px;
+            &:before {
+                font-size: 14px;
+            }
+        }
+        input[type='checkbox'] {
+            &:checked {
+                ~ .lesson-title {
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+    .label-text {
+        margin-top: 5px;
+    }
+    .lesson-title {
+        display: inline-block;
+        vertical-align: middle;
+        white-space: pre-line;
+    }
+}
+
+
+
+/* LISTS */
+.animated-list {
+    > li {
+    }
+}
+
+.list-related-lessons {
+    padding: 0;
+    list-style: none;
+    margin-bottom: 20px;
+    > li {
+        overflow: hidden;
+        padding: 7px 20px;
+        margin-bottom: 2px;
+        background: $site-color-grey;
+        &:last-child {
+            margin-bottom: 0;
+        }
+        @extend .clearfix;
+    }
+    .lesson-logo {
+        height: 34px;
+        float: left;
+        margin-right: 15px;
+    }
+    .btn-close {
+        float: right;
+        margin-left: 15px;
+        color: $site-color-boulder;
+        &:hover,
+        &:focus {
+            text-decoration: none;
+        }
+        .icon {
+            vertical-align: middle;
+            font-size: 20px;
+            line-height: 34px;
+        }
+    }
+    .lesson-title {
+        line-height: 18px;
+        padding: 8px 0;
+        margin: 0;
+        @include respond-to(phones) {
+            padding: 0;
+        }
+    }
+}
+
+.item-holder {
+	@include respond-to(phones) {
+		max-width: 360px;
+		margin: 0 auto 40px auto;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.media-holder {
+	position: relative;
+}
+
+.media-subscription-holder {
+	margin-top: 20px;
+	position: relative;
+	.title {
+		margin-bottom: 10px;
+		line-height: 1.3em;
+	}
+	.description {
+		margin-bottom: 10px;
+		display: block;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.info-line {
+	margin-bottom: 10px;
+	line-height: 0;
+	font-size: 0;
+	&:last-child {
+		margin-bottom: 0;
+	}
+	small {
+		margin-left: 10px;
+		color: $site-color-light-graphite;
+        font-size: 16px;
+        line-height: 1.3em;
+        @include respond-to(tablets-small) {
+          font-size: 14px;
+        }
+        @include respond-to(phones) {
+          font-size: 13px;
+        }
+		&:first-child {
+			margin-left: 0;
+		}
+	}
+    .update-date {
+        font-size: 10px;
+    }
+	a {
+		@extend .underlined;
+		color: inherit;
+		&:hover {
+			color: inherit;
+		}
+	}
+    .custom-label {
+        color: #fff;
+        text-decoration: none;
+        &:hover {
+            color: #fff;
+        }
+    }
+    &.with-separator {
+        small {
+          margin-left: 5px;
+          &+ small {
+            &:before {
+              margin-right: 5px;
+              content: '\BB';
+            }
+          }
+        }
+    }
+}
+
+.buttons-holder {
+    @extend .clearfix;
+    .custom-btn {
+        margin-right: 30px;
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .actions-holder {
+        margin-right: 15px;
+        &:first-child {
+            margin-left: 0;
+        }
+        @include respond-to(tablets-small) {
+            margin-right: 10px;
+        }
+        @include respond-to(phones) {
+            display: block;
+            margin-top: 15px;
+        }
+        @include respond-to(phones) {
+            margin-right: 0;
+        }
+        .custom-btn {
+            margin-right: 0;
+        }
+    }
+    .action {
+        margin-right: 10px;
+        color: $site-color-medium-graphite;
+        font-size: 16px;
+    }
+}
+
+.admin-buttons-holder {
+  text-align: right;
+  .custom-btn + .custom-btn {
+    margin-left: 30px;
+  }
+}
+
+.lesson-description-holder {
+	margin-bottom: 60px;
+    .info-line {
+        margin-bottom: 15px;
+    }
+    .description-text-holder {
+        margin-bottom: 15px;
+    }
+}
+
+/* BANNERS */
+.banner-holder {
+	.logos-holder {
+		margin-bottom: 15px;
+	}
+	.img-holder {
+		&:not(:last-child):after {
+			content: '+';
+			margin: 0 5px;
+			line-height: 50px;
+			font-size: 20px;
+			font-weight: 600;
+		}
+		img {
+			height: 50px;
+		}
+    .big-img {
+      height: 80px;
+    }
+	}
+}
+
+.announce-banner-holder {
+    .content {
+        @extend .clearfix;
+        @extend .media;
+        margin-top: 0;
+    }
+    .left-part {
+        float: left;
+        margin-right: 40px;
+    }
+    .content-body {
+        @extend .media-body;
+    }
+    .title {
+        margin-top: 10px;
+    }
+}
+
+.nav-tabs {
+  border-bottom: 2px solid $site-color-blue;
+  padding-left: 10px;
+  margin-bottom: 20px;
+  &.sticky {
+    margin-bottom: 0;
+  }
+  > li {
+    > a {
+      background: $tab-bg;
+      color: $tab-color;
+      border: none;
+      padding: 10px 20px;
+      font-weight: 600;
+      &:hover {
+        background: $tab-bg-active;
+        color: $tab-color-active;
+      } 
+    }
+    &.active {
+      > a, a:hover, a:focus {
+        background: $tab-bg-active;
+        color: $tab-color-active;
+        border: none;
+      }
+    }
+  }
+}
+//.tabs-holder {
+//  .tab-pane {
+//    padding: 35px 30px;
+//    background: none $tab-pane-bg;
+//    @include respond-to(phones) {
+//      padding: 15px;
+//    }
+//  }
+//}
+.tab-pane-code {
+    padding: 0 0 !important;
+    @include respond-to(phones) {
+      padding: 15px;
+  }
+}
+
+.share-lesson-holder {
+  padding-top: 10px;
+}
+
+.section-lesson {
+  padding: 30px 0;
+	.part-left {
+		@include respond-to(tablets-small) {
+			margin-bottom: 25px;
+		}
+	}
+	.part-right {
+		.series-lessons-holder {
+			margin-top: 35px;
+			margin-bottom: 35px;
+		}
+	}
+}
+
+.section-learn-these-tools {
+	.item {
+		text-align: center;
+		margin-bottom: 40px;
+		@include respond-to(phones) {
+            max-width: 290px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+		.logo-holder {
+			height: 200px;
+      opacity: 0.8;
+			background: $site-color-grey;
+			margin-bottom: 20px;
+			position: relative;
+      @include box-shadow(rgba(black, 0.3) 1px 1px 1px);
+      &:hover {
+        @include transition(75ms);
+        opacity: 1;
+        background: $site-color-light-grey;
+        @include box-shadow(rgba(black, 0.4) 2px 2px 4px);
+        @include transform(scale(1.01));
+      }
+      @include respond-to(tablets-small) {
+                height: 100px;
+            }
+            @include respond-to(phones) {
+            	margin-bottom: 10px;
+            }
+			.tech-logo {
+        height: 110px;
+        width: auto;
+        margin-top: 40px;
+        @include respond-to(tablets-small) {
+          height: 83px;
+          margin-top: 9px;
+        }
+      }
+		}
+	}
+}
+
+.faq-holder {
+    .title {
+        margin-bottom: 5px;
+    }
+}
+
+.browse-all-lessons-holder {
+	line-height: 34px;
+
+  .playlist-edit {
+    @extend a;
+    border: none;
+    background: transparent;
+  }
+
+	.block-lessons {
+		margin-bottom: 40px;
+		@include respond-to(phones) {
+        	margin-bottom: 20px;
+        }
+	}
+	.tab-view-tiles {
+		.item {
+			&:before {
+				position: absolute;
+				content: '';
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background: none;
+			}
+			&.lesson-watched {
+                &:before {
+                    z-index: 10;
+                    background: rgba(255, 255, 255, 0.6);
+                }
+				.overlay {
+					background: rgba(0, 0, 0, 0.4);
+				}
+			}
+		}
+	}
+	.tab-view-list {
+		.title {
+			margin-bottom: 0;
+		}
+		.pseudo-checkbox-holder {
+			margin: 0;
+            &:hover {
+                cursor: pointer;
+            }
+        }
+		.lesson-row {
+            > td {
+                position: relative;
+                &:before {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    top: 0;
+                    background: none;
+                }
+            }
+            &:hover {
+                background-color: $site-color-light-grey;
+                cursor: pointer;
+            }
+            &.lesson-watched {
+                > td {
+                    &:before {
+                        z-index: 10;
+                        background: rgba(255, 255, 255, 0.6);
+                    }
+                }
+            }
+	   }
+    	.category-logo {
+    		width: auto;
+    		height: 32px;
+    		display: block;
+    		position: relative;
+    	}
+	}
+}
+
+.tool-bar {
+    @include clearfix();
+    margin-bottom: 30px;
+    padding: 10px 20px;
+    min-height: 54px;
+    background: none $site-color-grey;
+    @include respond-to(phones) {
+        text-align: center;
+    }
+    .items-list {
+        margin: 0;
+        padding: 0;
+        > li {
+            vertical-align: middle;
+            display: inline-block;
+            margin-left: 40px;
+            &:first-child {
+                margin-left: 0;
+            }
+            &.search-filter-holder {
+                @include respond-to(tablets-small) {
+                    display: block;
+                    margin-bottom: 10px;
+                }
+            }
+            @include respond-to(phones) {
+                display: block;
+                margin-bottom: 10px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+    .actions-list {
+        margin: 0;
+        padding: 6px 0;
+        float: left;
+        @include respond-to(phones) {
+            padding: 0;
+            float: none;
+            margin-bottom: 10px;
+        }
+        .filter-trigger {
+            color: $site-color-medium-graphite;
+            @extend .underlined;
+            &.active {
+                font-weight: 700;
+                cursor: default;
+                text-decoration: none;
+            }
+        }
+    }
+    .show-completed-checkbox-holder {
+        padding: 5px 0;
+        @include respond-to(phones) {
+            float: none;
+            margin-left: 0;
+            margin-bottom: 10px;
+        }
+        label {
+            margin-bottom: 0;
+            padding-left: 23px;
+            position: relative;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 1.4em;
+            color: $site-color-medium-graphite;
+        }
+        input[type='checkbox'] {
+            position: absolute;
+            left: -9999px;
+            visibility: hidden;
+            & ~ .pseudo-checkbox {
+                @include icon-FontAwesome();
+                @extend .icon-check-empty;
+                position: absolute;
+                left: 0;
+                font-size: 16px;
+                line-height: 1.4em;
+                cursor: pointer;
+            }
+            &:checked {
+                & ~ .pseudo-checkbox {
+                    @extend .icon-check;
+                }
+            }
+        }
+    }
+    .view-switchers-holder {
+        float: right;
+        margin-top: 7px;
+        @include respond-to(phones) {
+            float: none;
+            display: inline-block;
+            margin-bottom: 4px;
+            margin-top: 0;
+        }
+    }
+    .btn-view-switcher {
+        color: $site-color-medium-graphite;
+        font-weight: 400;
+        .icon {
+            line-height: 20%;
+            &:before {
+                vertical-align: middle;
+            }
+        }
+    }
+  .lessons-to-show-holder {
+    float: right;
+    margin-right: 30px;
+    margin-top: 6px;
+    white-space: nowrap;
+    .chosen-container {
+      max-width: 80px;
+      display: inline-block;
+    }
+  }
+}
+
+.cell-pseudo-checkbox {
+    text-align: center;
+    width: 50px;
+    .pseudo-checkbox {
+        margin-right: 0;
+        vertical-align: middle;
+    }
+}
+.cell-category-logo {
+    width: 50px;
+}
+.cell-admin-action {
+    width: 100px;
+    text-align: center;
+    a {
+        margin: 0 10px;
+        display: inline-block;
+        text-decoration: none;
+        &:hover {
+            text-decoration: none;
+            color: $site-color-red;
+        }
+    }
+}
+.pseudo-checkbox-holder {
+    margin-right: 5px;
+    display: inline-block;
+}
+
+.pseudo-checkbox {
+    @include icon-FontAwesome();
+    @extend .icon-check-empty;
+    line-height: 1.3em;
+    font-size: 18px;
+    height: 1px;
+    &:before {
+        vertical-align: middle;
+    }
+}
+.lesson-watched {
+    .pseudo-checkbox {
+        @extend .icon-check;
+        color: $site-color-green;
+    }
+}
+
+.table-responsive > .table > tbody > tr > td {
+    @include respond-to(phones) {
+        white-space: normal;
+    }
+}
+
+.table {
+    > tbody {
+        > tr {
+            > td {
+                &.cell {
+                    padding-top: 12px;
+                    padding-bottom: 12px;
+                    position: relative;
+                    &.cell-pro {
+                        @include respond-to(phones) {
+                            padding-right: 10px;
+                        }
+                    }
+                }
+            }
+        } 
+    }
+}
+
+/* PRESENTED BY styles */
+.presented-by-holder {
+    @include respond-to(phones) {
+        margin-top: 15px;
+        text-align: center;
+    }
+    .title {
+        margin-bottom: 10px;
+    }
+    .portrait-holder {
+        width: 120px;
+        margin-bottom: 15px;
+        img {
+            width: 100%;
+        }
+        @include respond-to(phones) {
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+    .name {
+        margin-bottom: 15px;
+    }
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+//.comments {
+//  font-size: 14px;
+//}
+
+/* HOLIDAY PAGE styles */
+.logo-holiday-hat {
+  max-width: 300px;
+  margin: 0 auto 30px auto;
+  @include respond-to(tablets-small) {
+    max-width: 150px;
+  }
+  @include respond-to(phones) {
+    max-width: 75px;
+  }
+}
+
+.egghead-logo {
+  max-width: 250px;
+  @include respond-to(tablets-small) {
+    max-width: 150px;
+  }
+  @include respond-to(phones) {
+    max-width: 75px;
+  }
+}
+.egghead-logo-small {
+  max-width: 150px;
+  @include respond-to(tablets-large) {
+    max-width: 90px;
+  }
+  @include respond-to(tablets-small) {
+    max-width: 75px;
+  }
+  @include respond-to(phones) {
+    max-width: 75px;
+  }
+}
+
+.banner-left-img {
+ max-height: 100px;
+}
+
+[ng-cloak] {
+  display: none;
+}
+
+		.category-logo {
+			width: auto;
+			height: 32px;
+			display: block;
+			position: relative;
+		}
+
+body.dragging, body.dragging * {
+  cursor: move !important;
+}
+
+.dragged {
+  position: absolute;
+  opacity: 0.5;
+  z-index: 2000;
+}
+
+tr.placeholder:before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-left-color: red;
+    margin-top: -5px;
+    left: -5px;
+    border-right: none;
+}
+
+.instructor-avatar {
+  @extend .avatar;
+  margin-bottom: 30px;
+  border: 2px solid black;
+  @include respond-to(tablets-small) {
+    width: 120px;
+  }
+  @include respond-to(phones) {
+    width: 80px;
+  }
+}
+
+
+.errata-warn {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 4px;
+  padding-right: 4px;
+  color: #ffcb5d;
+  opacity: 0.8;
+}
+.errata {
+  margin-bottom: 40px;
+  .title {
+    color: $site-color-dark-graphite;
+    .icon {
+      vertical-align: middle;
+      color: $site-color-light-graphite;
+    }
+  }
+  p {
+    font-size: $body-font-size;
+    color: $body-font-color;
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .admin {
+    margin-top: 15px;
+  }
+}
+.no-underline {
+  text-decoration: none;
+}
+.red-dash-border {
+  border: dashed 2px #B95527;
+  background-color: #fffef0;
+}
+
+.centering {
+
+}
+
+.frontend-masters {
+  padding: 10px;
+  .btn-gold {
+    @extend .btn-primary;
+    background-color: #FFFF00;
+  }
+  h3 {
+    margin-top: 5px;
+  }
+}
+.content {
+    background-color: #fefefe;
+  padding-top: 10px;
+}
+
+.sign-up {
+  background-color: #f5f5f5;
+  margin-bottom: 10px;
+  padding: 8px;
+  border: 1px dashed #d4e3e6;
+}
+
+.padded {
+  margin-top: 10px;
+}
+
+.padded-well {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.twitter:hover {
+  text-decoration: none !important;
+}
+
+.twitter {
+  text-decoration: none !important;
+}
+
+.play-icon {
+  padding-left: 5px;
+}
+
+.check {
+  padding-right: 5px;
+}
+
+.footer {
+  padding-top: 5px;
+}
+
+.stars {
+  color: rgba(255, 244, 130, 0.85);
+  text-shadow: 1px 1px 1px #ccc;
+}
+
+.big-logo {
+  height: 125px;
+  width: auto;
+}
+
+/* Override the bootstrap style */
+
+
+
+.social-media-list li { display:block; float: left; width:13.3%; text-align:center; margin: 0 auto;}
+
+.twitter-widget-pad {
+  padding-left: 15px;
+}
+
+.light-text {
+  color: #666666;
+}
+
+.bundle-logo {
+  width: auto;
+  height: 200px;
+  padding: 10px;
+}
+
+.float-right {
+  float: right;
+}
+
+.guarantee {
+  width: 100px;
+  height: auto;
+  margin-right: 20px;
+}
+
+.guarantee-box {
+  padding: 10px;
+}
+
+.twitter-tweet {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.highlighter {
+  background-color: rgba(255,255,0,.65);
+  padding: 0 3px;
+  @include border-radius(2px);
+  display: inline-block;
+  z-index: -10;
+}
+
+.strike {
+  text-decoration: line-through;
+}
+
+.support-button {
+  background-color: #d9534f;
+  border-color: #d43f3a;
+  &:hover {
+    background-color: #d2322d;
+    border-color: #ac2925;
+  }
+  a {
+    color: #FFFFFF !important;
+  }
+}
+
+.img-centered {
+  margin: 0 auto;
+}
+
+.admin {
+  display: none;
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.editor {
+  display: none;
+}
+
+
+
+.footer {
+  padding-top: 20px;
+}
+
+.undecorated {
+  text-decoration: none !important;
+}
+
+.thumb_gen {
+  padding-top: 80px;
+  text-align: center;
+  font-family: "droid-sans-mono",sans-serif !important;
+  color: #0c0c0c !important;
+  .presents {
+    font-size: 18px;
+  }
+  .plus {
+    padding-top: 56px;
+  }
+  .title {
+    text-align: center;
+    font-size: 10px;
+  }
+//  .tech-logo {
+//    padding-left: 50px;
+//    padding-right: 30px;
+//  }
+//  .egghead-logo {
+//    padding-left: 30px;
+//    padding-right: 30px;
+//  }
+}
+
+.tech-footer {
+  background-color: #2a2a2a;
+  color: #e7e7e7;
+  padding: 50px;
+}
+
+/*
+ *= require autocomplete
+ *= require search
+ */
+
+form input.st-search-input {
+  height: 29px !important;
+  width: 180px !important;
+}
+
+.light-gray-background {
+  background-color: $gray-lighter;
+}
+
+.gray-border {
+  border: 1px solid $gray;
+}
+
+
+
+.info-icon {
+  color: $gray-light;
+  font-size: 1.2em;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.font-droid-sans {
+  font-family: "droid-sans-mono",sans-serif !important;
+}
+
+.big-st-search-input {
+  font-size: 1.6em;
+  padding: 5px 10px 5px 10px;
+  height: 55px;
+  width: 85%;
+  color: $gray-light;
+  border: 1px solid $gray-light;
+  outline: none;
+  line-height: normal;
+  @include border-radius(5px)
+}
+
+.search-icon {
+  color: $brand-primary;
+  font-size: 2.2em;
+  padding-right: 5px;
+}
+
+img.opacity {
+  opacity: 0.85;
+  filter: alpha(opacity=85);
+}
+
+img.opacity:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+
+.complete {
+  color: $brand-success;
+}
+
+.hero-row {
+  background-color: rgba(254, 241, 53, 0.04);
+  @include border-radius(10px);
+}
+
+
+
+.book-sales {
+  padding-bottom: 50px;
+}
+
+.enterprise-logo {
+  height: 50px;
+  width: auto;
+}
+
+[ng-cloak] {
+  display: none;
+}
+
+.circular-md {
+  width: 150px;
+  border-radius: 50%;
+}
+.circular-sm {
+  width: 75px;
+  border-radius: 50%;
+}