/* YUI 2 Reset CSS
 * @from: http://developer.yahoo.com/yui/reset/
 * @date: 2009-11-04
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}


/* base-level layout element CSS file for tradechic.net.com
 * 
 * author: Slippy Douglas <{ES-EL-EYE-PEA-PEA-WHY-DEE} -webdesign-2 {at} {['d','y','p','p','i','l','s'].reverse.join} .com>
 * creation date: 2009-10-01
 */



body, html { height: 100%; }

body {
	background: #f7f7f7 url('/images/bg.floral.bk-tr.png') repeat fixed;
	color: #000;
	font: 12px/2 Tahoma, Helvetica, sans-serif;
	-webkit-text-size-adjust: none;
}

a { color: #f94ea7; }


.clear { clear: both; }


#height-base {
	position: relative; z-index: 1;
	height: auto !important; min-height: 100%;
	_height: 100%; /* IE 4-6 fix */
	/*overflow: hidden; /* to fix MobileSafari extra-space-on-right bug */
	margin: 0 auto;
}

/* content div; it's contents determine how big the page is */
#content-base {
	/*height: 700px;*/
	/*overflow: auto; zoom: 1;*/ /* TODO figure out a way to do this without overflow */
	/*position: relative;*/
	/*z-index: 1;*/
}

#main-back {
	position: absolute;
	height: 100%; /*top: 0; bottom: 0;*/
	width: 100%;
}

/* center the whole content area */
#main-back > .cont {
	width: 1000px;
	margin: 0 auto;
	height: 100%;
}

/* scope the rel position down to the left side */
#main-back > .cont > .body {
	position: relative;
	margin-right: 116px;
	height: 100%;
}


#main {
	padding-bottom: 112px; /* for the footer*/
}

/* center the whole content area */
#main > .cont {
	width: 1000px;
	margin: 0 auto;
}

/* scope the rel position down to the left side */
#main > .cont > .body {
	position: relative;
	margin-right: 116px;
	background: #f7f7f7 url('/images/bg.floral.bk-tr.png') repeat;
}

#main > .cont > .side {
	position: relative; z-index: 2;
	width: 116px;
	float: right;
}

#top {
	position: relative;
	height: 456px;
	background: url('/images/fill.sequins.w896.jpeg');
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#new-bar {
	position: absolute;
	bottom: 0; right: 0;
}

#new-bar > .back {
	position: absolute; z-index: 0;
	top: 0; bottom: 0; left: 0; right: 0;
	border: 1px solid rgb(249, 78, 167); margin: -1px;
	background: rgb(249, 78, 167);
	opacity: 0.9; filter: alpha(opacity=90);
	
	box-shadow: 		0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5); /* for Safari 4.0 */
	-webkit-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(0, 0, 0, 0.25);
}

#new-bar > .cont {
	position: relative; z-index: 1;
	padding: 4px 8px;
	text-align: right;
}

a#new-bar { display: block; text-decoration: none; color: #000; /* decoration color inherited */ }
a#new-bar:hover > .back { opacity: 1.0; filter: alpha(opacity=100); }
a#new-bar:active > .back { opacity: 0.5; filter: alpha(opacity=50); }

#new-bar .headline {
	font: bold 24px 'Myriad Pro', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#new-bar .subline {
	font: bold 11px 'Trebuchet MS', Helvetica, sans-serif;
	color: #000;
}

a#new-bar .subline { text-decoration: underline; }


#flash-bar {
	position: absolute; z-index: 20;
	bottom: 0; left: 0;
}

#flash-bar > .back {
	position: absolute; z-index: 0;
	top: 0; bottom: 0; left: 0; right: 0;
	border: 1px solid rgb(167, 78, 249); margin: -1px;
	background: rgb(167, 78, 249);
	opacity: 0.9; filter: alpha(opacity=90);
	
	box-shadow: 		0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5); /* for Safari 4.0 */
	-webkit-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(0, 0, 0, 0.25);
}

#flash-bar > .cont {
	position: relative; z-index: 1;
	padding: 4px 8px;
	text-align: right;
}

#flash-bar {
	font: bold 24px 'Myriad Pro', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}


#logo-banner {
	position: absolute;
	top: 16px;
	width: 100%;
	height: 188px;
	border: 1px solid #fff; margin: -1px;
	border-color: rgba(255, 255, 255, 0.9);
	overflow: hidden;
}

