html {
		
		background-color: #9ea4a7;
}

body {
	margin: auto;
	font-family: "Verdana", "Arial", sans-serif;
	color:#444;
	max-width:550px;
	margin-top:30px;
}

h1, h2, h3, h4, h5, h6 {
	line-height: normal;	
}

h1 {
	font-size:24px;
	font-weight: normal;	
}

input[type=number] {
    width:35px;
    text-align:right;
}

h2 {
	font-size:18px;
	font-weight: normal;
	margin-bottom:10px;	
}

h3 {
	font-size:18px;
	font-weight: normal;
	margin-bottom:10px;
	border-bottom:1px solid black;	
}

h3 small {
	display: inline;	
	font-weight: bold;
	font-size:10px;
}

h6 {
	font-size:12px;	
}

p {
	font-size:12px;	
	line-height: 18px;
	margin-bottom:10px;
}

small {
	font-size:12px;	
	font-weight: normal;
	display: block;
}

ol {
	list-style-type: decimal;	
	font-size:12px;
	margin-left:25px;
	margin-bottom:10px;
}

li {
	margin-top:5px;	
	line-height: normal;
}

ul {
	font-size:12px;	
}

label {
	font-size:12px;
	font-weight: bold;		
	display:block;
	margin-top:10px;
	line-height: normal;
	margin-bottom:2px;
}

textarea {
	width:100%;	
	font-family: "Verdana", "Arial", sans-serif;
	font-size:12px;
	color:#444;
}

input {
	font-family: "Verdana", "Arial", sans-serif;
	font-size:12px;
	color:#444;
}

a:link, a:visited, a:hover {
	text-decoration: underline;
	color:#3d577a;
}

a:hover {
	text-decoration: none;
}

.helpful {
	text-align: center;	
}

.light{
	font-weight: lighter;	
}

.field-error {
    font-weight:bold;
	color:#f00;	
    border:2px dotted #f00;
}

.correct {
	color:#387c33;
    font-weight:bold;
}

.default {
	background:url('/media/img/default.gif');
	background-repeat: repeat-x;	
	padding:5px;
	border:1px solid #9ea4a7;
}

.cancel {
	background:url('/media/img/cancel.gif');
	background-repeat: repeat-x;
	padding:5px;
	border:1px solid #9ea4a7;	
}

a:link.cancel, a:visited.cancel, a:hover.cancel, a:link.default, a:visited.default, a:hover.default {
	color:#fff;	
	text-decoration: none;
}

a:hover.cancel, a:hover.default {
	text-decoration: underline;	
}

.clear {
	clear:both;	
}

.indent {
	padding-left:20px;
}

.indent input {
	float:left;
}

.error {
	color:#f00;	
}

.button-list {
	text-align: center;
	margin-top:10px;	
}

#header {
	background-color:#ffffff;	
	text-align: center;
	max-width:520px;
	margin:auto;
}

#header img {
	padding:15px 0px 10px 0px;	
}

.ribbon {
	background-color:#203651;
	padding:1px;
}

.ribbon h1 {
	color:#ffffff;	
	max-width:420px;
	margin: auto;
	line-height: normal;
	padding-top:10px;
}

.ribbon p {
	color:#ffffff;	
	max-width:420px;
	margin: auto;
	line-height: 18px;
	font-size:14px;	
	margin-top:10px;
	margin-bottom:15px;
}

#buttons {
	font-size:14px;
	font-weight: bold;	
	padding-bottom:8px;
	padding-top:15px;
	text-align: center;	
}


#buttons .default {
	margin-right:30px;	
}

#buttons .cancel {
	margin-left:30px;	
}



#nav {
	background-color:#15263c;
	width:100%;
	overflow:hidden;
	font-size:12px;	
}

#nav ul {
	
	list-style:none;
	margin:0 auto 0 auto;
	text-align:center;
	padding:10px;
}

#nav ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
	margin:0 5px 0 5px;
}

#nav a:link, #nav a:visited, #nav a:hover {
	
	margin:0 0 0 1px;
	padding:3px 10px;
	color:#fff;
	text-decoration:none;
	border-bottom:3px solid #15263c;
}

