Special patterns and chunks of style for the picker popup window.

Sign In

<div class="tools-page">
	<div class="tools-signin-logo">
		<img
			class="tools-signin-logo"
			width="450"
			src="https://mltshp-cdn.com/static/images/mltshp-tools-logo.svg"
		/>
	</div>
	<div class="content content-narrow content-sign-in">
		<h1>Sign in to save your images to your shake</h1>
		<div class="fun-form sign-in-fun-form">
			<form>
				<div class="field">
					<label>Username:</label>
					<div class="field-input">
						<input
							class="input-text"
							type="text"
							name="name"
							value=""
							autocorrect="off"
							autocapitalize="none"
							autocomplete="username"
						/>
					</div>
				</div>
				<div class="field">
					<label>Password:</label>
					<div class="field-input">
						<input
							class="input-text"
							type="password"
							name="password"
							autocomplete="new-password"
						/>
					</div>
				</div>
				<div class="field field-submit">
					<input
						class="btn btn-primary btn-shadow btn-large"
						type="submit"
						value="Sign In!"
					/>
				</div>
			</form>
			<div class="clear"></div>
		</div>
	</div>
</div>

Picker

<div class="tools-page">
	<div class="header">
		<a href="#"
			><img
				src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
				alt="MLTSHP"
		/></a>
		you are signed in as yourname |
		<a href="#">sign out</a>
	</div>
	<div class="content">
		<div class="content-inner">
			<div class="picker-content">
				<form
					class="fun-form fun-form-stacked tools-fun-form"
					method="post"
					action="/tools/p"
				>
					<div class="field tools-field-title">
						<div class="field-input">
							<input
								class="input-text"
								type="text"
								name="title"
								autocomplete="off"
								value=""
							/>
						</div>
					</div>
					<div class="field field-textarea">
						<div class="field-input">
							<div class="field-input-inner">
								<textarea name="description" value="">
source: http://capndesign.com/bstshp/</textarea
								>
							</div>
						</div>
					</div>
					<div class="field tools-field-title">
						<div class="field-input">
							<select name="shake_id">
								<option value="7537">user shake</option>
								<option value="102632">cool shake</option>
								<option value="102661">secret shake</option>
								<option value="9174">dance party</option>
							</select>
						</div>
					</div>
					<div class="field field-submit tools-save-this">
						<input
							type="image"
							src="https://mltshp-cdn.com/static/images/tools-save-this.svg?v=b92202763dde2f5c124685d310df7bb7"
							width="171"
							height="84"
							alt="Save This"
						/>
					</div>
				</form>
			</div>
			<div class="picker-image">
				<img src="https://mltshp.com/r/1JP5T" alt="" />
			</div>
		</div>
	</div>
</div>

Picker Success

<div class="tools-page">
	<div class="header">
		<a href="#"
			><img
				src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
				alt="MLTSHP"
		/></a>
		you are signed in as yourname |
		<a href="#">sign out</a>
	</div>
	<div class="content">
		<div class="content-inner">
			<div class="picker-content">
				<h2 class="tools-saved-it">More Enchanted Forest has been saved.</h2>

				<form class="fun-form fun-form-stacked fun-form-border">
					<div class="field">
						<label
							>Image URL (<a href="#" target="_blank">Go there now</a>)</label
						>
						<div class="field-input">
							<input
								type="text"
								class="input-text"
								name="bookmarklet"
								value="https://mltshp.com/p/1JP5T"
							/>
						</div>
					</div>
					<div class="field">
						<label>Direct Image URL</label>
						<div class="field-input">
							<input
								type="text"
								class="input-text"
								name="bookmarklet"
								value="https://mltshp.com/r/1JP5T"
							/>
						</div>
					</div>
				</form>
			</div>

			<div class="picker-image">
				<img src="https://mltshp.com/r/1JP5T" />
			</div>
		</div>
	</div>
</div>

Picker Error

<div class="tools-page">
	<div class="header">
		<a href="#"
			><img
				src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
				alt="MLTSHP"
		/></a>
		you are signed in as yourname |
		<a href="#">sign out</a>
	</div>
	<div class="content">
		<div class="content-inner">
			<div class="full-width">
				<h2 class="error-uh-oh">We had a problem.</h2>
			</div>
		</div>
	</div>
</div>

Picker Email Validation

<div class="tools-page">
	<div class="header">
		<a href="#"
			><img
				src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
				alt="MLTSHP"
		/></a>
		you are signed in as yourname |
		<a href="#">sign out</a>
	</div>
	<div class="content">
		<div class="content-inner">
			<div class="picker-content">
				<div class="email-unverified">
					<h2>Email Unconfirmed</h2>
					<h3>
						In order to post, you have to confirm your email address first.
						Check your email for the confirmation link. Visit your
						<a href="#">account settings</a> if you need it re-sent.
					</h3>
				</div>
			</div>
		</div>
	</div>
</div>

Picker Upload Limit

<div class="tools-page">
	<div class="header">
		<a href="#"
			><img
				src="https://mltshp-cdn.com/static/images/mltshp-tools-small.svg"
				alt="MLTSHP"
		/></a>
		you are signed in as yourname |
		<a href="#">sign out</a>
	</div>
	<div class="content">
		<div class="content-inner">
			<div class="picker-content">
				<div class="over-upload-limit">
					<h2>Upload account limit</h2>
					<h3>
						You’ve reached the limit on the number of megs you can upload in a
						month. That limit is 300 megabytes. If you’d like to
						<a href="#">become a Double Scoop member</a>! It’s just $2/month.
					</h3>
				</div>
			</div>
		</div>
	</div>
</div>