design pass in css to be more in line with the design

edivorce/apps/core/static/css/main.scss

@@ -6,11 +6,11 @@ $brand-blue: #042553;
 $brand-gold: #dea61b;
 
 $brand-titles: #19355b;
-$brand-links: #2b5580;
-$brand-buttons: #365ebe;
+$brand-links: #365ebe; //#2b5580;
+$brand-buttons: $brand-links;
 
 $color-blue-dark: $brand-titles;
-$color-blue-medium: $brand-links;
+$color-blue-medium: #2b5580;
 $color-blue-light: $brand-buttons;
 $color-blue-lighter: #d4dce5;
 
@@ -39,15 +39,30 @@ body {
     font-size: 16px;
     line-height: 24px;
     color: $body-copy;
-    background: #ffffff;
+		background: $brand-blue;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	min-width: 768px;
+
+	@media (min-width: 1680px) {
+		font-size: 18px;
+	}
 }
 
 h1,h2,h3,h4 {
     margin-top: 0px;
     margin-bottom: 10px;
+
+		.tooltip-link {
+			color: $brand-blue;
+			border: 0;
+		}
+
+		i.fa {
+			color: $brand-blue;
+			font-size: 24px;
+			margin-right: 6px;
+		}
 }
 
 h1 {
@@ -186,18 +201,17 @@ img {
 	}
 }
 
-.tooltip-arrow {
-	border-top-color: $brand-titles;
-}
 .tooltip.in {opacity: 1;}
 .tooltip-inner {
     text-align: left;
-    background-color: $brand-titles;
+    background-color: $brand-links;
     padding: 20px;
 	font-size: 16px;
 	line-height: 24px;
 	max-width: 300px;
 	border-radius: 10px;
+	font-family: $font-custom;
+
 	&b {
 		font-size: 18px;
 	}
@@ -210,18 +224,68 @@ img {
 	}
 }
 
