@charset "utf-8";

/* Fonts */

@font-face
{
	font-family: 'Chrono Regular';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebRegular.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebRegular.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Medium';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMedium.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebMedium.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Medium Italic';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMediumItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebMediumItalic.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Light';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLight.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebLight.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Light Italic';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLightItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebLightItalic.woff') format('woff');
}

/* ----- RESET BROWSER DEFAULTS ----- */
*
{
	margin: 0;
	padding: 0;
}

a
{
	text-decoration: none;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-weight: normal;
}

ul
{
	list-style: none;
}

/* ----- BASIC PAGE SET-UPS ----- */
html
{
	min-width: 344px;
	padding: 5px 20px;

	background: #d5dbdb;
	color: #000;
}

body
{
	background: #d5dbdb;
	color: #000;

	font-family: "Chrono Regular";

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-size: 18px;
	line-height: 24px;
}

/* Firefox-specific hack to make the video background blend in. */
@-moz-document url-prefix()
{
	html, body
	{
		background: #cdd4d4;
	}
}

strong
{
	font-family: "Chrono Medium";
	font-weight: normal;
}

em
{
	font-family: "Chrono Medium Italic";
	font-style: normal;
}

strong em,
em strong
{
	font-family: "Chrono Medium";
	font-style: normal;
	font-weight: normal;
}

header,
section#movie-area,
section#new,
section#about,
section#summary,
section#book,
section#coda-ios,
section#help,
section#faq,
form#orderform,
ul#notes,
footer
{
	width: 100%;
	margin: 10px auto;
}

/* ----- HEADER ----- */

header
{
	position: relative;
}

header a
{
	display: inline-block;
	margin: 0;
	position: relative;
	z-index: 10;
}

div#shopmark
{
	font-size: 30px;
	height: 51px;
	line-height: 51px;
/* 	background-image: url("images/panic-logo.svg"); */
	background-image: url("//signserver.panic.com/get/altsvg");
	background-size: 48px 49px;
	background-repeat: no-repeat;
	background-position: 0% 50%;
	padding-left: 59px;
	margin: 0px 0px 20px 0;
	color: #56626d;
	letter-spacing: -2px;
}

#library-link
{
	display: inline-block;
	font-size: 24px;
	height: 51px;
	line-height: 51px;
	margin: 0px 0px 20px 0;
	color: #959ea6;
	letter-spacing: -2px;
	text-decoration: underline;
	position: absolute;
	right: 0;

	background-image: url("images/help-icon.svg");
	background-size: 36px 36px;
	background-repeat: no-repeat;
	background-position: 0% 50%;
	padding-left: 36px;
}

header h1 a
{
	display: block;
	padding-left: 68px;

	font-family: "Chrono Light Italic";
	font-size: 64px;
	line-height: 64px;
	letter-spacing: -5px;
	color: #a5fd32;

	background-image: url("./images/coda-icon.png");
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-ms-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left 0px;
}

header h1 a span,
section#about em strong
{
	color: #a5fd32;
}

header p
{
	font-family: "Chrono Light";
	font-size: 26px;
	line-height: 32px;
	color: #146883;
}

section p a,
section li a
{

	text-decoration: underline;
}

/* ----- MENU -------------------- */

header nav
{
	text-align: left;
	margin: 10px 0;
	line-height: 50px;
	display: block;
	position: relative;
}

