/* Examples style */
.breadcrumb { border-bottom: 1px solid #dedede; padding: 5px; }
.page-links { margin: 5px auto; text-align: center; }

#instructions { background: #f6f6f6; border: 1px solid #dedede; border-radius: 3px; margin:10px auto; padding: 1%; }
#instructions.full { float: none; width: auto; }

#instructions h1 { color: #330000; margin: 0; padding: 0; }
#instructions code { background: #fff; border: 1px solid #ccc; }

/* Main page navigation. */
.main-navigator { background-color: #333; border: 1px solid #333; border-bottom: none; border-radius: 3px 3px 0 0; color: #FFF; margin: 10px auto 0; padding: 10px 20px; text-align: center; }
.main-navigator a { color: #FFF; font-weight: normal; text-decoration: none; }
.main-navigator .selected { color: #FFF; font-weight: 700; text-transform: uppercase; text-decoration: underline; }
.main-info { padding: 10px 20px; background-color: #F6F6F6; margin:0 auto 10px; border:1px solid #dedede; border-radius: 0 0 3px 3px; }

/* The "View Source" button */
#viewSource { border: 1px solid #d90d0d; border-radius: 3px; background: #780000; color: #FFF; line-height: 2; }

#demoZone { border: 1px solid #f6f6f6; border-radius: 3px; min-height: 400px; overflow: auto; position: relative; padding: 10px; }
#demoZone.full { float: none; width: auto; min-height: 0px; }

.data_repeater_example { background: #f6f6f6; border: 1px solid #dedede; border-radius: 3px; float: left; margin: 10px; padding: 10px; width: 33%; }

.renamer_item { cursor: pointer; padding: 5px; }
.renamer_item_selected { background: #ffffcc; border-radius: 3px; }

footer { clear: both; }

@media screen and (min-width: 720px) {
	#instructions { float: left;  width: 42%; }
	#demoZone { float: left; margin: 10px 0 10px 10px; width: 46%; }
	#viewSource { float: right; }
}