/* HOMEPAGE */

div#preload { display: none; }

main { padding: 0 20px; }

article { clear:both; }

.thirds { position:relative; margin:15px; padding-bottom: 20px; } 

.thirds span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; }

.twothirds { position:relative; margin:15px; padding-bottom: 20px; } 

.twothirds span { position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; }

.home { width:268px; height:138px; border:1px solid #621217; margin-bottom:4px; }

.avatar { width:268px; height:268px; border:1px solid #621217; }

.mobileonly { display:none; }


/* HOMEPAGE: NEWSLETTER SIGNUP */

#signup { font-family: 'Merienda One', cursive; font-weight:bold; font-size:14px; color:#8a4f51; padding: 5px 0; }

#news { font-size: 24px; }

#newsletter { clear:both; width:93%; height: auto; margin: 15px; background: #d0b9b9 url("images/yarnball_white.png") no-repeat 106% center; overflow:hidden; }

#newsletter .c1, #newsletter .c2, #newsletter .c3 { float:left; }

#newsletter .c1 { margin:10px 15px; }

#newsletter .c2 { margin:15px; }

#newsletter .c2 input[type="text"]:hover { background: #e8e7d0; }

#newsletter .button { border: none; background: url('/images/go_up.png') no-repeat top left; width:52px; height:52px; }
#newsletter .button:hover { border: none; background: url('/images/go_down.png') no-repeat top left; width:52px; height:52px; }


/* TESTIMONIALS */

.hide { display: none; }

#block { margin:10px; clear:both; }

#speech { background: #efe2ee; padding: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

#bubble { height: 21px; margin-left: 40px; background: url(testimonials/images/speech-bubble.gif) no-repeat; }

#title { font-family: 'Merienda One', cursive; font-size:1.1em; /* font-weight:bold; */ padding-bottom:5px; }

#user { font-size:1em; font-style: italic; padding-top:10px; }

#avatar { float:left; margin-left:10px; padding-right:10px; padding-bottom:20px; }

#main { margin:20px; }

/* SELLERS LIST */

#seller { font-size: 1em; clear:both; border: thin solid #ccc; background-color: #e8e7d0; /* height:160px; */ margin-bottom:12px; overflow:hidden; }

#info { padding:10px 10px 5px 10px; } 

#location { font-size: 0.8em; font-style:italic; float:right; }

#shop { font-size: 1.1em; font-weight:bold; padding-bottom:5px; } 

#details { float: left; display:inline-block; } 

.picbar { padding: 0 4px 0 10px; }

.pic { padding:6px; }

@media only screen and (max-width:499px) {
#pic { display:block; width:300px; margin: 10px auto; }
#shop { clear: both; }
.picbar { display: block; }
.pic { display: block; margin: 0 auto; }
}
@media all and (min-width:500px) {
#pic { float:right; margin-top:-30px; padding-bottom:6px; padding-left:20px; }
#pictitle  { padding-right: 320px; }
}
@media only screen and (min-width:500px) and (max-width:959px) {
.pic { width: 31%; max-width:225px; height:auto; padding: 6px 1%; } 
} 
@media all and (min-width:960px) {
.picbar { display: block; margin: 0 auto; }
}

/* COMMISSIONS */

.commissions a {font-weight:bold;}

.box { clear:both; padding:10px 0; display: block;}

.divider { height:12; width:1; background-color:#003366; float:left; border-top:thin solid #003366; border-bottom:thin solid #003366; }

.prepledge { height:12; width:12; background-color:#CBA1A2; float:left; border-top:thin solid #003366; border-bottom:thin solid #003366; }

.pledged { height:12; width:12; background-color:#894E50; float:left; border-top:thin solid #003366; border-bottom:thin solid #003366; }

.unpledged { height:12; width:12; background-color:#ffffff; float:left; border-top:thin solid #003366; border-bottom:thin solid #003366; }

.table { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; }

.left { float:left; margin-left:-10px; width:100px; font-weight:bold; }

.right { float:right; font-weight:bold; margin-right:-8px; }

.pad { margin: 10px; }

table { font-size:100%; }

ul.list li { padding: 0 0 10px 10px; } 

.formQ, .formA, .formS { padding: 5px 10px; float:left; display: table-cell; vertical-align: top; font-size: 1em; }

.formQ { clear:both; min-width:190px; text-align:right; }

@media only screen and (max-width: 500px ) {
.box { margin: 0 auto; display:block;}
.formA, .formS { clear:both; }
.formQ { text-align:left; }
}

#box_open { background: #efe2ee; padding: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

#intro_text { font-family: 'Merienda One', cursive; font-size:1.1em; /* font-weight:bold; */ padding-bottom:5px; }

.comm_button { display:inline-block; padding-right:10px; padding-bottom:10px; }

/* CSS Button */

.commissions .cssbutton {
	background-color:#621217;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border: 1px solid #000000;
	color:#FFFFFF !important;
	font-family:Verdana;
	font-size:16px;
	font-weight:normal !important;
	display:inline-block;
	margin: 0 5px;
	padding:3px 6px;
	height:20px;
	line-height:20px;
	width:120px;
	text-decoration:none;
	text-align:center;
}
.commissions .cssbutton:hover {
	background-color:#8a4f51;
	border: 1px solid #621217;
	color:#cccccc;
	cursor:pointer;
}

.commissions .cssbutton2 {
	background-color:#e2cae0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border: 1px solid #000000;
	color:#621217 !important;
	font-family:Verdana;
	font-size:12px;
	font-weight:normal !important;
	display:inline-block;
	margin: 0 5px;
	padding:3px 6px;
	height:14px;
	line-height:14px;
	width:90px;
	text-decoration:none;
	text-align:center;
}
.commissions .cssbutton2:hover {
	background-color:#efe2ee;
	border: 1px solid #621217;
	color:#cccccc;
	cursor:pointer;
}


/* HOMEPAGE: SLIDESHOW */

#slider { margin: 0 auto; max-width:777px; }

/* HOMEPAGE: QUOTE GENERATOR */

.quotes { position:relative; margin:15px; padding-bottom: 15px; }

.quotes span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; } 

#stars { position:relative; text-align:center; }

#stars img { padding:0 6px; width: 5%; height:auto; }

#randomquote { position:relative; display:block; margin:0 100px; padding:20px 0 0 0; color: #8a4f51; }
 
#randomquote #quote { font-family: 'Merienda One', cursive; font-size: 18px; text-align: center; }

#randomquote #cite { text-align:right; font-size: 12px; margin:5px 30px; }

#openquote { position:absolute; top:40px; left:0px; width:102px; height:64px; background-image:url(/images/openquote.png); }

#closequote { position:absolute; bottom:10px; right:0px; width:102px; height:64px; background-image:url(/images/closequote.png); }

/* 404: INFO BOX */

.widebox { clear:both; width:93%; height: auto; margin: 15px; background: #d0b9b9 url("images/yarnball_white.png") no-repeat 106% center; overflow:hidden; font-size: 13px;}

.widebox2 { clear:both; width:93%; height: auto; margin: 15px; background: #d0b9b9 no-repeat 106% center; overflow:hidden; font-size: 13px;}

.widebox .text, .widebox2 .text { padding: 15px; }

.widebox .title, .widebox2 .title { font-family: 'Merienda One', cursive; font-weight:bold; font-size:20px; text-transform: capitalize; color:#8a4f51; padding: 5px 0; }

/* RESPONSIVE STYLES */

@media only screen and (max-width: 599px) {
.thirds, .twothirds { text-align: center; max-width: 320px; padding-left: 10px; padding-right:10px; margin: 0 auto; }
.thirds img, .twothirds img { margin-bottom: 10px; }
#slider, .quotes { display: none; }
.mobileonly { display:inline; }
#newsletter, .widebox, .widebox2 { text-align: center; max-width: 400px; margin-left: auto; margin-right: auto; background: #d0b9b9; }
#newsletter .c1, { width:100%; }
#newsletter .wrap { display: inline-block; text-align: center; margin: 0 auto; padding: 0 10px; }
#newsletter .c2 input[type="text"] { width:200px; border: 1px solid #8a4f51; }
}

@media only screen and (max-width: 379px) {
#newsletter .c2 { width:100%; text-align:center; margin: 0 auto;}
#newsletter .c3 { width:100%; text-align:center; margin: 15px auto 20px auto; }
}

@media only screen and (min-width: 380px) and (max-width: 599px) {
#newsletter .c2 { display: inline-block; margin-left: 10px; }
#newsletter .c3 { display: inline-block; padding: 15px 0 0 0; margin-right: 10px; }
}

@media only screen and (min-width: 600px) and (max-width: 959px) {
.thirds { clear:both; min-height: 120px; }
.thirds img, .twothirds img { float: left; margin: 0 15px 20px 0; }
.thirds .title, .twothirds .title { padding-top: 10px; }
.twothirds { clear: both; min-height: 250px;}
.avatar { float: left; margin-right: 15px; }
#newsletter .c1 { width:93%; }
#newsletter .wrap { clear: both; margin: 0 auto; }
#newsletter .c2 { margin: 0 15px; }
#newsletter .c3 { padding: 5px 0 15px 0; }
#newsletter .c2 input[type="text"] { width:200px; border: 1px solid #8a4f51; }
}

@media only screen and (max-width: 629px) {
#commission_graph { display: none; }
}

@media all and (min-width: 630px) {
#commission_table { display: none; }
}

@media all and (min-width: 750px) {
#left { float:left; position:relative; width:360px; max-width:48%; }
#right { float:right; position:relative; width:360px; max-width:48%; }
}

@media all and (min-width: 851px) {
 .main2col { flex: 3 0px; order: 2; }
 .nav2col { flex: 1 auto; order: 1; max-width:130px; } 
}

@media all and (min-width: 960px) {
.thirds { float: left; width: 270px; min-height: 120px; }
.twothirds { float: left; width: 570px; min-height: 250px; }
.avatar { float: left; margin-right: 30px; }
#newsletter, .widebox { width:870px; height:100px; }
.widebox2 { width:870px; }
#newsletter .c1 { width: 255px; }
#newsletter .c2 { width: 270px; }
#newsletter .c3 { padding-top: 24px; }
#newsletter .c2 input[type="text"] { width:268px; border: 1px solid #8a4f51; }
}