+.tooltip-arrow {
+	pointer-events: none;
+	border-color: rgba(255,255,255,0);
+	border-width: 12px !important;
+}
+
+.tooltip {
+	&.top .tooltip-arrow {
+		border-top-color: $brand-links;
+		margin-bottom: -16px;
+	}
+
+	&.right {
+		margin-left: 10px;
+		.tooltip-arrow {
+			border-right-color: $brand-links;
+			margin-left: -12px;
+			margin-top: -14px;
+		}
+	}
+
+	&.bottom .tooltip-arrow {
+		border-bottom-color: $brand-links;
+		margin-top: -12px;
+	}
+
+	&.left {
+		margin-left: -10px;
+		.tooltip-arrow {
+			border-left-color: $brand-links;
+			margin-right: -12px;
+			margin-top: -14px;
+		}
+	}
+}
+
 .tooltip-link {
-    color: $brand-titles;
-    border-bottom: dotted 1px $brand-titles;
-	cursor: pointer;
+    color: $brand-links;
+    border-bottom: dotted 1px $brand-links;
+		cursor: pointer;
+		word-break: break-all;
+		display: inline-block;
+		&:hover {
+			color: $brand-blue;
+			border-bottom-color: $brand-links;
+		}
 }
 
 .collapse-trigger {
 	& > div {
-		color: $brand-titles;
-		border-bottom: solid 1px $brand-titles;
+		color: $color-blue-light;
+		border-bottom: solid 1px $color-blue-light;
 		display: inline;
 		cursor: pointer;
+
+		.tooltip-link {
+			border: 0;
+			&:hover {
+				color: inherit;
+			}
+		}
+
 		&:after {
 			font-family: FontAwesome;
 			font-weight: normal;
@@ -243,7 +307,7 @@ img {
 	      transition: all 0.1s ease-in-out;
 	    }
 	}
-	margin-bottom: 20px;
+	margin-bottom: 12px;
 	&.collapsed div:after {
 		-webkit-transform: rotate(-180deg);
 		        transform: rotate(-180deg);
@@ -259,11 +323,17 @@ img {
 	margin-bottom: 25px;
 }
 
+select.form-control {
+	font-size: 16px;
+	height: 42px;
+}
+
 .input-group input.form-control:first-child,
 .form-group input.form-control {
-	border-radius: 10px;
-	border-top-right-radius: 10px;
-	border-bottom-right-radius: 10px;
+	margin-top: 12px;
+	border-radius: 4px;
+	border-top-right-radius: 4px;
+	border-bottom-right-radius: 4px;
 	height: inherit;
 	width: inherit;
 	float: inherit;
@@ -278,6 +348,18 @@ img {
 
 /* Buttons & Icons*/
 
+.btn {
+	line-height: initial;
+	padding: 12px 15px;
+}
+
+.btn-primary {
+	background: $brand-buttons;
+	&:hover {
+		background-color: darken($brand-buttons, 20%);
+	}
+}
+
 i.fa {
 	color: $brand-links;
 	&.circle {
@@ -293,10 +375,9 @@ i.fa.fa-question-circle {margin-left: 5px;}
 	margin: 30px 0;
 	.btn {
 	    font-size: 18px;
-	    line-height: 32px;
 	    border: none;
 	    border-radius: 10px;
-	    padding: 6px 18px;
+	    padding: 12px 15px;
 	    background-color: $brand-buttons;
 	    color: #ffffff;
 		margin-bottom: 12px;
@@ -327,10 +408,11 @@ i.fa.fa-question-circle {margin-left: 5px;}
 .btn-radio {
 	color: $brand-titles;
 	background-color: $color-blue-lighter;
-	font-size: 18px;
+	font-size: 16px;
     text-transform: uppercase;
+		letter-spacing: 0.08em;
     font-weight: 600;
-	line-height: 45px;
+	padding: 20px 0;
 	width: 60px;
 	height: 60px;
 	border-radius: 30px;
@@ -346,7 +428,6 @@ i.fa.fa-question-circle {margin-left: 5px;}
 .open .dropdown-toggle.btn-radio {
 	color: #FFFFFF;
 	background-color: $brand-links;
-	border: 3px solid $brand-buttons;
 	-webkit-transition: all 0.1s ease-in-out;
 	transition: all 0.1s ease-in-out;
 }
@@ -407,7 +488,7 @@ fieldset[disabled] .btn-radio.active {
 /* Form Elements*/
 
 input {
-	border-radius: 10px;
+	border-radius: 4px;
     color: #494949;
     padding: 12px 15px;
 	border: solid 1px $color-grey-light;
@@ -434,6 +515,10 @@ input {
 	}
 }
 
+.checkbox label, .radio label {
+	margin-bottom: 8px;
+}
+
 textarea {
     width: 100%;
 	border-radius: 10px;
@@ -477,7 +562,7 @@ textarea {
 		color: #fff;
 		font-size: 14px;
 		float: right;
-		margin-top: 9px;
+		margin-top: 16px;
 		a {
 			color: #ffffff;
 			&:hover, &:active {
@@ -498,9 +583,9 @@ textarea {
 	.mid_banner-dash a,
 	.mid_banner-link a,
 	.more_information-link a {
-		padding: 10px 20px;
+		padding: 10px 16px;
 		float: right;
-		margin-left: 20px;
+		margin-left: 6px;
 		&:hover, &.active {
 			color: $brand-blue;
 			background-color: $color-grey-lighter;
@@ -510,6 +595,10 @@ textarea {
 			}
 		}
 	}
+
+		.mid_banner-dash a {
+			margin-left: 24px;
+		}
 	i {
 		color: #ffffff;
 		padding: 0 10px 0 0;
@@ -600,6 +689,9 @@ textarea {
 
 #btn_add_other_names {
 	margin-left: 10px;
+	background-color: $brand-buttons;
+	border: 0;
+	font-size: 16px;
 }
 
 .footer {
@@ -629,10 +721,31 @@ textarea {
 .question-well {
 	min-height: 20px;
 	padding: 25px;
-	margin-bottom: 25px;
+	margin-top: 25px;
 	border: 1px solid $color-grey-light;
 	border-radius: 10px;
-	&.hasFocus {border: 1px solid $brand-blue;}
+	background: #ffffff;
+	&.hasFocus {
+		border: 1px solid $color-blue-light;
+		transition: 0.1s ease-in-out all;
+	}
+	h3 {
+		margin-top: 0;
+	}
+	p {
+		max-width: 90%;
+	}
+}
+
+.print-form-action {
+	display: inline-block;
+	float: right;
+	a {
+		text-decoration: none;
+	}
+	&:after {
+		display: none;
+	}
 }
 
 .step-review {
@@ -670,6 +783,8 @@ textarea {
 	    flex-wrap: wrap;
 	height: 100%;
 	overflow: hidden;
+	background: #fdfdfd;
+
 	.col {
 		-webkit-box-flex: 1;
 		    -ms-flex: 1;
@@ -680,13 +795,15 @@ textarea {
 		        order: 3;
 	}
 	.content-column {
-		max-width: 800px;
-		padding: 35px 50px 50px 50px;
+		// max-width: 800px;
+		// padding: 35px 50px 50px 50px;
+		max-width: 1280px;
+    padding: 36px 6% 50px 6%;
 	}
 	.progress-column {
 		-webkit-box-flex: 0;
-		    -ms-flex: 0 0 262px;
-		        flex: 0 0 262px;
+		    -ms-flex: 0 0 280px;
+		        flex: 0 0 280px;
 		background-color: $color-grey-lighter;
 		-webkit-box-ordinal-group: 3;
 		    -ms-flex-order: 2;
@@ -694,8 +811,8 @@ textarea {
 	}
 	.dashnav-column {
 		-webkit-box-flex: 0;
-		    -ms-flex: 0 0 262px;
-		        flex: 0 0 262px;
+		    -ms-flex: 0 0 280px;
+		        flex: 0 0 280px;
 		background-color: $brand-titles;
 		-webkit-box-ordinal-group: 3;
 		    -ms-flex-order: 2;
@@ -714,11 +831,19 @@ textarea {
 		    -ms-flex-order: 1;
 		        order: 1;
 		height: auto;
+
+		@media (min-width: 1680px) {
+			font-size: 16px;
+			line-height: 1.5;
+		}
+
 		.more_information-close {
 			float: right;
 			font-size: 24px;
 			margin-top: 3px;
-			color: $brand-blue;
+			i.fa {
+				color: $brand-blue;
+			}
 		}
 		h2 {
 			color: $brand-blue;
@@ -814,6 +939,8 @@ textarea {
 		color: $color-grey-dark;
 		padding: 0 18px;
 		margin-top: 36px;
+		font-size: 14px;
+		letter-spacing: 0.1em;
 	}
 	.progress-question {
 		display: -webkit-box;
@@ -822,9 +949,9 @@ textarea {
 		-webkit-box-align: center;
 		    -ms-flex-align: center;
 		        align-items: center;
-		height: 60px;
+		height: 72px;
 		margin-bottom: 12px;
-		padding: 0 12px 0 18px;
+		padding: 0 18px;
 		.progress-icon {
 			-webkit-box-flex: 0;
 			    -ms-flex: 0 0 46px;
@@ -843,10 +970,16 @@ textarea {
 			}
 		}
 		.progress-content {
-			width: 158px;
+			width: 176px;
 			font-size: 14px;
-			line-height: 16px;
+			line-height: 1.3;
 			color: $body-copy;
+
+			@media (min-width: 1680px) {
+			font-size: 16px;
+			width: 190px;
+		}
+
 			small {
 				font-size: 11px;
 				text-transform: uppercase;
@@ -856,6 +989,7 @@ textarea {
 		}
 		.progress-status {
 			width: 28px;
+			text-align: right;
 			i {
 				float: right;
 			}
@@ -951,6 +1085,7 @@ textarea {
 			.progress-status,
 			.progress-status i {
 				color: $brand-blue;
+				border-color: $brand-blue;
 			}
 
 		}
@@ -988,7 +1123,41 @@ textarea {
 
 /* Modals */
 
+.modal-dialog {
+	width: 780px;
+}
+
+.modal-header {
+	border: 0;
+	padding-bottom: 0;
+}
+
+.modal-title {
+	font-size: 32px;
+	font-weight: normal;
+}
+
+.modal-body {
+	padding-left: 64px;
+	padding-right: 64px;
+
+	p {
+		font-size: 18px;
+		text-align: center;
+	}
+}
+
+.modal-footer {
+	background: #f5f5f5;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	.btn {
+		margin-top: 12px;
+	}
+}
+
 #questions_modal {
+	margin-top: 112px;
 	font-size: 18px;
 	.modal-header {
 		text-align: center;
@@ -1092,5 +1261,3 @@ span.hard-stop {
 		margin-right: 0;
 	}
 }
-
-