/** ----------------------------------------------------------
 *
 * Contains the core styles for all the silverstripe sites.
 *
 * If you plan on including this file in a ss project you are doing it wrong.
 * you should link to the ss.screen.min.css and ss.print.min.css file in 
 * your project which this combines down to. 
 * It also ensures that you have all the core styles.
 *
 * @author Will Rossiter <will at silverstripe dot com>
 * 
 * Notes: our vertical grid is set to 8px.
 * ------------------------------------------------------- */

/* -------------------------------------------------------
 * Reset Styles
 * ------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { 
	margin:0; padding:0; 
}


/* -------------------------------------------------------
 * Core Styles
 * ------------------------------------------------------- */

html { 
	background: #F8F9FA; font: 12px/18px Arial, sans-serif; color: #333; 
}

img { 
	border: none;
}

a { color: #0973A6; text-decoration: none; }
	a:hover,
	a:focus { text-decoration: underline; color: #667D76;  }
	a:visited { color: #14506c; }


/* -------------------------------------------------------
 * Helper Styles
 * ------------------------------------------------------- */
.clear { 
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
	content:' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0
}

* html .clearfix,
*:first-child+html .clearfix{
	zoom: 1;
}

/* -------------------------------------------------------
 * Layout Styles
 * ------------------------------------------------------- */

/* Container */
#container {
	margin: 18px auto; padding: 17px 1.25%; 
	background: #fff; 
	overflow: hidden; 
	border: 1px solid #dfdfdf;
	-webkit-box-shadow: 0 0 20px #e8ebed; 
	-moz-box-shadow: 0 0 20px #e8ebed; 
	box-shadow: 0 0 20px #e8ebed;
	
	-webkit-border-radius: 2px; 
	-moz-border-radius: 2px; 
	border-radius: 2px;
	position: relative;
}


.container {
	min-width: 540px; 
	max-width: 960px; 
	margin: auto;
}

#content-column {
	width: 72.5%;
	float: right;
	border-left: 1px solid #efefef;
	padding-left: 2.5%;
}
	#content-column.full-width,
	.full-width#content-column {
		width: 100%;
		float: none;
		border: none;
	}

#sidebar-column {
	width: 22.5%;
	float: left;
}

/* Header */
#header { 
	padding: 0 0 7px 0; overflow: hidden;
}
	#header h1 { 
		margin: 0; line-height: 49px; float: left; 
	}
		#header h1 a { 
			text-decoration: none; 
			font-size: 22px; 
			color: #0973A6; 
			letter-spacing: -1px;
		}
		
		#header h1 a.logo { 
			background: #fff url(../../ssorgsites/images/logo.png) no-repeat bottom left; 
			height: 55px; width:162px; 
			display: inline-block; 
		}
			#header h1 a.logo:hover { 
				background: #fff url(../../ssorgsites/images/logo.png) no-repeat 0 -50px; 
			}

/* Breadcrumbs  */
#breadcrumbs {
	float: left;
}
	#breadcrumbs p { 
		font-size: 11px; margin: 0; color: #798D85;
	}

/* Search */
#search-bar {
	border-top: 1px solid #E6EBE9;
	border-bottom: 1px solid #E6EBE9;
	margin-bottom: 32px;
	padding: 7px 10px;
	overflow: hidden;
} 

	#search {
		float: right;
		width: 252px;
		position: relative;
	}
		#search label {
			float: left;
			font-size: 11px;
			color: #999;
			margin: 3px;
		}
		
		#search input.text {
			float: right; width: 170px; height: 22px;
			background: url(../../ssorgsites/images/search.png) top left no-repeat;
			font-size: 11px;
			color: #495C56;
			outline: none;
			padding-left: 10px;
			border: none;
		}
	
		#search fieldset {
			width: 230px;
			float: left;
		}
	
		#search input.action {
			position: absolute; top: 0; right: 0; width: 22px; height: 22px;
			border: none;
			text-indent: 99999px;
			cursor: pointer;
			background: url(../../ssorgsites/images/search.png) top right no-repeat;
		}

/* Search Results */
#search-results {}
	#search-results li { 
		list-style: none; border-bottom: 1px solid #ddd; padding: 0 0 17px 0; margin: 0 0 17px 0;
		background: none;
	}