@media (max-width: 500px) {
    #nav a:link, #nav a:visited, #nav a:hover {
        line-height:25px;
    }

    .ribbon {
        padding-left:10px;
        padding-right:10px;
    }
}

#nav a:hover {
	border-bottom:3px solid #9ea4a7;
}

#nav a.active:link, #nav a.active:visited {
	border-bottom:3px solid #f99725;
}

#content {
	background-color:#fff;
	margin:auto;
    padding:20px;
	max-width:480px;
}

.block {
	clear:both;
	padding-top:20px;	
}

#content-features table {
	clear:both;
	display: block;
}

#content-features td {
	padding:5px;
	vertical-align: top;
	padding-bottom:20px;
}

#content-instructions li {
	margin-bottom:20px;
}

#passcode-block {
	float:left;
	width:200px;
}

#other-settings  {
	float:right;
	width:200px;	
}

#other-settings h6 {
	margin-top:10px;
}

#other-settings label {
	font-weight: normal;
	margin-top:5px;
}

table.questions {

	margin: auto;
}

.questions thead th {
	font-size:12px;
	padding-left:5px;
	padding-right:5px;
}

.questions tbody td {
	font-size:12px;
	padding-left:5px;
	padding-right:5px;
	padding-top:3px;
	padding-bottom:3px;
}
.questions tbody tr.even td {
	background-color:#efefef;
}

#points-input {
	float:right;
}

#answer-template textarea {
	height:15px;
	width: calc(100% - 35px);
    margin-bottom:5px;
    resize:vertical;
    overflow-x:hidden;
}

#answer-template .answer-tag {
    margin-right:5px;
}

#answer-template input {
	float:left;
	height:13px;
	width:13px;
	padding:0px;
    padding-right:2px;
}

#answer-template .clear {
	margin-top:5px;
}

#answer-template label {
	margin-bottom:5px;
}

#answer-template p {
	 text-align: center;
}

#publish {
	background-color:#f00;	
	color:#fff;
	font-size:48px;
	padding:20px;
	margin-top:30px;
}

#start-help {
	width:160px;
	float:right;
	margin-top:20px;
}

#start-help h4, #content-build h4 {
    margin-top:15px;
	color:#ff0000;
	font-size:12px;
}

#start-form {
	margin-top:10px;
	float:left;
	width:250px;	
}

.red {
	color:#ff0000;	
}

.red a:link, .red a:visited, .red a:hover {

}

.data {
	overflow: auto;
	padding-bottom:20px;
	margin-bottom:20px;	
}

.report-table {
	background-color: #fff;
}
.report-table td {
	font-size:12px;
	padding:5px;
	white-space: nowrap;
}

.report-table th {
	font-size:12px;	
	line-height: 16px;
}

.report-table tfoot th {
	padding-top:5px;	
}

.question-grid {
	background-color: #fff;	
}

.question-grid thead th[title] {
	cursor: help;	
}

.question-grid td {
	font-size:12px;
	padding:5px;
	text-align: center;
}

.question-grid th {
	font-size:12px;	
	white-space: nowrap;
}

.question-grid tbody th {
	font-weight: normal;
	text-align: left;
	vertical-align: middle;	
	padding-left:3px;
}

.question-grid tbody tr.even td, .question-grid tbody tr.even th, .report-table tbody tr.even td, .report-table tbody tr.even th {
	background-color:#efefef;
	

}

#tooltip {
	position:absolute;
	border:1px solid #333;
	background:#000;
	padding:2px 5px;
	color:#fff;
	display:none;
	max-width:300px;
	font-size:12px;
}

#to-do {
    float:left;
	width:300px;
}

#util {
	float:right;
	width:120px;	
}

#util ul {
	list-style-type: circle;
	margin-left:20px;	
}

.errorlist {
    color:#f00;
}

.submit {
    display:block;
    margin:auto;
}

#supporter {
    float:right;
    width:220px;
}

