/* typography */
body,html{ width: 100%; height: 100%; }
body { font: 11px "tahoma", sans-serif; color: #7b511f; }
h1,h2{ color: #666; font-weight: bold; }
h1 { font-size: 28px; line-height: 30px; }
h2 { font-size: 22px; }
h1,h2,p,ul { margin: 0 0 22px; }
img { border: 0; vertical-align: middle; }
em { font-style: italic; font-weight: bold; }
ul { list-style: inside square; }
hr { margin: 22px 0; height: 1px; border:0; width: 100%; background-color: #eee; }

/* classes */
body > .rollbar-content { width: 186px; left: 0; right: 0; margin: 0 auto; }
.center-wrapper { padding: 40px 60px 0px; border-left: 2px solid #eee; border-right: 2px solid #eee; }
.resize { position: fixed; right: 30px; bottom: 20px;}
.footer { font-size: 11px; border-top: 1px solid #eee; margin-top: 44px; padding: 10px 0; text-align: center; }
.footer a { padding-right: 10px; margin-right: 10px; border-right: 2px solid #eee; }
.purchase { text-decoration: underline; }


/* Android, iPhone */
@media screen and (max-width: 320px){
	body > .rollbar-content { width: 186px; }
	body > .rollbar-path-vertical { width: 3px; right: 2px; }
	.center-wrapper { padding: 20px 10px 0; }
	.example { width: 186px; height: 187px; }
	.example .rollbar-content { min-width: 100%; min-height: 100%; }
	.example img { width: 100%; }
	#example2 img { width: auto; }
	.resize { display: none; }
}