#logo-banner > .back {
	position: absolute;
	background: #fff;
	opacity: 0.8; filter: alpha(opacity=80);
	height: 100%;
	left: -32px; right: -32px;
	
	box-shadow: 		0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 32px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 32px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5); /* for Safari 4.0 */
	-webkit-box-shadow:	0 0 32px rgba(0, 0, 0, 0.5), inset 0 0 32px rgba(0, 0, 0, 0.25);
}

#logo-banner > .cont {
	position: relative; z-index: 1;
	margin: 16px;
	float: left;
}

#logo-banner > .cont > #logo {
}

#logo-banner > .cont > #tagline {
	width: 432px;
	margin: 8px 0;
	color: rgb(26, 26, 26);
	font-size: 2.5em;
	letter-spacing: 1.6pt; word-spacing: 1.6pt;
	font: 24px/24px 'Trebuchet MS', Helvetica, sans-serif;
	text-align: right;
	text-shadow: 0 0 3px rgba(255, 255, 255, 1.0);
}



#page-tabs {
	margin-top: 16px;
	position: fixed;
	width: 116px;
}


#page-tabs > a {
	display: block;
	height: 26px;
	margin-bottom: 4px;
	padding: 0 12px;
	background: #0d0d0d;
	border: 1px solid transparent;
	
	font: bold 16px 'Trebuchet MS', Helvetica, sans-serif;
	line-height: 26px; /* vertical centering */
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	
	box-shadow:			0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:	0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:	0 1px 2px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	
	opacity: 0.90; filter: alpha(opacity=90);
}

#page-tabs > a:hover { opacity: 1.0; filter: alpha(opacity=100); }
#page-tabs > a:active { opacity: 0.5; filter: alpha(opacity=50); }

#page-tabs > .current { background: #f94ea7; }


h1 {
	font: bold 36px 'Myriad Pro', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	text-transform: uppercase;
	color: #f94ea7;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	
	margin-bottom: 8px;
}

h2 {
	font: bold 16px 'Myriad Pro', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	
	height: 22px; line-height: 22px;
	padding: 0 16px;
	margin: -8px; margin-bottom: 8px; margin-top: 8px;
	
	background: #f94ea7;
	
	box-shadow:			0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	
	border: 1px solid transparent;
}
h3 {
	font-size: 18px;
	color: rgb(26, 26, 26);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	
	margin: 4px 0 8px;
}
h4 {
	font-size: 13px; font-weight: bold;
	color: rgb(52, 52, 52);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	
	margin: -16px 0 8px;
}


#middle a { opacity: 0.80; filter: alpha(opacity=80); }
#middle a:hover { opacity: 1.0; filter: alpha(opacity=100); }
#middle a:active { opacity: 0.5; filter: alpha(opacity=50); }


#middle p { text-indent: 24px; margin: 1em 0; }

#middle ul, #middle ol {}
#middle li { margin-left: 16px; list-style-type: disc; }

em { font-weight: bold; }
strong { font-weight: bold; font-size: 1.5em; line-height: 1.75; color: #666; }
strong a { color: #666; text-decoration: none; border-bottom: 2px dotted #ccc; }

.important {
	margin: 0 -8px;
	padding: 4px 12px;
	background: rgb(249, 78, 167);
	background: rgba(249, 78, 167, 0.825);
	border: 1px solid rgb(249, 78, 167);
	
	text-shadow:	0 -1px 2px rgba(249, 0, 130, 0.5),
					0 1px 1px rgba(0, 0, 0, 0.25);
	
	box-shadow:			0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	
	font-weight: 600;
	color: #fff;
}

.important strong, .important strong a { color: #fff; }
.important em { font-weight: bold; }
.important li { margin-left: 32px; }

button,
input[type='submit'],
.button {
	font-weight: bold; font-size: 1.5em; line-height: 1.75;
	opacity: 0.8; filter: alpha(opacity=80);
	
	/* from .important: */
	margin: 0 -8px;
	padding: 0 12px;
	background: rgb(249, 78, 167);
	background: rgba(249, 78, 167, 0.825);
	border: 1px solid rgb(249, 78, 167);
	
	text-shadow:	0 -1px 2px rgba(249, 0, 130, 0.5),
					0 1px 1px rgba(0, 0, 0, 0.25);
	
	box-shadow:			0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	
	font-weight: 600;
	color: #fff;
}

button:hover,
input[type='submit']:hover,
.button:hover { opacity: 1.0; filter: alpha(opacity=100); }

button:active,
input[type='submit']:active,
.button:active { opacity: 0.5; filter: alpha(opacity=50); }



#middle a.photo-zoom {
	opacity: 1.0; filter: alpha(opacity=100);
}

img.photo {
	border: 1px solid rgb(204, 204, 204);
	border-color: rgba(204, 204, 204, 0.5);
	
	box-shadow:			0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 1px rgba(255, 255, 255, 1.0);
	-moz-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 1px rgba(255, 255, 255, 1.0);
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 1px rgba(255, 255, 255, 1.0);
}

#middle { position: relative; }

#middle .shadow {
	position: absolute; z-index: 1;
	width: 100%; height: 8px;
}

#middle > .top.shadow {
	top: -8px;;
	background: url('/images/bg.inner-shadow-bottom.10op.h8.png') repeat-x top;
}

