/* defaults */

html {
	height: 100%;
    background-color: mediumspringgreen;
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: 'Klaus', 'Menlo', monospace;
}

input {font-family: 'Klaus', 'Menlo', monospace;}

a {text-decoration: none;}
a:hover, #hover-color {color: mediumspringgreen;}
#hoverColor {display: none;}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: normal;
	line-height: 1.25em; /*125%*/
	margin-bottom: .5em;
}

h1, h2, h3 {
	font-weight: bold;
}

h1 {font-size: 2em; /* 32px */}
h2 {font-size: 1.5em; /* 24px */}
h3 {font-size: 1.25em; /* 20px */}
h4 {font-size: 1em; /* 16px */}
h5 {font-size: 0.875em; /* 14px */}
h6 {font-size: 0.75em; /* 12px */}

p {
	margin-top: 0;
	margin-bottom: 1em; /*16px*/
	font-size: 1em; /*16px*/
	line-height: 1.25em; /*20px*/
}

p a, .show-link a {border-bottom: 1px solid mediumspringgreen;}

ul {margin: 0;padding: 0;list-style: none;}

img {vertical-align: middle;}

.underline {border-bottom: 1px solid;}

/* general */
	
#wrapper {
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	text-align: center;
}

.hover-item {display: none;}
.hover-class:hover .hover-item {display: block;}

.width25, .width33, .width50, .width66, .width75 {
	float: left;
}

.width25 {width: 25%;}
.width33 {width: 33%;}
.width50 {width: 50%;}
.width66 {width: 66%;}
.width75 {width: 75%;}
.width100 {width: 100%;}

.uppercase {text-transform: uppercase;}
.align-left {text-align: left;}
.no-margin {margin: 0;}
.clear {clear: both;}

.image-margin, .video-margin {margin-bottom: 20px;}
.content.image-full-screen {width: 100%;max-width: none;}

.separator {
    font-size: 1em; /* 16px */
    line-height: 1em;
    margin: 18px 0px 19px 0px;
}

.column-padding {
    padding-right: 2em;
}

.messages {
    margin: 25px 0;
}

/* font sizes */

.small {font-size: 0.875em; /* 14px */}
.large {font-size: 5em;/* 80px */}
.huge {font-size: 6em;/* 96px */}
.huge {line-height: 1.2em;}
/* header */

#header {
	position: fixed;
	top: 0px;
	padding: 19px 0 15px 0;
	width: 100%;
	z-index: 3;
}

#logo {
	font-family: 'Coppers Brasses', 'Klaus', monospace;
	font-size: 1em; /* 16px */
	text-transform: uppercase;
	letter-spacing: 0.5em;
	height: 2em; /* 32px */
}

/* navigation */

.navigation {
	font-size: 0.875em; /* 14px */
    line-height: 1.25em;
}

.navigation li {
	display: inline;
	margin: 5px;
	padding-bottom: 2px;
	border-color: mediumspringgreen !important;
}

#section-retail-fonts li.retail-fonts, #section-custom-fonts li.custom-fonts, #section-lettering li.lettering,
#section-about li.about, #section-cart li.cart, #section-account li.account, #section-login li.login {
	border-bottom: 1px solid;
}

.subsection-specimen li.specimen, .subsection-styles li.styles, .subsection-features li.features, .subsection-buy li.buy,
.subsection-profile li.profile, .subsection-order-history li.order-history {
	border-bottom: 1px solid;
}

/* container */

#container {
	padding: 90px 0 110px 0;
	z-index: 1;
}

#theme-form {
	margin-bottom: 10px;
	cursor: pointer;
}

.theme-icon {
	font-size: 1.125em; /* 18px */
	cursor: pointer;
}

.theme-name {
	display: none;
}

#theme-name {
	position: absolute;
	margin-top: 10px;
	width: 100%;
	text-align: center;
	z-index: 2;
}

#theme-name .theme-name {
	padding: 4px 7px 5px 7px;
	border: 1px solid mediumspringgreen;
	font-size: 0.875em; /* 14px */
}

.content {
	width: 75%;
	max-width: 1200px;
	margin: 0 auto;
}

.content img {
	width: 100%;
	height: auto;
}

.content video {
    width: 100%    !important;
    height: auto   !important;
}

.content iframe {
    display: block;
}