#freeloader {
    float:left;
    width:220px;

}

#feature-list {
    list-style-type:circle;
    margin-left:15px;
}

.help {
    color:#d630c1;
    font-weight:bold;
    font-size:12px;
}

#test-list {
    margin-bottom:20px;
    width:100%;
}
#test-list th {
    padding:3px; 
    font-size:14px;
    border-bottom:3px solid #f80;
}

#test-list td {
   padding:3px; 
   font-size:12px;
}

#top-menu {
    font-size:12px;
    text-align:right;
    clear:both;
    padding:5px;
}

.password-hide {
    display:none;
}

.success {
    font-weight:bold;
    color:#f80;
}

.even td {
    background-color:#efefef;
}

#question-number {
    float:right;
}

#loading {
    font-family:Courier New, Courier New, monospace;
    text-align:center;
    font-size:24px;
    margin-top:20px;
}

#search-results {
	background-color: #fff;
}
#search-results td {
	font-size:12px;
	padding:5px;
}

#search-results th {
	font-size:12px;	
	line-height: 16px;
}

#search-results tfoot th {
	padding-top:5px;	
}

.lighter {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

#security {
    float:right;
    width:150px;
}

#payment-errors {
    font-size:14px;
    color:#ff0000;
    padding-top:10px;
}

ins {
    text-decoration:underline;
}

.radios {
}

.radios label {
    margin-top:5px;
}

.radios input {
    vertical-align:middle;
    margin-top:-1px;
}

.is-survey-question {
    margin-top:3px;
    font-weight:normal;
    margin-bottom:20px;
    display:inline-block;
}

#search-test {
    display:block;
    width:100%;
}

#search-info {
    display:none;
    font-style:italic;
    padding-top:3px;
    padding-bottom:3px;
    background-color:#ffffaf;
}














fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
    margin-top:20px;
}

legend {
    box-sizing: border-box;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
    font-size: 18px;
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}

#order-total {
    width:100%;
    margin-top:10px;
    font-size:14px;
    line-height:18px;
    border-collapse:collapse;
}

#order-total tr td:last-child {
    text-align:right;
}

#order-total tr td {
    padding-bottom:5px;
    padding-top:5px;
}

#order-total .total td {
    border-top:3px solid black;
}


/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    display:block;
    font-size:20px;
    width:100%;
    border:1px solid #b8c3cc;
    border-radius:3px;
    padding:3px;
    font-family: 'Cormorant Garamond', serif;
    background-color:#fff;
}

.StripeElement--focus {
}
.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.card-error {
    color:#ff0000;
    font-weight:bold;
    font-size:14px;
}

.promise {
    background-color: #fff587;
    padding: 10px;
}

#convince {
    float:right;
    width:300px;
    margin-top:30px;
    padding:10px;
    box-sizing:border-box;
}

#convince h2 {
    font-size:18px;
    line-height:normal;
}

#trust {
    margin-top:10px;
    margin-bottom:35px;
    text-align:center;
}

#trust img {
    padding-left:50px;
    padding-right:50px;
}


.third {
    padding-right:30px;
    float:left;
    width:33%;
    box-sizing:border-box;
}


#username-available {
    font-size:12px;
}

#username-available .success {
    color:#008833;
    font-weight:bold;
}


#register input[type='text'], #register input[type='password'] {
    line-height: 24px;
    font-size: 16px;
    height: 24px;
    display:block;
    width:100%;
}

#register td {
    padding-right:20px;
}

#register table {
    width:100%;
}

#register td:last-child {
    padding-right:0px;
}

label input[type='checkbox'] {
    vertical-align:middle;
    margin-left:0;
}

input[type='radio'] {
    margin-left:0;
}

.cke_chrome {
    border: 1px solid #f2f2f2 !important;
}

#spam ~ #spam-info {
    visibility:hidden;
    opacity:0;
    background-color: #ffffaf;
    display:inline-block;
    height:0;
    overflow:hidden;
}

#spam:checked ~ #spam-info {
    height:auto;
    display:inline;
    opacity:1;
    visibility:visible;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