#middle > .bottom.shadow {
	bottom: -8px;
	background: url('/images/bg.inner-shadow-top.10op.h8.png') repeat-x top;
}


#middle > .row {
	position: relative;
}

#middle > .row > .cont {
	padding: 24px; padding-top: 8px;
}

#middle > .row > .top.shadow {
	top: 0;
	background: url('/images/bg.inner-shadow-top.10op.h8.png') repeat-x top;
	display: none;
}

#middle > .row > .bottom.shadow {
	bottom: 0;
	background: url('/images/bg.inner-shadow-bottom.10op.h8.png') repeat-x top;
	display: none;
}

#middle > .row.even {
	background: rgb(242, 242, 242) url('/images/bg.floral.wh-tr.png') repeat;
}
#middle > .row.odd > .top.shadow  { display: block; }
#middle > .row.even > .top.shadow { display: block; }

#middle > .row > .shadow {
	position: absolute; z-index: 1;
	width: 100%; height: 8px;
}

.boxes {
	margin: 0 -16px;
}

.box {
	float: left;
	font-size: 12px; line-height: 24px;
}

.left-half.box {
	float: left;
	width: 50%;
}

.right-half.box {
	float: right;
	width: 50%;
}

.box > .cont { position: relative; margin: 0 16px; }

.box .header-bar {
	background: #000;
}

.box .title-line {  }
.box .sub { font-size: 11px; line-height: 24px; color: #6a6a6a; }
.box .bottom { position: absolute; bottom: 16px; }

.box form { padding: 8px; }
label { color: #6a6a6a; }

input[type='text'],
input[type='password'],
textarea {
	font: 11px Tahoma, Helvetica, sans-serif;
	padding: 3px !important;
	background: #fff; color: #666;
	border: 1px solid black;
	border-color: rgb(204, 204, 204);
	border-color: rgba(204, 204, 204, 0.5);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.125); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.125); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.125);
}
input[type='text']:focus,
input[type='password']:focus,
textarea:focus {
	background: #f6f6f6; border-color: pink; color: #000;
}
input[type='text']:active,
input[type='password']:active,
textarea:active {
	background: #fff; border-color: pink; color: #000;
}


#whats-new-in.box { width: 67%; }
.preview #whats-new-in.box { width: 74%; }
#poll.box { width: 33%; }
.preview #poll.box { width: 36%; }
#join.box { width: 33%; }
#style-of-the-week.box { width: 67%; }
.preview #style-of-the-week.box { width: 74%; }
#blog.box { width: 100%; }

#whats-new-in.box .title-line,
#whats-new-in.box em { color: #402d56; }
#whats-new-in.box .header-bar { background-color: #402d56; }

#poll.box .title-line,
#poll.box em { color: #4578a1; }
#poll.box .header-bar { background-color: #4578a1; }

#join.box .title-line,
#join.box em { color: #c02342; }
#join.box .header-bar { background-color: #c02342; }

#style-of-the-week.box .title-line,
#style-of-the-week.box em { color: #2c5565; }
#style-of-the-week.box .header-bar { background-color: #2c5565; }

#blog.box .title-line,
#blog.box em { color: #6a6a6a; }
#blog.box .header-bar { background-color: #6a6a6a; }



#whats-new-in-new, #whats-new-in-used {
	width: 50%;
	float: left;
}

#whats-new-in-new .photo, #whats-new-in-used .photo {
	float: left;
	margin-right: 16px;
}

#style-of-the-week .photo {
	float: left;
	margin-right: 16px;
}


.left-edge {
	position: absolute; left: 0;
	height: 100%; width: 0;
}