header nav a.button
{
	line-height: 50px;
	height: 50px;
	background-size: 50px 50px;
	background-position: 0% 0%, 0% 0%;
	background-repeat: no-repeat, no-repeat;
	border-radius: 4px;
	display: block;
	font-family: "Chrono Regular";
	font-size: 24px;
	color: #fff;
	margin: 10px 0px 0px 0px;
	padding: 0 20px 0 70px;
	text-align: left;
	background-color: #959ea6;
	color: #ffffff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

nav a.button#nav-download { background-image: url("images/nav-download.svg"); }
nav a.button#nav-buy { background-image: url("images/nav-buy.svg"); }
nav a.button#nav-plugins { background-image: url("images/nav-plug-ins.svg"); }
nav a.button#nav-help { background-image: url("images/nav-help.svg"); }

nav a.button#nav-download:hover { background-image: url("images/nav-download-active.svg"); background-color: #419bf9; }
nav a.button#nav-buy:hover { background-image: url("images/nav-buy-active.svg"); background-color: #27c11f; }
nav a.button#nav-plugins:hover { background-image: url("images/nav-plug-ins-active.svg"); background-color: #ae4ea5; }
nav a.button#nav-help:hover { background-image: url("images/nav-help-active.svg"); background-color: #fc4349; }

/* ----- DOWNLOADER -------------------- */

header nav a.button#nav-download ul#downloader a,
header nav a.button#nav-download ul#downloader a:hover
{
	line-height: inherit;
	height: intrinsic;
	background: #ffffff;
	border-radius: 0;
	display: inline;
	font-size: 16px;
	color: #000000;
	padding: 0;
	margin: 0;
}

ul#downloader
{
	position: absolute;
	z-index: 0;
	visibility: hidden;
	background: #ffffff;
	color: #000000;
	width: 264px;
	text-align: center;
	border-radius: 4px;
	line-height: 32px;
	top: -125px;
	padding: 10px 0 0 0;
	opacity: 0;
	-webkit-transition: opacity 0.25s ease;
	-moz-transition: opacity 0.25s ease;
	-ms-transition: opacity 0.25s ease;
	-o-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}

header nav div
{
	display: inline;
}

header nav div:hover ul#downloader
{
	opacity: 1;
	z-index: 10;
	visibility: visible;
}

ul#downloader a
{
	background: none;
	text-decoration: underline;
}

ul#downloader:after
{
	width: 30px;
	height: 30px;
	content: "";
	display: block;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background: #ffffff;
	margin: 0 auto -10px auto;
}

/* ----- HEADINGS -------------------- */

body#coda25 h2
{
	font-size: 48px;
	line-height: 48px;
	font-family: "Chrono Light Italic";
	font-weight: normal;
	margin: 20px 0;
	letter-spacing: -3px;
}

section#new h2 { color: #a438ff;}
section#about h2 { color: #34c6fd;}
section#summary h2 { color: #7a0cd8;}
section#book h2 { color: #fffc00;}
section#coda-ios h2 { color: #127093;}
section#help h2 { color: #fb0053; }

body#coda25 section ul
{
	font-family: "Chrono Light";
	list-style: none;
}

/* ----- MOVIE AREA -------------------- */

section#moviearea
{
	position: relative;
	top: 0px;
	left: 25px;
	width: 100%;
	margin: 0px auto;
}

section#moviearea video
{
/* 	height: 204px; */
	width: 100%;
	position: relative;
}

/* ----- WHAT'S NEW -------------------- */

section#new
{
	position: relative;
}

section#new li
{
	font-size: 18px;
	line-height: 24px;
	background-repeat: no-repeat;
	background-position: 0% 3px;
	background-size: 58px 58px;
	min-height: 58px;
	padding-left: 78px;
	margin: 20px auto;
	letter-spacing: 0px;
	color: #5f6364;
}

section#new li#new-touch-bar { background-image: url("images/feature-touch-bar.svg"); }
section#new li#new-speed { background-image: url("images/feature-speed.svg"); }
section#new li#new-editor { background-image: url("images/feature-editor.svg"); }
section#new li#new-indexing { background-image: url("images/feature-indexer.svg"); }
section#new li#new-pluginprefs { background-image: url("images/feature-plug-ins.svg"); }
section#new li#new-cssoverride { background-image: url("images/feature-css.svg"); }
section#new li#new-publishing { background-image: url("images/feature-publish.svg"); }
section#new li#new-panic-sync { background-image: url("images/feature-panic-sync.svg"); }

section#new li h3
{
	font-size: 18px;
	line-height: 24px;
	display: inline-block;
	font-family: "Chrono Medium";
	color: #365f69;
}

/* ----- ABOUT CODA -------------------- */

section#about p
{
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 24px;
	color: #000;
}

/* ----- SUMMARY -------------------- */

section#summary
{
	margin: 40px auto;
}

section#summary h2 a
{
	text-decoration: underline;
}

section#summary p
{
	color: #4e4d52;
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-family: "Chrono Regular";
}

/* ----- BOOK -------------------- */

section#book
{
	margin: 0 0;
}

section#book h2
{
	margin: 0 0 10px 0;
}

section#book div
{
	background-image: url("images/coda-book.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 166px;
	text-align: center;
}

section#book a.ibooksButton
{
	background: #3d4d52;
	background: #fffc00;
	margin: 20px 0;
	padding: 0 20px;
	display: inline-block;
	color: #ffffff;
	color: black;
	border-radius: 4px;
}

section#book p
{

}

/* ----- CODA iOS -------------------- */

section#coda-ios h2 a
{
	text-decoration: underline;
}


/* ----- HELP -------------------- */

section#help
{
	margin: 6em auto !important;
}

section#help p
{
	font-size: 20px;
	line-height: 24px;
	margin: 20px 0;
	font-family: "Chrono Regular";
}

section#help ul
{
	position: relative;
}

section#help ul li
{
	display: block;
	height: 50px;
	color: #fff;
	margin: 20px auto;
	border-radius: 4px;
	font-family: "Chrono Light";
	padding: 10px 0px 10px 60px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: pointer;
}

section#help ul li.active div.collapsed,
section#help ul li div.expanded
{
	display: none;

}

section#help ul li div.collapsed,
section#help ul li.active div.expanded
{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

section#help ul li#twitter
{
	background-color: #737b82;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, left top, right top, from(#48b9cf), to(#737b82));

	background: -webkit-linear-gradient(left, #48b9cf 52px, #737b82 52px);
	background: -moz-linear-gradient(left, #48b9cf 52px, #737b82 52px);
	background: -ms-linear-gradient(left, #48b9cf 52px, #737b82 52px);
	background: -o-linear-gradient(left, #48b9cf 52px, #737b82 52px);
	background: linear-gradient(left, #48b9cf 52px, #737b82 52px);
}

section#help ul li#library
{
	background-color: #737b82;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, left top, right top, from(#fdca61), to(#737b82));

	background: -webkit-linear-gradient(left, #fdca61 52px, #737b82 52px);
	background: -moz-linear-gradient(left, #fdca61 52px, #737b82 52px);
	background: -ms-linear-gradient(left, #fdca61 52px, #737b82 52px);
	background: -o-linear-gradient(left, #fdca61 52px, #737b82 52px);
	background: linear-gradient(left, #fdca61 52px, #737b82 52px);
}

section#help ul li#email
{
	background-color: #737b82;

	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 52px 0, 52px 0, from(#d82931), to(#737b82));

	background: -webkit-linear-gradient(left, #d82931 52px, #737b82 52px);
	background: -moz-linear-gradient(left, #d82931 52px, #737b82 52px);
	background: -ms-linear-gradient(left, #d82931 52px, #737b82 52px);
	background: -o-linear-gradient(left, #d82931 52px, #737b82 52px);
	background: linear-gradient(left, #d82931 52px, #737b82 52px);
}

section#help ul li h3
{
	font-size: 30px;
	line-height: 30px;
	letter-spacing: -1px;
}

section#help ul li p
{
	font-size: 14px;
	line-height: 16px;
	margin: 0;
}

section#help ul li.active p
{
	font-size: 16px;
	line-height: 50px;
	text-align: center;
}

section#help ul li.active p a
{
	text-decoration: underline;
}

/* ----- FAQ ----------------------- */

section#faq
{
}

section#faq h2
{
	color: #f07e2b;

}

section#faq h3
{
	font-family: "Chrono Medium";
	color: #F98E4C;
	margin: 20px 0 10px 0;
}

section#faq p,
section#faq ul,
section#faq ol

{
	font-family: "Chrono Regular";
	margin: 0 20px 10px 20px;
}

section#faq li
{
	display: list-item;
	margin-left: 0px;
}

section#faq ul li
{
	list-style-type: disc;
}

section#faq ol li
{
	list-style-type: decimal;
}


section#faq em
{
	font-family: "Chrono Medium Italic";
}

section#faq pre
{
	margin: 0 20px 10px 20px;
}

section#faq code
{
	white-space: normal;
	word-break: break-all;
	background: #c1cbcb;
}

/* ----- FOOTER -------------------- */

footer
{
	text-align: center;
	font-size: 20px;
	line-height: 20px;
	margin: 30px auto 0 auto;
	color: #959ea6;
	position: relative;

	padding: 74px 0 10px 0 !important;
	background-image: url("./images/panic-logo-gray.svg");
	background-size: 61px 64px;
	background-position: top center;
	background-repeat: no-repeat;
}

footer a
{
	color: #959ea6;
	text-decoration: underline;
}

/* ----- BUY PAGE -------------------- */


#paypal-buy-button span.logo {
  font-size: 1.25em;
  position: relative;
  top: 0.07em;
  color: transparent;
  background-image: url("images/cc-paypal.svg");
  background-size: 110%;
  background-repeat: no-repeat;
  background-position: 50% 100%;
}


#coda25-buy header nav a#nav-buy
{
	background-color: #27c11f;
	background-image: url("images/nav-buy-active.svg");
}

body#coda25-buy form
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #e6eaec;
	width: 100%;
	padding: 10px;
	position: relative;
}

form input,
form select,
section#who option,
section#how option
{
	-webkit-appearance: none;
	-khtml-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	border: 0;
	background: #e9eef0;
	background: #ffffff;
	border-radius: 4px;
	font-family: "Chrono Light Italic";
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px 0 0 10px;
}

form select
{
	min-height: 56px;
}

section#who option,
section#how option
{
	font-size: 13px;
}

form *:focus,
input:focus
{
	outline: none;
}

.form-section
{
}

.form-section fieldset
{
	border: none;
}

form legend,
section#who label,
section#how label,
input#Submit
{
	display: none;
}

span#price-coda2,
section#checkout label em
{
	color: #27b919;
	font-family: "Chrono Regular";
	letter-spacing: -1px;
}

section#what label,
section#checkout label
{
	font-size: 32px;
	line-height: 50px;
	color: #419bf9;
	text-align: center;
	display: block;
	letter-spacing: -1px;
}

section#what label:before
{
	content: "";
	display: inline-block;
	background-image: url("images/selected.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 50px 50px;
	width: 50px;
	height: 50px;
	vertical-align: -12px;
	margin-right: 20px;
}

section#what input
{
	font-size: 32px;
	padding: 4px 4px 0px 4px;
	line-height: 48px;
	color: #000000;
	text-align: center;
	font-family: "Chrono Regular";
	vertical-align: 4px;
}

section#who,
section#how,
section#applepay,
section#checkout
{
	width: 100%;
}

section#who input,
section#who select,
section#how input,
section#how select
{
	font-family: "Chrono Regular";
	font-size: 30px;
	line-height: 46px;

	border-radius: 5px;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	color: #000;
	margin: 1px 0;
}

section#who select,
section#how select
{
	font-family: "Chrono Light Italic";
	background-image: url("images/dropdown-arrow.svg");
	background-size: 20px 12px;
	background-position: 96% 50%;
	background-repeat: no-repeat;
	color: #959ea6;
	vertical-align: top;
}

section#who input::-webkit-input-placeholder,
section#how input::-webkit-input-placeholder
{
	font-family: "Chrono Light Italic";
}

section#who input
{
	display: inline-block;
	width: 100%;
}

section#who input#city
{
	width: 66.6%;
	margin-left: 0px;
	margin-right: -3px;
}

section#who input#state
{
	width: 33.1%;
	margin-right: -2px;
}

section#who input#zipcode
{
	width: 33.3%;
	margin-right: -2px;
}

section#who select#country
{
	width: 66.5%;
	margin-right: -3px;
}

section#how fieldset#payment-type
{
	display: block;
	margin: 10px 0 0 0;
	position: relative;
}

section#how fieldset#payment-type div
{
	height: 46px;
	line-height: 46px;
	position: relative;
	display: inline-block;
}

section#how label#cc-card,
section#how label#cc-paypal,
section#how input#Card,
section#how input#PayPal,
section#how #payment_type-banktransfer label,
section#how #payment_type-banktransfer input
{
	display: table-cell;
	vertical-align: middle;
}


section#how label#cc-card,
section#how label#cc-card.all
{
	display: inline-block;
	background-color: transparent;
	background-image: 	url("images/cc-visa.svg"),
						url("images/cc-mastercard.svg"),
						url("images/cc-discover.svg"),
						url("images/cc-amex.svg");
	background-size: 	37px 23px,
						37px 23px,
						37px 23px,
						37px 23px;
	background-position: 	0px 50%,
							38px 50%,
							76px 50%,
							120px 50%,
							160px 50%;
	background-repeat: no-repeat;
	height: 46px;
	width: 320px;
	color: transparent;
	top: 0;
	left: 24px;
}

section#how label#cc-card.visa
{
	background-image: url("images/cc-visa.svg");
	background-position: 0 50%;
}

section#how label#cc-card.mastercard
{
	background-image: url("images/cc-mastercard.svg");
	background-position: 0 50%;
}

section#how label#cc-card.discover
{
	background-image: url("images/cc-discover.svg");
	background-position: 0 50%;
}

section#how label#cc-card.amex
{
	background-image: url("images/cc-amex.svg");
	background-position: 0 50%;
}

section#how input#Card
{
	top: 14px;
	left: 0;
	width: 14px;
	background-color: transparent;

	-webkit-appearance: radio;
	-khtml-appearance: radio;
	-moz-appearance: radio;
	-ms-appearance: radio;
	-o-appearance: radio;
	appearance: radio;
}

section#how label#cc-paypal
{
	display: inline-block;
	background-color: transparent;
	background-image: url("images/cc-paypal.svg");
	background-size: 74px 46px;
	background-position: 0px 50%;
	background-repeat: no-repeat;
	height: 46px;
	width: 74px;
	color: transparent;
	top: 0;
	left: 222px;
}

section#how input#PayPal
{
	top: 14px;
	left: 206px;
	width: 14px;
	background-color: transparent;
	-webkit-appearance: radio;
	-khtml-appearance: radio;
	-moz-appearance: radio;
	-ms-appearance: radio;
	-o-appearance: radio;
	appearance: radio;
}

section#how #payment_type-banktransfer label
{
	background-color: transparent;
	background-image: url("images/cc-furikomi.svg");
	background-size: 37px 23px;
	background-position: 0px 50%;
	background-repeat: no-repeat;
	height: 46px;
	width: 74px;
	color: transparent;
	top: 0;
	left: 342px;
}

section#how #payment_type-banktransfer input
{
	top: 14px;
	left: 320px;
	width: 14px;
	background-color: transparent;

	-webkit-appearance: radio;
	-khtml-appearance: radio;
	-moz-appearance: radio;
	-ms-appearance: radio;
	-o-appearance: radio;
	appearance: radio;
}

input#listSignup
{
	top: 0;
	left: 0;
	width: 14px;
	background-color: transparent;

	-webkit-appearance: checkbox;
	-khtml-appearance: checkbox;
	-moz-appearance: checkbox;
	-ms-appearance: checkbox;
	-o-appearance: checkbox;
	appearance: checkbox;
}

fieldset#cc-info.hidden
{
	display: none;
}

section#how input#cardnumber
{
	width: 100%;
	position: relative;
}


section#how select#cpi_card-month,
section#how select#cpi_card-year
{
	width: 33.1%;
	margin-right: -2px;
}

section#how input#cvv-code
{
	width: 33.1%;
	margin-right: -2px;
}

fieldset#promo
{
	margin: 20px auto;
  display: none;
}

fieldset#promo input
{
	width: 100%;
	background-size: 20px 12px;
	background-position: 96% 50%;
	background-repeat: no-repeat;
}

fieldset#promo.valid input
{
	background-image: url("/coda/images/promo-valid.svg");
}

fieldset#promo.invalid input
{
	background-image: url("/coda/images/promo-invalid.svg");
}

section#checkout
{
	margin: 30px auto;
}

section#checkout fieldset#elist-signup
{
	display: block;
	text-align: center;
	margin: 20px auto;
}

section#checkout fieldset#elist-signup label
{
	font-size: 20px;
	line-height: 32px;
	color: #737b82;
	display: inline;
}

section#checkout fieldset#elist-signup input
{
	display: inline;
	line-height: 32px;
	vertical-align: 2px;
}

input#progressButton,
input#finish
{
	cursor: pointer;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;

	background: transparent;
}

section#checkout #submitButton
{
	background: #959ea6;
	position: relative;

	font-size: 30px;
	text-align: center;
	width: 100%;
	height: 46px;

	z-index: 8;
}

section#checkout #progressButton-new
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;

	height: 100%;
	width: 0%;

	background: #27c11f;

	-webkit-transition-property: width;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease;
}

section#checkout #submitButton input
{
	position: relative;
	background: transparent;
	font-size: 30px;
	line-height: 30px;
	z-index: 10;
	font-family: "Chrono Regular";
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
}

ul#notes
{
	text-align: center;
}

ul#notes li
{
	display: inline;

}
ul#notes a
{
	color: #419bf9;
	text-decoration: underline;
}

fieldset.error ::-webkit-input-placeholder
{ /* WebKit browsers */
	color: #B50013 !important;
}
fieldset.error :-moz-placeholder
{ /* Mozilla Firefox 4 to 18 */
	color: #B50013 !important;
	opacity: 1;
}
fieldset.error ::-moz-placeholder
{ /* Mozilla Firefox 19+ */
	color: #B50013 !important;
	opacity:	1;
}
fieldset.error :-ms-input-placeholder
{ /* Internet Explorer 10+ */
	color: #B50013 !important;
}

section#who fieldset.error select#country,
section#how fieldset.error select#cpi_card-month,
section#how fieldset.error select#cpi_card-year
{
	color: #B50013 !important;
}

#coda25-plugins header nav a#nav-plugins
{
	background-color: #ae4ea5;
	background-image: url("images/nav-plug-ins-active.svg");
}

/* ########################################### */
/*                                             */
/*                                             */
/*                                             */
/* ----- Wider than 540px -------------------- */
/*                                             */
/*                                             */
/*                                             */
/* ########################################### */

@media screen and (min-width: 540px)
{

	/* ----- PAGE SET-UPS -------------------- */

	html
	{
		padding: 0;
	}

	body
	{
		line-height: 32px;

		min-width: 550px;
		margin: 0 auto;

		position: relative;
		overflow-x: hidden;
	}

	header,
	section#new,
	section#summary,
	section#about,
	section#book,
	section#coda-ios,
	section#help,
	section#faq,
	section.form-section,
	ul#notes,
	footer
	{
		width: 560px;
		margin: 20px auto;
		padding: 0;
	}

	/* ----- HEADER -------------------- */

	header h1 a
	{
		padding-left: 100px;

		font-size: 96px;
		line-height: 96px;
		letter-spacing: -6px;
	}

	header p
	{
		font-size: 34px;
		line-height: 45px;
	}

	/* ----- MENU -------------------- */

	header nav a.button
	{
		display: inline-block;
		margin: 10px 23px 0px 0px;
	}

	header nav a#nav-help
	{
		margin-right: 0;
	}


	/* ----- HEADINGS -------------------- */

	body#coda25 h2
	{
		font-size: 70px;
		line-height: 70px;
		letter-spacing: -5px;
	}

	/* ----- MOVIE AREA -------------------- */

	section#moviearea
	{
		width: 458px;
		left: 0;
	}

	section#moviearea video
	{
		height: 408px;
		width: 557px;
	}

	/* ----- WHAT'S NEW -------------------- */

	section#new li
	{
		font-size: 26px;
		line-height: 32px;
	}

	section#new li h3
	{
		font-size: 26px;
		line-height: 32px;
	}

	/* ----- ABOUT -------------------- */

	section#about div
	{
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-o-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 20px;
		-moz-column-gap: 20px;
		-o-column-gap: 20px;
		column-gap: 20px;
	}

	section#about p
	{
		line-height: 32px;
	}

	/* ----- SUMMARY -------------------- */

	section#summary p
	{
		font-size: 20px;
		line-height: 32px;
	}

	/* ----- BOOK -------------------- */

	section#book div
	{
		background-size: 421px 186px;
		padding-top: 206px;
	}

	/* ----- CODA iOS -------------------- */

	/* ----- HELP -------------------- */

	section#help ul li.active p
	{
		font-size: 24px;
	}

	/* ----- FOOTER -------------------- */

	footer
	{

	}

	/* ----- BUY PAGE -------------------- */

	section#who,
	section#how,
	section#applepay,
	section#checkout
	{
		width: 540px;
		text-align: justify;
	}

	section#who input#city
	{
		width: 66.7%;
		margin-left: 0px;
		margin-right: -4px;
	}

	section#who input#state
	{
		width: 33.0%;
		margin-right: -1px;
	}

	section#who input#zipcode
	{
		width: 33.3%;
		margin-right: -4px;
	}

	section#who select#country
	{
		width: 66.4%;
		margin-right: -1px;
	}

}

/* ########################################### */
/*                                             */
/*                                             */
/*                                             */
/* ----- Wider than 824px -------------------- */
/*                                             */
/*                                             */
/*                                             */
/* ########################################### */

@media screen and (min-width: 854px)
{

	/* ----- PAGE SET-UPS -------------------- */

	body#coda25
	{
		width: 854px;
	}

	header,
	section#new,
	section#about,
	section#summary,
	section#book,
	section#coda-ios,
	section#help,
	section#faq,
	section.form-section,
	ul#notes,
	footer
	{
		width: 854px;
	}

	/* ----- HEADER -------------------- */

	header h1 a
	{
		padding-left: 137px;

		font-size: 160px;
		line-height: 160px;
		font-family: "Chrono Light Italic";
		letter-spacing: -11px;

		-webkit-background-size: 141px 137px;
		-moz-background-size: 141px 137px;
		-ms-background-size: 141px 137px;
		-o-background-size: 141px 137px;
		background-size: 141px 137px;
	}

	/* ----- MENU -------------------- */

	header nav
	{
		white-space: nowrap;
	}


	/* ----- HEADINGS -------------------- */

	body#coda25 h2
	{
		margin: 40px 0 20px 0;
	}

	/* ----- MOVIE AREA -------------------- */

	section#moviearea
	{
		height: 804px;
		width: 854px;
	}

	section#moviearea video
	{
		height: 803px;
		width: 1115px;
		left: -25px;
	}

	/* ----- WHAT'S NEW -------------------- */

	/* ----- ABOUT -------------------- */

	/* ----- SUMMARY -------------------- */

	/* ----- BOOK -------------------- */

	section#book div
	{
		background-position: top left;
		padding: 0 0 0 441px;
		min-height: 186px;
		text-align: left;
	}

	section#book a.ibooksButton
	{
		padding: 6px 20px 3px 20px;
	}

	/* ----- CODA iOS -------------------- */

	/* ----- HELP -------------------- */

	section#help ul
	{
		margin: 40px 0;
		height: 70px;
	}

	section#help ul li
	{
		position: absolute;
		width: 218px;
		background-position: 0 50%;
		background-repeat: no-repeat;
		margin: 0;
	}

	section#help ul li.active div.collapsed,
	section#help ul li div.expanded
	{
		opacity: 0;
		visibility: hidden;
	}

	section#help ul li div.collapsed,
	section#help ul li.active div.expanded
	{
		opacity: 1;
		visibility: visible;
	}

	section#help ul li#twitter
	{
		left: 0;
	}

	section#help ul li#library
	{
		left: 288px;
	}

	section#help ul li#email
	{
		left: 576px;
	}

	section#help ul li.active
	{
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0 !important;
		right: 0;
		bottom: 0;
		width: 794px;
	}

	section#help ul li h3
	{
		font-size: 30px;
		line-height: 30px;
		letter-spacing: -1px;

	}

	section#help ul li p
	{
		font-size: 14px;
		line-height: 16px;
		margin: 0;
	}
}

/* ! Retina Support */

@media (-webkit-min-device-pixel-ratio:2)
{
	header h1 a
	{
		background-image: url("./images/coda-icon@2x.png");
	}

}