.margin50 {margin: 50px 0;}

.margin25 {margin: 25px 0;}

/* footer */

#footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 18px 0 12px 0;
}

#footer h6 {
	opacity: 0.5;
	margin-top: 5px;
}

/* typefaces */

#typeface-list .typeface {
	margin-bottom: 20px;
    padding: 20px 0 30px 0;
}

#typeface-navigation {
	margin-bottom: 20px;
}

.typeface-images {
	margin-bottom: 40px;
}

/* features */

.fontfeature-image {
    cursor: pointer;
    float: right !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.fontfeature-image .on, .fontfeature-image .off {
    fill: currentColor;
	width: 100%;
	height: 100%; /* weird */
}
.fontfeature-image .off {opacity: .5;}

.fontfeature-image .on {display: block;}
.fontfeature-image .off {display: none;}

.fontfeature-image:hover .on {display: none;}
.fontfeature-image:hover .off {display: block;}

/* project */

#project-list .project {
	margin-bottom: 20px;
}

.project-detail {
	position: relative;
}

.project-detail .prev-link, .project-detail .next-link {
	position: absolute;
	top: 50%;
	margin-top: -25px;
	font-size: 50px;
}

.project-detail .prev-link {
	left: 5%;
	margin-left: -25px;
}

.project-detail .next-link {
	right: 5%;
	margin-right: -25px;
}

.project-images {
	margin-bottom: 50px;
}

.grayscale-image {
	/* http://demosthenes.info/blog/540/Animating-CSS3-Image-Filters */
	-webkit-transition: -webkit-filter 0.2s ease-in-out;
	/* http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS */
	-webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
	filter: gray; filter: grayscale(100%);
}

.grayscale-image:hover {
	-webkit-filter: none;
	filter: none;
}

/* page */

.page-images {
	margin-bottom: 50px;
}

.http-status {
    margin: 50px 0;
}

.http-status .replaced-svg {
    fill: currentColor;
    display: block;
    width: 100%;
    height: 100%;
}

/* featured items */

#featured-items {
    margin-top: -10px;
}

.featured-item {
	position: relative;
	float: left;
    width: 50%;
}

.featured-link {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.featured-hover {
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -27px; /* 5+20+4+18+7/2 */
}

.featured-info {
	display: inline-block;
	padding: 5px 20px 7px 20px;
	color: #444;
	background-color: mediumspringgreen;
}

.featured-name {
	border-bottom: 1px solid;
	padding-bottom: 2px;
	margin: 0;
}

.featured-type {
	padding-top: 2px;
	margin: 0;
}

.featured-image {
    padding: 10px;
}

.featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

.featured-image .replaced-svg {
	fill: currentColor;
	display: block;
	width: 100%;
	height: 100%; /* weird */
}

#featured-typeface {
}

.featured-typeface-image {
    position: relative;
}

.featured-typeface-image .content {
    overflow: hidden;
}

.theme-night .featured-typeface-image img {
    margin-left: -100%;
}

.featured-typeface-image img {
	display: block;
	width: 200%;
	height: auto;
}

.featured-typeface-image {
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition:background 0.2s ease-in-out;
    -o-transition:background 0.2s ease-in-out;
    transition:background 0.2s ease-in-out;
}

.featured-typeface-image:hover {
    background-color: mediumspringgreen;
}

/* FAQ */

.faq {margin-bottom: 1.5em;}
.question {margin-bottom: 1.5em;}

/* UI */

.icon {
	font-size: 1.125em; /* 18px */
	line-height: 1em;
}
.ui-selectmenu-text:after {
    content: " \2304";
}

.slider {
	margin-left: 9px;
	margin-right: 3px;
	float: right;
	cursor: pointer;
}

.normal {
	cursor: default !important;
}

.buy-button {
    position: relative;
    font-size: 1.125em; /* 18px */
	line-height: 1em;
    display: inline-block;
	padding: 9px 25px 10px 25px;
    margin: 5px 0 15px 0px;
    border-radius: 5px;
}

.buy-button a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

.second-buy-button {
    margin-bottom: 50px;
}

.subsection-buy .buy-button {
    display: none;
}

.typesetter {
	visibility: hidden;
	height: 26px;
    margin-bottom: 10px;
}

.editing .typesetter {
	visibility: visible;
}