.left-edge > .fade {
	position: absolute; left: -64px; z-index: 1;
	height: 100%; width: 64px;
	background: repeat-y right;
}

.left-edge > .shadow {
	position: absolute; left: 0; z-index: 1;
	height: 100%; width: 16px;
	background: repeat-y left;
}


.right-edge {
	position: absolute; right: 0;
	height: 100%; width: 0;
}

.right-edge > .fade {
	position: absolute; right: -64px; z-index: 1;
	height: 100%; width: 64px;
	background: repeat-y left;
}

.right-edge > .shadow {
	position: absolute; right: 0; z-index: 1;
	height: 100%; width: 16px;
	background: repeat-y right;
}

#main-back .left-edge > .fade { background-image: url('/images/bg.fade-left.wh-tr.w64.png'); }
#main-back .left-edge > .shadow { background-image: url('/images/bg.inner-shadow-left.10op.w16.png'); }
#main-back .right-edge > .fade { background-image: url('/images/bg.fade-right.wh-tr.w64.png'); }
#main-back .right-edge > .shadow { background-image: url('/images/bg.inner-shadow-right.10op.w16.png'); }

#foot-back .left-edge > .fade { background-image: url('/images/bg.fade-left.26gs-tr.w64.png'); }
#foot-back .left-edge > .shadow { background-image: url('/images/bg.inner-shadow-left.50op.w16.png'); }
#foot-back .right-edge > .fade { background-image: url('/images/bg.fade-right.26gs-tr.w64.png'); }
#foot-back .right-edge > .shadow { background-image: url('/images/bg.inner-shadow-right.50op.w16.png'); }


#foot-back {
	position: absolute; z-index: 10;
	bottom: 0;
	width: 100%;
	height: 112px;
	background: rgb(26, 26, 26) url('/images/bg.edge-shadow-bottom.100op.h32.png') repeat-x top;
}

/* center the whole content area */
#foot-back > .cont {
	width: 1000px;
	margin: 0 auto;
	height: 112px;
}

/* scope the rel position down to the left side */
#foot-back > .cont > .body {
	position: relative;
	margin-right: 116px;
	height: 112px;
}


#foot {
	position: absolute; z-index: 12;
	bottom: 0;
	width: 100%;
	height: 112px;
	color: #fff;
}

#foot a { opacity: 0.80; filter: alpha(opacity=80); }
#foot a:hover { opacity: 1.0; filter: alpha(opacity=100); }
#foot a:active { opacity: 0.5; filter: alpha(opacity=50); }

/* center the whole content area */
#foot > .cont {
	width: 1000px; height: 112px;
	margin: 0 auto;
}

/* scope the rel position down to the left side */
#foot > .cont > .body {
	height: 112px;
	position: relative; z-index: 1;
	margin-right: 116px;
}

#foot > .cont > .side {
	position: relative; z-index: 1;
	width: 116px;
	float: right;
}

#badges {
	position: absolute;
	top: 24px; left: 24px;
}

ul#badges > li {
	float: left;
	width: 72px;
}

ul#badges > li img {
	margin-bottom: 0 !important;
}

ul#badges > li a, ul#badges > li a * {
	text-decoration: underline;
}

ul#badges > li a > .link {
	display: block;
	height: 14px;
	font: 10px/14px Tahoma, Helvetica, sans-serif;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 1.0);
}

ul#badges > li.twitter a { color: rgb(53, 204, 255); }
ul#badges > li.twitter a { color: rgba(53, 204, 255, 0.25); }
ul#badges > li.twitter a > .link { color: rgb(53, 204, 255); }

ul#badges > li.facebook a { color: rgb(90, 122, 201); }
ul#badges > li.facebook a { color: rgba(90, 122, 201, 0.25); }
ul#badges > li.facebook a > .link { color: rgb(90, 122, 201); }

ul#badges > li.feed a { color: rgb(255, 186, 12); }
ul#badges > li.feed a { color: rgba(255, 186, 12, 0.25); }
ul#badges > li.feed a > .link { color: rgb(255, 186, 12); }

ul#badges > li.email a { color: rgb(249, 78, 167); }
ul#badges > li.email a { color: rgba(249, 78, 167, 0.25); }
ul#badges > li.email a > .link { color: rgb(249, 78, 167); }


#legal {
	position: absolute;
	top: 24px; left: 16px;
	
	font: bold 10px/13px 'Trebuchet MS', Helvetica, sans-serif;
	color: #7f7f7f;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 1.0);
}

