/* GENERAL */
*													{ margin: 0; padding: 0; }
html											{ overflow-y: scroll; }
body											{ font: 14px Georgia, Serif; background: #444; }
#main-content							{ width: 900px; margin: 20px auto; padding: 20px; background: white; -moz-border-radius: 20px; -moz-box-shadow: #222 5px 5px 5px; -webkit-border-radius: 20px; -webkit-box-shadow: #222 5px 5px 5px; position: relative; }
pre												{ width: 96%; overflow-x: auto; overflow-y: hidden; margin: 0 0 12px 0; padding: 15px; background: #eee; border: 1px solid #ccc; }
code											{ font: 11px Monaco, Courier, MonoSpace; background: #eee; }
ul												{ margin: 0 0 12px 30px; }
button										{ padding: 5px; }
button.selected						{ color: #00f; }

/* NAV */
#nav											{ width: 510px; list-style: none; overflow: hidden; margin: 0 auto 22px auto; }
#nav li										{ display: inline; }
#nav li a									{ display: block; float: left; padding: 8px; text-decoration: none; color: #000; background: #efefef; margin-left: 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
#nav li a.play						{ background: #070; color: #fff; }
#nav li a.use							{ background: #006; color: #fff; }
#nav li a.issue						{ background: #600; color: #fff; }
#nav li a:hover,
#nav li a.current					{ background: #444; color: white; }

#to-top										{ font: bold 40px Helvetica, Sans-Serif; text-decoration: none; position: fixed; top: 70px; left: 0px;width: 55px; height: 50px; background: #000; color: #fff; }

h1, h2, h3, h4						{ font: bold 45px Helvetica, Sans-Serif; text-align: center; letter-spacing: -1px; }
h1												{ width: 600px; margin: 0 auto 12px auto; font-family: 'Merienda One', cursive; }
h2												{ font-size: 30px; margin: 0 0 6px 0; }
h3												{ font-size: 20px; }
h4												{ font-size: 16px; text-align: left; }
sup												{ color: red; font-size: 30px; }
p, #use p.sections				{ margin: 0 0 12px 0; text-align: center; }
#dl												{ position: absolute; top: 15px; right: 15px; text-decoration: none; background: #222; color: white; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 8px 14px; }
#dl:hover									{ background: #999; }
hr												{ margin-bottom: 20px; }
#use p,
.large p,
.small p									{ text-align: left; }
.info											{ margin: 0 auto; }
ul.info										{ width: 500px; }
div.info									{ width: 800px; }
div.info ul, ul.info			{ list-style: disc; }

/* CODE HIGHLIGHTING */
.c-wrap										{ background: #f3a01e; }
.c-ovrly									{ background: #95421e; }
.c-small									{ background: #d05d2a; }
.c-large									{ background: #7c48b5; }
.c-zoom										{ background: #4b8db5; }
.c-commt									{ background: #9dc425; }
.c-commt2									{ color: #6b861a; }
span.cc										{ float: left; width: 10px; height: 14px; margin-right: 7px; }
code											{ line-height: 14px; }
ul												{ list-style: none; }

/* ZOOM CONTAINER */
.zoom											{ display: block; margin: 0 auto; }
.large										{ background: white; }

/* FOR TEXT DEMO */
.small p									{ font-size: 8px; width: 300px; }
.large p									{ font-size: 16px; width: 600px; }

/* FOR IMAGE DEMO */
.small img								{ width: 718px; height: 400px; }
.large img								{ width: 4000px; height: 2229px; }

/* CALENDAR SPECIFIC */
caption										{ background: #1634D8; padding: 3px; color: white; font: 14px Helvetica, Sans-Serif; text-transform: uppercase; letter-spacing: 1px; }
.calendar 								{ font-size: 14px; } /* double the small calendar font size */
.calendar td,
.calendar th							{ padding: 1px; border: 2px solid white; }
.calendar td a						{ display: block; padding: 3px; background: #900; color: white; }
#months-tables .calendar td a:hover,
#months-tables .calendar td a[style]:hover  { background: black !important; text-decoration: none; }
.day 											{ text-align: center; }
.past-day									{ background-color: #eee; }
#months-tables						{ width: 100%; }
#months-tables td					{ vertical-align: top; }
td												{ vertical-align: top; }
.single-month 						{ padding-right: 10px; }
.small .calendar 					{ font-size: 7px; margin: 0 auto; }
.small .calendar td,
.small .calendar th				{ width: 12px; height: 12px; border: 1px solid white; padding: 0; }
.small .calendar td a 		{ padding: 0; display: block; width: 12px; height: 12px; } 
.small .calendar td.day 	{ background: #eee; }
.small .calendar td.past-day				{ background: #999; }
.small a 									{ border: 0; }
.small #months-tables 		{ width: auto; }
.small caption 						{ font-size: 7px; white-space: nowrap; }