.single .typesetter .remove-button {
	visibility: hidden;
}

.typesetter label, .typesetter select, .add-button {
	display: inline-block;
	vertical-align:top;
	padding: 3px 9px;
	height: 20px;
	cursor: pointer;
}

.contenteditable {
	visibility: hidden;
	outline: 0px solid transparent;
	margin-bottom: 20px;
}

.click-to-edit {
	display: none;
	position: absolute;
	margin-top: 5px; /* to check */
	width: 100%;
	text-align: center;
	cursor: pointer;
}

.click-to-edit span {
	padding: 5px 7px;
	border: 1px solid mediumspringgreen;
}

.editable-style {
	position: relative;
	margin-bottom: 20px;
}

.editable-style:hover .click-to-edit {
	display: block;
}

.editable-style.editing .click-to-edit {
	display: none;
}

.payment-loading {
    width: 100px;
    height: 51px;
}

.loader {
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("loading.gif");
}

/* buy form */

#buyform ul, #shortcuts ul {
	font-size: 1.125em; /* 18px */
	margin-bottom: 1em;
}

#buyform li div, #shortcuts li div {
	padding: 10px;
	margin-right: 50px;
}

#buyform label, #shortcuts label {
	padding: 0 5px;
}

#total-price {
	font-size: 1.125em; /* 18px */
	padding: 10px 20px;
	display: inline-block;
	margin-bottom: .75em;
}

input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label:before {
	content: "\2610";
	cursor: pointer;
	padding-right: 10px;
}
input[type="checkbox"]:checked + label:before {
	content: "\2612";
}

label.font-price, label.package-price {
	float: right;
}

#license {
	height: 44px;
	margin-bottom: 1em;
}

#hidden_license_choices {
    display: none;
}

.base-price {
	display: none;
}

#buytype {
	position: relative;
}

#right-column {
	position: absolute;
	left: 66%;
}

/* cart */

#cart {
}

.cart-item div {
	margin-bottom: 20px;
}

.cart-item ul {
	margin-top: 10px;
	margin-left: 65px;
	line-height: 1.5em;
}

#cart .item-name, #cart .item-price {
	font-size: 1.125em; /* 18px */
	line-height: 1.2;
	padding: 10px 15px;
	/*height: 21px;*/
}

#cart .remove-item {
	position: absolute;
    font-size: 1.125em; /* 18px */
	line-height: 1.2;
	width: 40px;
    height: 40px;
    border: none;
    outline: none;
    cursor: pointer;
    color: inherit;
}

#cart .item-name {
	margin-left: 50px;
	margin-right: 10px;
}

#cart .item-price {
	display: inline-block;
}

/* license */

.license-agreement {
    float: none;
    margin: 40px auto;
 }

.license-frame {
    padding: 20px;
}

.license-agreement ul {
    list-style: disc;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 1em;

}
.license-agreement li {
    margin-bottom: 1em;
}

#i_agree {
    margin-top: -20px;
    margin-left: 30px;
    display: block;
}

/* checkout */

ul.checkout-step li {
    display: inline-block;
    padding: 10px 15px;
}

#id_country-button {
    background-color: inherit;
    border: 1px solid;
    font-size: 1.125em;
    line-height: 1em;
    height: auto;
    padding: 8px 15px;
}

.order-details {
    max-width: 450px;
    min-width: 300px;
	margin: 40px auto;
}

.order-items {
   padding: 20px;
   margin-bottom: 40px;
}

.order-item {
    margin-bottom: 1em;
}

.order-item:last-child {
    margin-bottom: 0;
}

.order-item .item-price, .order-receipt {
    float: right;
}

.order-item ul {
    margin-bottom: 1em;
}

.order-item ul li {
    margin-left: 20px;
}

#cvc-help {
    cursor: pointer;
}

#cvc-image {
    display: none;
    position: absolute;
    margin-left: 70px;
    margin-top: -60px;
    border-radius: 5px;
    /*width: 320px;*/
    /*height: 200px;*/
    width: 160px;
    height: 100px;
    background-image: url('cvc.svg');
    /* remove this */
    background-size: 100%;
}

/* registration */

.registration {
	width: 300px;
	margin: 40px auto;
}

.registration ul {
	margin-bottom: 20px;
}

