diff --git a/customize_cas/scss/Makefile b/customize_cas/scss/Makefile
new file mode 100644
index 0000000..838260f
--- /dev/null
+++ b/customize_cas/scss/Makefile
@@ -0,0 +1,10 @@
+OUTDIR=../static/css/
+STYLES=style.scss
+IMPORTS=_params.scss _forms.scss _mixins.scss
+
+SASS=sassc
+
+all: $(addprefix $(OUTDIR)/,$(STYLES:.scss=.css))
+
+$(OUTDIR)/%.css: %.scss $(IMPORTS)
+ $(SASS) "$<" "$@"
diff --git a/customize_cas/scss/_forms.scss b/customize_cas/scss/_forms.scss
new file mode 100644
index 0000000..9016358
--- /dev/null
+++ b/customize_cas/scss/_forms.scss
@@ -0,0 +1,116 @@
+form {
+ display: flex;
+ align-items: stretch;
+ flex-direction: column;
+
+ .errorlist {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0.7em;
+
+ li {
+ @include error_box;
+ margin-bottom: 10px;
+ }
+ }
+
+ p {
+ margin: 5px 0;
+ width: 100%;
+ }
+}
+
+.helptext {
+ font-size: 0.7em;
+ color: $help_text_color;
+}
+
+input {
+ display: block;
+ width: 100%;
+ font: inherit;
+ font-size: 0.9em;
+ color: black;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"], {
+ background-color: white;
+ border: solid 1px $help_text_color;
+ padding: 5px 10px;
+ border-radius: 3px;
+ box-shadow: none;
+
+ &:optional {
+ border-color: fade-out($help_text_color, .25);
+ }
+ &:focus {
+ border-color: $secondary_color;
+ box-shadow: 0 0 1.5px 1px $secondary_color;
+ }
+ &:-moz-ui-invalid {
+ border-color: $error_box_border_color;
+ box-shadow: 0 0 1.5px 1px $error_box_border_color;
+ }
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ width: auto;
+ margin: 5px 10px;
+}
+
+input[type="submit"] {
+ @include button;
+}
+
+select {
+ -webkit-appearance: none;
+ appearance: none;
+
+ @include button;
+ width: 100%;
+ font-size: 0.9em;
+ margin: 0;
+ padding: 5px 25px 5px 10px;
+ text-align: left;
+
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #000;
+ }
+
+ background-image: url('/static/img/select_arrow.svg');
+ background-repeat: no-repeat;
+ background-position: right .7em top 50%, 0 0;
+ background-size: .65em auto, 100%;
+}
+
+.formfield {
+ padding: 5px;
+ margin: 10px 0;
+}
+.error_field {
+ border-radius: 10px;
+ background-color: rgba($error_box_color, .4);
+}
+
+.checkbox_input {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+
+ .label_line {
+ order: 1;
+ flex: 1 1 500px;
+ }
+ input {
+ flex: 0 1 50px;
+ }
+}
+
+.fieldgroup {
+ margin: 15px 0;
+}
diff --git a/customize_cas/scss/_mixins.scss b/customize_cas/scss/_mixins.scss
new file mode 100644
index 0000000..cbd34c8
--- /dev/null
+++ b/customize_cas/scss/_mixins.scss
@@ -0,0 +1,36 @@
+@mixin box($bg_color: white, $border_color: black) {
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid $border_color;
+ background-color: $bg_color;
+ color: $page_text_color;
+}
+@mixin error_box {
+ @include box($error_box_color, $error_box_border_color);
+}
+@mixin info_box {
+ @include box($info_box_color, $info_box_border_color);
+}
+@mixin success_box {
+ @include box($success_box_color, $success_box_border_color);
+}
+@mixin warning_box {
+ @include box($warning_box_color, $warning_box_border_color);
+}
+
+@mixin button {
+ display: block;
+ text-decoration: none;
+ text-align: center;
+ font-size: 100%;
+
+ @include box($button_color, $secondary_border_color);
+
+ &:hover {
+ background-color: darken($button_color, 10%);
+ }
+ &:focus {
+ background-color: darken($button_color, 20%);
+ box-shadow: 0 0 1.5px 1px $secondary_color;
+ }
+}
diff --git a/customize_cas/scss/_params.scss b/customize_cas/scss/_params.scss
new file mode 100644
index 0000000..bcd04c4
--- /dev/null
+++ b/customize_cas/scss/_params.scss
@@ -0,0 +1,31 @@
+$page_bg_color: #f5f1f4;
+$page_main_color: #ffffff;
+$page_text_color: #000000dd;
+$secondary_color: #3c173d;
+$secondary_border_color: #3c173d;
+$page_link_color: $secondary_border_color;
+$page_width: 700px;
+
+$main_border_color: $secondary_border_color;
+$main_border_radius: 20px;
+$button_color: #d2bed3;
+$button_text_color: white;
+
+$help_text_color: rgba($page_text_color, .65);
+
+$font_size: 16pt;
+$font_family: "Open Sans";
+
+$small_screen_font_size: 12pt;
+
+$header_height: 100px;
+$header_logo_maxwidth: 300px;
+
+$info_box_color: #c9c8ff;
+$info_box_border_color: darken($info_box_color, 20%);
+$error_box_color: #ffdfdf;
+$error_box_border_color: darken($error_box_color, 20%);
+$success_box_color: #bafb95;
+$success_box_border_color: darken($success_box_color, 20%);
+$warning_box_color: #ffd36c;
+$warning_box_border_color: darken($warning_box_color, 20%);
diff --git a/customize_cas/scss/_params.scss.blue b/customize_cas/scss/_params.scss.blue
new file mode 100644
index 0000000..64811a5
--- /dev/null
+++ b/customize_cas/scss/_params.scss.blue
@@ -0,0 +1,30 @@
+$page_bg_color: #f3f0ff;
+$page_main_color: #e9e4ff;
+$page_text_color: #000000dd;
+$page_link_color: #c6491add;
+$page_width: 700px;
+
+$secondary_color: #9188ff;
+$secondary_border_color: #25228a;
+
+$main_border_color: $secondary_border_color;
+$main_border_radius: 20px;
+
+$help_text_color: rgba($page_text_color, .65);
+
+$font_size: 16pt;
+$font_family: "Open Sans";
+
+$small_screen_font_size: 12pt;
+
+$header_height: 100px;
+$header_logo_maxwidth: 300px;
+
+$info_box_color: #c9c8ff;
+$info_box_border_color: darken($info_box_color, 20%);
+$error_box_color: #ffdfdf;
+$error_box_border_color: darken($error_box_color, 20%);
+$success_box_color: #bafb95;
+$success_box_border_color: darken($success_box_color, 20%);
+$warning_box_color: #ffd36c;
+$warning_box_border_color: darken($warning_box_color, 20%);
diff --git a/customize_cas/scss/style.scss b/customize_cas/scss/style.scss
new file mode 100644
index 0000000..44e66e1
--- /dev/null
+++ b/customize_cas/scss/style.scss
@@ -0,0 +1,117 @@
+@charset "utf-8";
+@import "fonts.css";
+@import "_mixins";
+@import "_params";
+@import "_forms";
+
+html {
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+body {
+ background-color: $page_bg_color;
+ font-size: $font_size;
+ font-family: $font_family;
+ color: $page_text_color;
+ margin: 0;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ min-height: 100vh;
+}
+
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+
+ margin: 0;
+ margin-bottom: 50px;
+ padding: 20px 30px;
+ padding-bottom: 0;
+
+ width: $page_width;
+
+ #headtext {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ justify-content: space-evenly;
+
+ font-size: 1.2em;
+ color: $secondary_color;
+ font-weight: bold;
+ }
+
+ img {
+ height: $header_height;
+ max-width: $header_logo_maxwidth;
+ }
+}
+
+main {
+ width: $page_width;
+ background-color: $page_main_color;
+ border: 3px solid $main_border_color;
+ border-radius: $main_border_radius;
+ padding: 15px;
+
+ h2 {
+ font-size: 20pt;
+ text-align: center;
+ color: $secondary_color;
+ }
+}
+
+a {
+ text-decoration: underline;
+ color: $page_link_color;
+ border-radius: 3px;
+
+ &:hover {
+ color: darken($page_link_color, 20%);
+ }
+}
+
+:focus {
+ outline: none;
+ box-shadow: 0 0 1.5px 1px $page_link_color;
+}
+::-moz-focus-inner {
+ border: none;
+}
+
+button, .btn_row a {
+ @include button;
+ margin: 10px 5px;
+
+ p {
+ margin: 0;
+ }
+}
+
+.messages {
+ list-style-type: none;
+ margin: 10px 0;
+ padding: 0;
+ font-size: 0.8em;
+
+ li {
+ margin: 8px 0;
+ }
+}
+
+.error { @include error_box; }
+.info { @include info_box; }
+.warning { @include warning_box; }
+.success { @include success_box; }
+
+.antispam {
+ unicode-bidi: bidi-override;
+ direction: rtl;
+}
diff --git a/customize_cas/static/css/fonts.css b/customize_cas/static/css/fonts.css
new file mode 100644
index 0000000..c48cbea
--- /dev/null
+++ b/customize_cas/static/css/fonts.css
@@ -0,0 +1,13 @@
+/* open-sans-regular - latin */
+@font-face {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
+ src: local('Open Sans Regular'), local('OpenSans-Regular'),
+ url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
+ url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
diff --git a/customize_cas/static/css/style.css b/customize_cas/static/css/style.css
new file mode 100644
index 0000000..74ae20c
--- /dev/null
+++ b/customize_cas/static/css/style.css
@@ -0,0 +1,248 @@
+@import url(fonts.css);
+form {
+ display: flex;
+ align-items: stretch;
+ flex-direction: column; }
+ form .errorlist {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0.7em; }
+ form .errorlist li {
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #ff7979;
+ background-color: #ffdfdf;
+ color: #000000dd;
+ margin-bottom: 10px; }
+ form p {
+ margin: 5px 0;
+ width: 100%; }
+
+.helptext {
+ font-size: 0.7em;
+ color: rgba(0, 0, 0, 0.65); }
+
+input {
+ display: block;
+ width: 100%;
+ font: inherit;
+ font-size: 0.9em;
+ color: black; }
+
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+ background-color: white;
+ border: solid 1px rgba(0, 0, 0, 0.65);
+ padding: 5px 10px;
+ border-radius: 3px;
+ box-shadow: none; }
+ input[type="text"]:optional,
+ input[type="email"]:optional,
+ input[type="password"]:optional {
+ border-color: rgba(0, 0, 0, 0.4); }
+ input[type="text"]:focus,
+ input[type="email"]:focus,
+ input[type="password"]:focus {
+ border-color: #3c173d;
+ box-shadow: 0 0 1.5px 1px #3c173d; }
+ input[type="text"]:-moz-ui-invalid,
+ input[type="email"]:-moz-ui-invalid,
+ input[type="password"]:-moz-ui-invalid {
+ border-color: #ff7979;
+ box-shadow: 0 0 1.5px 1px #ff7979; }
+
+input[type="checkbox"],
+input[type="radio"] {
+ width: auto;
+ margin: 5px 10px; }
+
+input[type="submit"] {
+ display: block;
+ text-decoration: none;
+ text-align: center;
+ font-size: 100%;
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #3c173d;
+ background-color: #d2bed3;
+ color: #000000dd; }
+ input[type="submit"]:hover {
+ background-color: #bda0be; }
+ input[type="submit"]:focus {
+ background-color: #a881aa;
+ box-shadow: 0 0 1.5px 1px #3c173d; }
+
+select {
+ -webkit-appearance: none;
+ appearance: none;
+ display: block;
+ text-decoration: none;
+ text-align: center;
+ font-size: 100%;
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #3c173d;
+ background-color: #d2bed3;
+ color: #000000dd;
+ width: 100%;
+ font-size: 0.9em;
+ margin: 0;
+ padding: 5px 25px 5px 10px;
+ text-align: left;
+ background-image: url("/static/img/select_arrow.svg");
+ background-repeat: no-repeat;
+ background-position: right .7em top 50%, 0 0;
+ background-size: .65em auto, 100%; }
+ select:hover {
+ background-color: #bda0be; }
+ select:focus {
+ background-color: #a881aa;
+ box-shadow: 0 0 1.5px 1px #3c173d; }
+ select:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 #000; }
+
+.formfield {
+ padding: 5px;
+ margin: 10px 0; }
+
+.error_field {
+ border-radius: 10px;
+ background-color: rgba(255, 223, 223, 0.4); }
+
+.checkbox_input {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center; }
+ .checkbox_input .label_line {
+ order: 1;
+ flex: 1 1 500px; }
+ .checkbox_input input {
+ flex: 0 1 50px; }
+
+.fieldgroup {
+ margin: 15px 0; }
+
+html {
+ box-sizing: border-box; }
+
+*, *:before, *:after {
+ box-sizing: inherit; }
+
+body {
+ background-color: #f5f1f4;
+ font-size: 16pt;
+ font-family: "Open Sans";
+ color: #000000dd;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh; }
+
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ margin: 0;
+ margin-bottom: 50px;
+ padding: 20px 30px;
+ padding-bottom: 0;
+ width: 700px; }
+ header #headtext {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ justify-content: space-evenly;
+ font-size: 1.2em;
+ color: #3c173d;
+ font-weight: bold; }
+ header img {
+ height: 100px;
+ max-width: 300px; }
+
+main {
+ width: 700px;
+ background-color: #ffffff;
+ border: 3px solid #3c173d;
+ border-radius: 20px;
+ padding: 15px; }
+ main h2 {
+ font-size: 20pt;
+ text-align: center;
+ color: #3c173d; }
+
+a {
+ text-decoration: underline;
+ color: #3c173d;
+ border-radius: 3px; }
+ a:hover {
+ color: black; }
+
+:focus {
+ outline: none;
+ box-shadow: 0 0 1.5px 1px #3c173d; }
+
+::-moz-focus-inner {
+ border: none; }
+
+button, .btn_row a {
+ display: block;
+ text-decoration: none;
+ text-align: center;
+ font-size: 100%;
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #3c173d;
+ background-color: #d2bed3;
+ color: #000000dd;
+ margin: 10px 5px; }
+ button:hover, .btn_row a:hover {
+ background-color: #bda0be; }
+ button:focus, .btn_row a:focus {
+ background-color: #a881aa;
+ box-shadow: 0 0 1.5px 1px #3c173d; }
+ button p, .btn_row a p {
+ margin: 0; }
+
+.messages {
+ list-style-type: none;
+ margin: 10px 0;
+ padding: 0;
+ font-size: 0.8em; }
+ .messages li {
+ margin: 8px 0; }
+
+.error {
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #ff7979;
+ background-color: #ffdfdf;
+ color: #000000dd; }
+
+.info {
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #6562ff;
+ background-color: #c9c8ff;
+ color: #000000dd; }
+
+.warning {
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #ffb406;
+ background-color: #ffd36c;
+ color: #000000dd; }
+
+.success {
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px solid #7af733;
+ background-color: #bafb95;
+ color: #000000dd; }
+
+.antispam {
+ unicode-bidi: bidi-override;
+ direction: rtl; }
diff --git a/customize_cas/static/fonts/open-sans-v17-latin-regular.eot b/customize_cas/static/fonts/open-sans-v17-latin-regular.eot
new file mode 100644
index 0000000..8f3becf
Binary files /dev/null and b/customize_cas/static/fonts/open-sans-v17-latin-regular.eot differ
diff --git a/customize_cas/static/fonts/open-sans-v17-latin-regular.svg b/customize_cas/static/fonts/open-sans-v17-latin-regular.svg
new file mode 100644
index 0000000..78eb653
--- /dev/null
+++ b/customize_cas/static/fonts/open-sans-v17-latin-regular.svg
@@ -0,0 +1,336 @@
+
+
+
diff --git a/customize_cas/static/fonts/open-sans-v17-latin-regular.ttf b/customize_cas/static/fonts/open-sans-v17-latin-regular.ttf
new file mode 100644
index 0000000..fb23764
Binary files /dev/null and b/customize_cas/static/fonts/open-sans-v17-latin-regular.ttf differ
diff --git a/customize_cas/static/fonts/open-sans-v17-latin-regular.woff b/customize_cas/static/fonts/open-sans-v17-latin-regular.woff
new file mode 100644
index 0000000..39e88ed
Binary files /dev/null and b/customize_cas/static/fonts/open-sans-v17-latin-regular.woff differ
diff --git a/customize_cas/static/fonts/open-sans-v17-latin-regular.woff2 b/customize_cas/static/fonts/open-sans-v17-latin-regular.woff2
new file mode 100644
index 0000000..e9f58b7
Binary files /dev/null and b/customize_cas/static/fonts/open-sans-v17-latin-regular.woff2 differ
diff --git a/customize_cas/static/img/logo.svg b/customize_cas/static/img/logo.svg
new file mode 100644
index 0000000..616bc58
--- /dev/null
+++ b/customize_cas/static/img/logo.svg
@@ -0,0 +1,1780 @@
+
+
+
+
\ No newline at end of file