jonathanfalkner

/* Custom highlight for specific selected text */
#passwordMessage::selection {
  background-color:darkred;
  color:white;
}
#newpw { padding-left: 2em; padding-right:2em; }
#newpw::selection {
  background-color: blue;
  color: white;
}

jonathanfalkner

/* SVG Image Map replacement */
.banner {
width:50%; margin-left:25%; margin-right:25%;
border: 1px solid black;
}
svg a:hover {
 text-decoration:underline;
}

jonathanfalkner

/**
 * CSS Only default text hide for input box
 */
.searchbox__input, .searchbox__placeholder { 
  width: 400px;
  box-sizing:content-box;
}
.searchbox__input {
  height:40px;
}

jonathanfalkner

/**
 * Kill the Saw Tooth!
 */
* {

}
#container {
   box-sizing: border-box;
   overflow:hidden;
}

jonathanfalkner

/**
 * Simple Sketch Canvas tool
 */

body {margin:0;padding:0;}
#paintContainer { width:400px; height:300px; border:5px solid grey;}

jonathanfalkner

/**
 * Pullquote WYSIWYG Styles to help identify text with this style applied.
 */
pullquote {
	padding-bottom: .1em;
	background-color: #F6F6F9;
}
pullquote:before, pullquote:after {
  color:blue;
  padding-bottom:.1em;

jonathanfalkner

/* Pure CSS squiggly underline error indicator */
.err { 
/* Fallback for browsers that don't support multiple background images. */
  background-image: linear-gradient(90deg, transparent 0%, red 25%, transparent 50%, red 75%, transparent 100%);
  background-image:
    linear-gradient(135deg, transparent .5px, red 1.5px, transparent 2.5px),
    linear-gradient(45deg, transparent 2px, red 3px, transparent 4px),
    linear-gradient(135deg, transparent 3.5px, red 4.5px, transparent 5.5px),
    linear-gradient(45deg, transparent 5px, red 6px, transparent 7px);
   background-repeat:repeat-x;

jonathanfalkner

/* Pure CSS squiggly underline error indicator */
.err { 
/* Fallback for browsers that don't support multiple background images. */
  background-image: linear-gradient(90deg, transparent 0%, red 25%, transparent 50%, red 75%, transparent 100%);
  background-image:
    linear-gradient(135deg, transparent .5px, red 1.5px, transparent 2.5px),
    linear-gradient(45deg, transparent 2px, red 3px, transparent 4px),
    linear-gradient(135deg, transparent 3.5px, red 4.5px, transparent 5.5px),
    linear-gradient(45deg, transparent 5px, red 6px, transparent 7px);
   background-repeat:repeat-x;

jonathanfalkner

/* Pure CSS squiggly underline error indicator */
.err { 
  background-image:
    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 8px 2px;
  background-position:0 95%;

jonathanfalkner

/* Pure CSS squiggly underline error indicator */
.err { 
  background-image:
    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),
    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),
    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),
    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);
  background-repeat:repeat-x;
  background-size: 8px 2px;
  background-position:0 95%;