.registration li {
	margin-bottom: 10px;
}

.registration label {
	display: block;
	padding: 10px 15px;
	margin-bottom: 10px;
	font-size: 1.125em; /* 18px */
}

.registration input, .registration textarea {
	border: none;
	outline: none;
	font-size: 1.125em; /* 18px */
	line-height: 1em;
}

.registration input[type="text"], .registration input[type="password"], .registration input[type="email"], .registration textarea {
	color: inherit;
	border-color: inherit;
	background-color: inherit;
	width: 278px; /* 300-20-2 */
	border: 1px solid;
	padding: 5px 10px;
	margin-bottom: 10px;
}

.registration textarea {
    border-color: inherit !important;
    resize: none;
    font-family: "Klaus";
    height: 5em;
}

.registration input.input-month {
    width: 123px;
    float: left;
    margin-right: 10px;
}

.registration input.input-year {
    width: 123px;
    clear: left;
}

.submit-button {
	cursor: pointer;
    border-radius: 5px;
    margin: 5px 0;
    display: inline-block;
}

/* jQuery UI */

.ui-slider {
	position: relative;
	margin-top: 9px;
	width: 100px;
	height: 1px;
}

.ui-slider-handle {
	position: absolute;
	z-index: 1;
	width: 7px;
	height: 7px;
	top: -3px;
	outline: 0px solid transparent;
	border-radius: 4px;
}

.ui-button {
	padding: 3px 9px;
	height: 20px;
	line-height: 18px;
	border: none;
	outline: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	box-sizing: content-box;
}

.ui-selectmenu-button {
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
    outline: none;
	cursor: pointer;
	padding: 3px 9px;
	height: 20px;
	font-size: 0.875em; /* 14px */
	line-height: 18px;
}

.ui-selectmenu-menu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
}

.ui-selectmenu-open {
	display: block;
}

.ui-menu-item {
	font-size: 0.875em; /* 14px */
	padding: 3px 9px;
	cursor: pointer;
}

.large-ui .ui-widget {
	font-size: 1.125em; /* 18px */
	line-height: 1.2em;
	padding: 10px 15px;
	height: 21px;
}

.selectmenu-overflow {
	overflow: auto;
	height: 300px;
}

.errorlist {
    color: red;
}


/* device */

#navigation-dropdown {
    display: none;
    font-size: 2em;
    width: 30px;
    position: absolute;
    left: 50%;
    top: 10px;
    margin-left: -15px;
}

.mobile #header {
    padding: 14px 0 10px 0; /*padding: 19px 0 15px 0;*/
}

.mobile #container {
	padding: 70px 0 110px 0;
}

.mobile #navigation-dropdown {
    display: block;
}

.mobile #header .navigation {
    display: none;
    margin-top: 10px;
    font-size: 1em; /* 0.875em */
}

.mobile #header .navigation.expanded {
    display: block;
}

.mobile #header .navigation li {
    display: block;
}

.mobile #header .navigation .navigation-separator {
    display: none;
}

#logo .letter {
    float: left;
    width: 50%;
    font-size: 2em;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

/* Small screens ----------- */
@media only screen and (min-width : 320px) {
    .huge {font-size: 2em;}
    .width25, .width33, .width50, .width66, .width75 {
        float: none;
        width: 100%;
    }
    #logo {
    }
    #right-column {
	    position: static;
	    left: 0;
    }
    #buyform li div, #shortcuts li div {
	    margin-right: 0px;
    }
    .content {
        width: 95%;
    }
    .featured-item {
        float: none;
        width: 100%;
    }
    #project-list .project {
        margin-bottom: 5px;
    }
}

/* Medium screens ----------- */
@media only screen and (min-width : 768px) {
    .huge {font-size: 6em;}
    .width25, .width33, .width50, .width66, .width75 {
        float: left;
    }
    .width25 {width: 25%;} .width33 {width: 33%;} .width50 {width: 50%;} .width66 {width: 66%;} .width75 {width: 75%;}

    #right-column {
	    position: absolute;
	    left: 66%;
    }
    #buyform li div, #shortcuts li div {
	    margin-right: 50px;
    }
    .content {
        width: 75%;
    }
    .featured-item {
        float: left;
        width: 50%;
    }
    #project-list .project {
        margin-bottom: 20px;
    }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}