/* Sidebar menu */
#sidebar-column .sidebar-box {
	margin: 0 0 18px 0;
	padding: 4.75%;
	background: #f4f4f4;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
	#sidebar-column .sidebar-box ul { margin: 0; padding: 0;}
	#sidebar-column .sidebar-box h4 { font-size: 14px; margin-bottom: 9px;}
	#sidebar-column .sidebar-box li { 
		list-style: none; 
		padding: 0; margin: 0;
	}
		#sidebar-column .sidebar-box li a:hover,
		#sidebar-column .sidebar-box li a:focus,
		#sidebar-column .sidebar-box li a.current,
		#sidebar-column .sidebar-box li a.section {
			background: #0973A6;
			color: #fff;
		}
		#sidebar-column .sidebar-box li .current { 
			font-weight: bold; 
		}
		
		#sidebar-column a { 
			display: block; width: 86%; padding: 5px 10px 4px;
			border-bottom: 1px solid #dfdfdf;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}
			#sidebar-column a:hover,
			#sidebar-column a:focus {
				text-decoration: none;
			}
			
		#sidebar-column .sidebar-box li.h1 { font-weight: bold;}
		#sidebar-column .sidebar-box li.h2,
		#sidebar-column .sidebar-box li.h3,
		#sidebar-column .sidebar-box li.h4,
		#sidebar-column .sidebar-box ul#toc ul { margin: 0 0 0 9px; }
		#sidebar-column .sidebar-box ul ul { margin: 0 0 9px 18px; }
		#sidebar-column .sidebar-box li li { 
			font-size: 11px; 
			border-bottom: none;
		}
			#sidebar-column .sidebar-box li li a,
			#sidebar-column .sidebar-box ul#toc li a {
				border: none;
				-webkit-border-radius: none;
				-moz-border-radius: none;
				border-radius: none;
				font-size: 11px;
				padding: 2px 0;
			}
				#sidebar-column .sidebar-box li li a:hover,
				#sidebar-column .sidebar-box li li a:focus,
				#sidebar-column .sidebar-box ul#toc li a:hover,
				#sidebar-column .sidebar-box ul#toc li a:focus {
					background: none;
					color: #667D76;
					text-decoration: underline;
				}
				
				#sidebar-column .sidebar-box li li a.current,
				#sidebar-column .sidebar-box li li a.section,
				#sidebar-column .sidebar-box ul#toc li a.current,
				#sidebar-column .sidebar-box ul#toc li a.section {
					background: none;
					color: #333;
				}
				
		#sidebar-column .sidebar-box li li li li { margin: 0 0 0 20px;  }
		
	#sidebar-column .sidebar-box label.left {
		font-weight: bold;
	}	
	#sidebar-column .sidebar-box form li {
		list-style: none;
	}
		#sidebar-column .sidebar-box form li label {
			cursor: pointer;
		}
	#sidebar-column .sidebar-box .field {
		border-bottom: 1px solid #ddd;
		padding-bottom: 8px;
		margin-bottom: 9px;
	}
	#sidebar-column .sidebar-box input.text {
		padding: 3px 3px 4px 3px;
	}
/* Footer */
#footer { width: 960px; margin: 22px auto; }
	#footer p { font-size: 11px; line-height: 18px; color: #798D85;}
		#footer p a { color: #798D85; text-decoration: underline; }
		#footer .cc-logo { float: right; }

/** 
 * Pagination Styles
 */
#page-numbers span,
#page-numbers a {
	padding: 3px 5px;
}
#page-numbers span {
	background-color: #ACD5CA;
}
	#page-numbers a:hover {
		color: #FFFFFF;
		background-color: #005F99;
	}

ul.pagination {
	margin: 27px 0;	
}
	ul.pagination li {
		display: inline;
		background: none;
		padding: 0 4px 0 0;
	}
	.pagination li strong, .pagination li a {
		padding: 1px 4px;
	}
	.pagination li.active strong {
		background-color: #c3dbd4;
	}
	.pagination li a:hover {
		background-color: #0973A6;
		color: #fff;
		text-decoration: none;
	}
	
/* Messages */

/**
 * Example:
 * <div class="info">
 * 	<h5>This is a info message</h5>
 * 	<p>Body text</p>
 * 	<a href="#" class="close" title="Close notification">close</a>
 * </div>
 */