#design-credit {
	position: absolute;
	top: 24px; right: 16px;
	
	font: bold 10px/13px 'Trebuchet MS', Helvetica, sans-serif;
	color: #7f7f7f;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 1.0);
}

#design-credit a { color: #006699; }

.publish-notset { color: #999; }
.publish-archived { color: #bb9977; }
.publish-past { color: #f94ea7; }
.publish-future { color: #666; }
.publish-current { color: rgb(167, 78, 249); }

.preview {
	margin: 0 -8px;
	padding: 8px;
	background: rgb(249, 78, 167);
	background: rgba(249, 78, 167, 0.825);
	border: 1px solid rgb(249, 78, 167);
	
	box-shadow:			0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
}
.preview > .cont {
	position: relative;
	padding: 40px 24px;
	background: #f7f7f7 url('/images/bg.floral.bk-tr.png') repeat;
	border: 1px solid #fff;
	
	box-shadow:			0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-moz-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 5px rgba(0, 0, 0, 0.25), inset 0 0 16px rgba(255, 255, 255, 0.25);
}
.preview > .cont:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.preview > .cont { display: inline-block; }
.preview > .cont { display: block; }

.preview-spinner > img { vertical-align: middle; }



/* -------------------------------------------------------------------------------------------------

It's *strongly* suggested that you don't modify this file.  Instead, load a new stylesheet after
this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

This stylesheet forms part of the Formtastic Rails Plugin
(c) 2008 Justin French

--------------------------------------------------------------------------------------------------*/


/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just #middle .formtastic
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset,
#middle .formtastic legend,
#middle .formtastic input,
#middle .formtastic textarea,
#middle .formtastic select { margin: 0; padding: 0; }
#middle .formtastic fieldset { border: 0; }
#middle .formtastic ol, #middle .formtastic ul { list-style: none; }
/*#middle .formtastic input, #middle .formtastic textarea, #middle .formtastic select { font-family: inherit; font-size: inherit; font-weight: inherit; }
#middle .formtastic input, #middle .formtastic textarea, #middle .formtastic select { font-size: 100%; }*/


/* FIELDSETS & LISTS
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset { }
#middle .formtastic fieldset.inputs { }
#middle .formtastic fieldset.buttons { padding-left: 25%; }
#middle .formtastic fieldset ol { }
#middle .formtastic fieldset.buttons li { float: left; padding-right: 0.5em; }

/* clearfixing the fieldsets */
#middle .formtastic fieldset { margin: 16px 0; }
#middle .formtastic fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] #middle .formtastic fieldset { display: block; }
* html #middle .formtastic fieldset { height: 1%; }


/* INPUT LIs
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li { margin: 0; }

/* clearfixing the li's */
#middle .formtastic fieldset ol li { display: inline-block; }
#middle .formtastic fieldset ol li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] #middle .formtastic fieldset ol li { display: block; }
* html #middle .formtastic fieldset ol li { height: 1%; }

#middle .formtastic fieldset ol li.required { }
#middle .formtastic fieldset ol li.optional { }
#middle .formtastic fieldset ol li.error { }
  

/* LABELS
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li label {
	display: block; float: left;
	
	font: bold 16px 'Myriad Pro', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	
	height: 22px; line-height: 22px;
	padding: 0 16px;
	margin-bottom: 8px;
	
	background: #f94ea7;
	
	box-shadow:			0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	
	border: 1px solid transparent;
}
/*#middle .formtastic fieldset ol li li label { line-height: 100%; padding-top: 0; }
#middle .formtastic fieldset ol li li label input { line-height: 100%; vertical-align: middle; margin-top: -0.1em;}*/


#middle .formtastic fieldset ol fieldset li label {
	display: block; width: 25%; float: left; padding-top: 0.2em;
	
	font: inherit;
	text-transform: inherit;
	color: inherit;
	text-shadow: inherit;
	height: inherit;
	padding: inherit;
	margin: inherit;
	
	background: inherit;
	
	box-shadow:			inherit;
	-moz-box-shadow:	inherit;
	-webkit-box-shadow:	inherit;
	
	border: inherit;
	
	
	font-size: 18px; line-height: 18px;
	color: rgb(26, 26, 26);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	
	margin: 0 0 16px;
}
#middle .formtastic fieldset ol fieldset li li label { line-height: 100%; padding-top: 0; }
#middle .formtastic fieldset ol fieldset li li label input { line-height: 100%; vertical-align: middle; margin-top: -0.1em;}*/


/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol fieldset { position: relative; }
#middle .formtastic fieldset ol fieldset legend {
	display: block; width: 100%;
	
	font: bold 16px 'Myriad Pro', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	
	height: 22px; line-height: 22px;
	padding: 0 16px;
	margin: -8px;
	margin-bottom: 16px;
	
	background: #f94ea7;
	
	box-shadow:			0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25); /* for Safari 4.0 */
	-webkit-box-shadow:	0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.25);
	
	border: 1px solid transparent;
}
#middle .formtastic fieldset ol li fieldset ol { float: left; width: 74%; margin: 0; padding: 0 0 0 25%; }
#middle .formtastic fieldset ol li fieldset ol li { padding: 0; border: 0; }


