1 files changed, 133 insertions, 0 deletions
diff --git a/modals.css b/modals.css
new file mode 100644
index 0000000..bccfcfd
--- /dev/null
+++ b/modals.css
@@ -0,0 +1,133 @@
+/* modal outer stuff */
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 6;
+  overflow-y: scroll;
+}
+.fixed::-webkit-scrollbar {
+  width: 3px;
+}
+.fixed::-webkit-scrollbar-track {
+  background:white;
+}
+.fixed::-webkit-scrollbar-thumb {
+  background: black;
+}
+.fixed::-moz-scrollbar {
+  width: 3px;  
+}
+.fixed::-moz-scrollbar-track {
+  background: white;
+}
+.fixed::-moz-scrollbar-thumb{
+  background: black;
+}
+.animate {
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.mediaDrawer {
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+  background: white;
+  text-align: center;
+  overflow-x: hidden;
+  display:table;
+}
+.mediaDrawer.active {
+  -webkit-transform: translateY(0%);
+  transform: translateY(0%);
+}
+
+/* modal innards */
+.box {
+  display: table-cell;
+  vertical-align: middle;
+  width: 100%;
+}
+button {
+  padding: 8px;
+  float: right;
+  font-weight: 500;
+  width: 100%;
+	font-size:14px;
+}
+
+/* confirm modal yes/no buttons & flicker effect on "yes" */
+.confirm button {
+	float: auto;
+	width: 200px;
+	margin: 10px;
+}
+.confirm button.yes {
+	color: red;	
+}
+.confirm button.yes:hover {
+	animation: flicker 0.1s infinite;
+	background: white;
+}
+@keyframes flicker {
+	49% { background: white; color: red; }
+	50% { background: red; color: white; }
+}
+
+
+/* errors should come back in a standard format from the server */
+.errors {
+	display: none;
+	width: 100%;
+	text-align: center;
+	background: #f8f8f8;
+	padding: 10px;
+	margin:5px 0 10px 0;
+	border-radius: 3px;
+}
+.errorList {
+	font-weight: 300;
+}
+.errors div, form .errors div, form .errorList div {
+	float: none;
+}
+
+/* close button */
+
+.close {
+	font-weight: 100;
+	font-size: 70px;
+	float: right;
+	cursor: pointer;
+	position: fixed;
+	right: 20px;
+	top: 20px;
+	z-index: 20;
+	background: white;
+	width: 75px;
+	color: black;
+	border: 1px solid black;
+	box-shadow: -3px 4px black;
+	line-height: 75px;
+	text-align: center;
+}
+#fixed_close {
+	display: none;
+	-webkit-transform: translateY(-200px) translateZ(0);
+	transform: translateY(-200px) translateZ(0);
+}
+#fixed_close.active {
+	-webkit-transition: 0.2s -webkit-transform linear 1s;
+	transition: 0.2s transform linear 1s;
+	display: block;
+	-webkit-transform: translateY(0px) translateZ(0);
+	transform: translateY(0px) translateZ(0);
+}
+.desktop .close:hover {
+  background:black;
+	color:white;
+}
+