/**
 * Roundable Documentation CSS
 */

h4 {
	clear: both;
}

.roundabout-example {
	background: #fcf9ee;
	background: -moz-linear-gradient(90deg, #1c4547 0%, #256467 100%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #1c4547), color-stop(1.0, #256467));
	
	height: 25em;
	margin: 0 -40em;
	padding: 0 40em;
}

	.roundabout-example ul {
		list-style: none;
		padding-left: 0;
		width: 60%;
		margin: 0 auto;
		height: 25em;
	}
	
	.roundabout-example .stage {
		padding: .4em;
	}
	
	.roundabout-example h3 {
		text-align: center;
		margin-bottom: 1em;
		padding-top: .4em;
	}
	
	.intro {
		background-color: #333;
		color: #ddd;
		margin: 1em -10em;
		padding: 1em 10em;
		text-align: center;
		font-size: 0.9em;
	}
	
	.how-to {
		text-align: center;
		font-size: 1.3em;
		margin-top: 2em;
	}
	
		.how-to strong {
			display: block;
			font-size: 0.6em;
			text-transform: uppercase;
			font-weight: 900;
			letter-spacing: 3px;
		}
	
	.arrow {
		font-size: 1.6em;
		font-weight: 900;
	}
	
		.left.arrow { width: 1em; float: left; }
		.right.arrow { width: 1em; float: right; text-align: right; }
		
	.back h3 {
		font-size: 5em;
		line-height: 2.1;
	}

	.roundabout-holder { padding: 0; height: 10em; width: 85%; margin: 0 auto; list-style: none; }
	.roundabout-moveable-item {
		height: 3em;
		width: 3em;
		cursor: pointer;
		background:none;
		border: 1px solid #999;
		overflow: hidden;
		text-align: center;
		line-height: 3em;
	}
	.roundabout-in-focus { cursor: auto; }
	
dt {
	font-weight: 500;
	margin-bottom: -1em;
}

table {
	font-size: 0.85em;
	border-collapse: collapse;
}

	th {
		text-align: left;
		white-space: nowrap;
	}
	
	td {
		vertical-align: top;
		border-top: 1px solid #ddd;
		padding: .4em 0;
	}
	
	td:nth-child(5n+1) {
		padding-right: 1em;
	}
	
	td:nth-child(5n+2) {
		width: 40%;
		padding-right: 2em;
	}
	
	td:nth-child(5n+3) {
		width: 20%;
	}
	
	td small {
		display: block;
	}
	
/* code samples */
code { 
	display: block; 
	padding: .4em .5em .4em 1em; 
	border: 1px dashed #ccc;
	border-left: none;
	border-right: none; 
	margin: 1em -1em 2em -1em;
	position: relative;
	float: left;
	width: 48%;
	background: #eee;
	background: -moz-linear-gradient(90deg, #f7f7f7 0%, #ffffff 25%, #ffffff 75%, #f7f7f7 100%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #f7f7f7), color-stop(0.25, #ffffff), color-stop(0.75, #ffffff), color-stop(1.0, #f7f7f7));
}

code, tt {
	font-family: Consolas, Monaco, Courier, fixed; 
	font-size: 0.85em;
}

tt { 
	color: #843; 
	background-color: #e6e6e6; 
	padding: .1em .2em; 
	border-radius: .2em;
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	white-space: nowrap;
}

.footnote { font-size: 0.8em; color: #888; margin-bottom: 1em; }
.copy-and-paste-warning { 
	background-color: #ffc; 
	border: 1px solid #cca; 
	padding: 0 1em; 
	margin: 1em 0 1em -1em; 
	border-radius: .5em;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
}
.copy-and-paste-warning h3 { margin-top: .6em; margin-bottom: 0em; }
.copy-and-paste-warning p { padding-right: 0; }

.clouds .html-tag, .clouds .css-attribute { color: rgb(96, 96, 96); }
.clouds .string { color: rgb(93, 144, 205); }
.clouds .comment { color: rgb(188, 200, 186); }
.clouds .css-selector, .clouds .storage { color: rgb(197, 39, 39); }
.clouds .number { color: rgb(70, 166, 9); }
.clouds .unit { color: rgb(150, 220, 95); }
.clouds .keyword { color: rgb(175, 149, 111); }
.clouds .helper { color: rgb(191, 120, 204); }
.clouds .constant { color: rgb(57, 148, 106); }

.changes {
	margin-top: 1.6em; 
}
.changes dt {
	margin-top: 0;
}


.example {
	float: right;
	width: 48%;
}

	.example .show {
		height: 10em;
		margin-top: 1em;
		border: 1px solid #ddd;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		-o-border-radius: 6px;
		border-radius: 6px;
		overflow: hidden;
		
		background: #254067;
		background: -moz-linear-gradient(90deg, #1c2d47 0%, #254067 100%);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #1c2d47), color-stop(1.0, #254067));
	}
	
	.caption {
		font-size: 0.8em;
		color: #999;
		padding-top: .4em;
		text-align: center;
	}