/* INLINE HINTS
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li p.inline-hints { color: #666; margin: 0 0 0 25%; }


/* INLINE ERRORS
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li p.inline-errors { color: #cc0000; margin: 0 0 0 25%; }
#middle .formtastic fieldset ol li ul.errors { color: #cc0000; margin: 0 0 0 25%; list-style: square; }
#middle .formtastic fieldset ol li ul.errors li { padding: 0; border: none; display: list-item; }


/* STRING & NUMERIC OVERRIDES
--------------------------------------------------------------------------------------------------*/
/*#middle .formtastic fieldset ol li.string input { width: 74%; }
#middle .formtastic fieldset ol li.password input { width: 74%; }
#middle .formtastic fieldset ol li.numeric input { width: 74%; }*/


/* TEXTAREA OVERRIDES
--------------------------------------------------------------------------------------------------*/
/*#middle .formtastic fieldset ol li.text textarea { width: 74%; }*/


/* HIDDEN OVERRIDES
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li.hidden { display: none; }


/* BOOLEAN OVERRIDES
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li.boolean label { padding-left: 25%; width: auto; }
#middle .formtastic fieldset ol li.boolean label input { margin: 0 0.5em 0 0.2em; }


/* RADIO OVERRIDES
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li.radio { }
#middle .formtastic fieldset ol li.radio fieldset ol { margin-bottom: -0.6em; }
#middle .formtastic fieldset ol li.radio fieldset ol li { margin: 0.1em 0 0.5em 0; }
#middle .formtastic fieldset ol li.radio fieldset ol li label { float: none; width: 100%; }
#middle .formtastic fieldset ol li.radio fieldset ol li label input { margin-right: 0.2em; }


/* CHECK BOXES (COLLECTION) OVERRIDES
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li.check_boxes { }
#middle .formtastic fieldset ol li.check_boxes fieldset ol { margin-bottom: -0.6em; }
#middle .formtastic fieldset ol li.check_boxes fieldset ol li { margin: 0.1em 0 0.5em 0; }
#middle .formtastic fieldset ol li.check_boxes fieldset ol li label { float: none; width: 100%; }
#middle .formtastic fieldset ol li.check_boxes fieldset ol li label input { margin-right: 0.2em; }



/* DATE & TIME OVERRIDES
--------------------------------------------------------------------------------------------------*/
#middle .formtastic fieldset ol li.date fieldset ol li,
#middle .formtastic fieldset ol li.time fieldset ol li,
#middle .formtastic fieldset ol li.datetime fieldset ol li { float: left; width: auto; margin: 0 .3em 0 0; }

#middle .formtastic fieldset ol li.date fieldset ol li label,
#middle .formtastic fieldset ol li.time fieldset ol li label,
#middle .formtastic fieldset ol li.datetime fieldset ol li label { display: none; }

#middle .formtastic fieldset ol li.date fieldset ol li label input, 
#middle .formtastic fieldset ol li.time fieldset ol li label input, 
#middle .formtastic fieldset ol li.datetime fieldset ol li label input { display: inline; margin: 0; padding: 0;  }




#ss-form br { display: none; }

#ss-form .ss-required-asterisk { display: none; }

#ss-form .ss-q-title { color: #000; }

#ss-form .ss-choice-item { font-size: 11px; line-height: 24px; color: #6a6a6a; }

#ss-form .ss-choices li { list-style-type: none; }
#ss-form .ss-choices li input[type='radio'] { margin-left: -16px; }

#ss-form .ss-form-entry > textarea { width: 100%; height: 6em; }

#ss-form .ss-form-entry { margin-bottom: 16px; }

#ss-form .ss-form-entry > input[type='submit'] { float: right; }