#content .warningBox h5, 
#content .hint h5, 
#content .notice h5, 
#content .warning h5, 
#content .info h5 { 
	margin-bottom: 0px; 
}

.hint a.close, 
.notice a.close, 
.warning a.close, 
.info a.close {
	background:url("../images/ico_close_off.png") no-repeat scroll left top transparent;
	display:block;
	font-size:0;
	height:11px;
	position:absolute;
	right:3px;
	text-indent:-9999px;
	top:3px;
	width:11px;
}

.hint,
.note {
	border: 1px dotted #a5b5b0;
	padding: 13px 10px 0px 60px;
	clear: both;
	margin: 9px 0 18px;
	background: #f9fafa url(../images/lightbulb.png) no-repeat 21px 14px;
}
	.typography .note h3,
	.typography .hint h3 {
		line-height: 27px;
	}
.pageSkip {
	background-color: #f9fafa;
	border: 1px solid #a5b5b0;
	padding: 8px 10px 8px 10px;
	text-align: center;
	margin: 9px 0 18px;
}
.notice {
	border: 1px solid #D3C200;
	padding: 13px 10px 0px 60px;
	margin: 9px 0 18px;
	position: relative;
	background: #FFFAC6 url(../images/notification.png) no-repeat 18px 11px;
}
	p.notice {
		padding-bottom: 18px;
	}
.warning {
	border: 1px solid #f8c3cd;
	padding: 13px 10px 0px 60px;
	clear: both;
	margin: 9px 0 18px;
	position: relative;
	background: #fdf1f3 url(../images/error_button.png) no-repeat 18px 11px;
}
.info {
	border: 1px solid #6baad8;
	padding: 13px 10px 0px 60px;
	clear: both;
	margin: 9px 0 18px;
	position: relative;
	background: #f7fcff url(../images/info_button.png) no-repeat 18px 11px;
}

/* Used on 404 page not found */
.warningBox { margin:9px 0 18px; }
#content .warningBox p { 
	margin: 0 0 9px 0;
}

.warningBoxTop {
	background-color: #F9FAFA;
	border: 1px solid #d3d9dc;
	padding: 17px 9px 7px 66px;
	background: #F9FAFA url(../../ssorgsites/images/warning.png) no-repeat 18px 20px;
}

#content .warningBoxTop h1 { font-size: 27px; margin-bottom: 0; letter-spacing: 0; }
#content .warningBoxTop ul { margin: 9px 0 18px; }
#content .warningBoxTop li { margin-bottom: 4px; }
#content .warningBoxBottom { 
	background-color: #0973A6; 
	padding: 12px 0 16px;
	/* background: url(../../ssorgsites/images/warning.png) no-repeat scroll 22px 13px #0973A6; */
}
	#content .warningBoxBottom a { color: #fff; }
	#content .warningBoxBottom a:hover { color: #f3fbfe; }
	#content .warningBoxBottom ul { margin: 0 0 0 40px; }
	#content .warningBoxBottom li { background: none; margin-bottom: 0; }
	
/* Code styles - each site should have syntaxhighlighter installed for
 code blocks */
.syntaxhighlighter { padding: 9px 0; }


/* documentation navigation */
.documentation-nav { 
	clear: both;
	margin: 0 0 5px; 
	padding: 2px 0;
	overflow: hidden; color: #999999; 
	font-size: 11px;
}
	.documentation-nav h2 { font-size: 11px; font-weight: normal; float: left; margin-right: 5px;}
	.documentation-nav ul { margin: 0; padding: 0; float: left;}
		.documentation-nav li { display: inline; list-style: none; padding: 0; margin: 0; font-size: 11px; }
			.documentation-nav li a { margin-left: 5px; padding: 0px; }
				.documentation-nav li a.current { 
					background: #0973A6; color: #fff; font-weight: bold; 
					padding: 4px;
					-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
				}
					.documentation-nav li a.current:hover,
					.documentation-nav li a.current:focus {
						text-decoration: none;
					}
				
					/* Links to API */
					#left-column a[href^="http://api."] {
						padding: 2px;
						font-family: Monaco, 'Bitstream Vera Sans Mono', Courier, monospace;
						background: url(../../ssorgsites/images/external_link.png) no-repeat right 3px;
						padding-right: 14px;
					}

/* Comments */
#comments {
	clear: both;
	padding-top: 18px;
}

	#comments .notice {
		font-size: 12px;
	}