/* core.css */

/* This file contains the basic components required for Datalink websites. 

/* The chl2_ prefix is reserved for core buildig blocks. No custom CSS or HTML should use this prefix. */

/* All widgets use classes and not IDs — a widget is a repeatable element. */

/* IMPORTANT - All sites, including those by third party developers should contain a div with the ID of "content". This allows basic elements, such as h1s to be targeted by the following CSS without breaking the supplied layout. */

/* This file shows the correct formatting of CSS. */

#content {
	/* A relative starting point for font size and line spacing values */
	font-size:1em;
}

/*** BASIC TEXT WIDGETS ***/

#content h1 {

}

#content h2 {

}

#content h3 {

}

#content h4 {

}

/* The default heading level for widgets. */
h5 {
	margin:0.25em 0;
	padding:0;
	font-size:1em;
}

/* The second heading level for widgets. */
h6 {
	margin:0.25em 0;
	padding:0;
	font-size:1em;
}

#content p {

}

/*** LIST WIDGETS ***/

#content ul {

}

#content ol {

}

#content li {

}

.chl2_horizontalList {
	/*
	Usage:
	<ul class="chl2_horizontalList"><li>...</ul>
	or
	<ol class="chl2_horizontalList"><li>...</ol>
	
	Note: the final <li> should take the form <li class="chl2_last">...</li>
	*/
	margin:0.5em 0;
	padding:0;
}

.chl2_horizontalList li {
	display:inline;
	padding:0 0.5em;
	border-right:solid 1px #000;
}

.chl2_horizontalList .chl2_last {
	border:none;
}

/*** LINK WIDGETS ***/

.chl2_addLink {
	padding-left:18px;
	background:url('images/chl2_addLink.gif') no-repeat center left;
}

.chl2_removeLink {
	padding-left:18px;
	background:url('images/chl2_removeLink.gif') no-repeat center left;
}

.chl2_externalLink {
	padding-right:18px;
	background:url('images/chl2_externalLink.gif') no-repeat center right;
}

.chl2_fileLink {
	padding-right:18px;
	background:url('images/chl2_fileLink.gif') no-repeat center right;
}

/*** CONTAINER WIDGETS ***/

.chl2_panel {
	/*	
	Usage:
	<div class="chl2_panel">
		<div class="chl2_header">[optional content...]</div>
		[content...]
		<div class="chl2_footer">[optional content...]</div>
	</div>
	*/
	margin:0.5em 0;
	padding:0.5em;
	background-color:#eee;
}

/* Used inside chl2_panel */
.chl2_header {
	padding:0.5em 0;
}

/* Used inside chl2_panel */
.chl2_footer {
	padding:0.5em 0;
}

/* Basic row element */
.chl2_row {
	padding:0.25em 0.5em;
	border-bottom:solid 1px #bcbcbc;
}

/* A collection of chl2_row widgets */
.chl2_rowCollection {
	/*
	Usage:
	<div class="chl2_rowCollection">
		<div class="chl2_row chl2_odd">[content...]</div>
		<div class="chl2_row chl2_even">[content...]</div>
	</div>
	*/
	margin-bottom:0.5em;
	border-top:solid 1px #bcbcbc;
}

/* Nested row */
.chl2_row .chl2_row {
	/* 
	Applies to:
	<div class="chl2_row">
		[content...]
		<div class="chl2_row">[content...]</div>
	</div>
	*/
	margin-top:0.25em;
	/* Stop cumulative padding */
	padding-bottom:0;
	/* Switch borders */
	border-top:solid 1px #bcbcbc;
	border-bottom:none;
}

/* 2 column layout */
/* Apply a simple two column layout to chl2_row */
.chl2_2Column {
	/*
	Usage:
	<div class="chl2_rowCollection chl2_2Column">
		<div class="chl2_row">
			<div class="chl2_columnSet">
				<div class="chl2_left">[content...]</div>
				<div class="chl2_right">[content...]</div>
				<div class="chl2_clear"></div>
			</div>
		</div>
	</div>
	*/
}

.chl2_2Column .chl2_row {
	padding-top:0;
	padding-bottom:0;
}

.chl2_2Column .chl2_columnSet {
	/* Add a border between columns */
	background:url('images/chl2_2Column.gif') repeat-y 30% top;
}

.chl2_2Column .chl2_columnSet .chl2_left {
	padding:0.25em 0;
	/* Include a margin between columns */
	width:28.75%;
}

.chl2_2Column .chl2_columnSet .chl2_right {
	padding:0.25em 0;
	/* Include a margin between columns */
	width:68.75%;
}

/*** TAB WIDGETS ***/

/* A basic tab layout. Content is placed in chl2_tabContent. */
.chl2_tabSet {
	/*
	Usage:
	<div class="chl2_tabSet">
		<div class="chl2_tabList">
			<ul>
				<li class="chl2_active">[first link]</li>
				[...]
				<li class="chl2_last">[last link]</li>
			</ul>
		</div>
		<div class="chl2_tabContent">
			[content...]
		</div>
	</div>
	*/
}

.chl2_tabList {
	/* Contains a list of links */
}

.chl2_tabList ul {
	margin:0;
	padding:0;
}

.chl2_tabList li {
	display:block;
	margin:0;
	padding:0;
	background-color:#ccc;
	border-left:solid 1px #666;
	border-top:solid 1px #666;
	float:left;
}

.chl2_tabList li a {
	display:block;
	padding:0.5em;
}

.chl2_tabList li a:hover {
	background-color:#eee;
}

.chl2_tabList li.chl2_active {
	background-color:#fff;
}

.chl2_tabList li.chl2_last {
	/* Add a border to the final list element */
	border-right:solid 1px #666;
}

.chl2_tabContent {
	border:solid 1px #666;
	clear:both;
}

/*** ALERT WIDGETS ***/

.chl2_systemMessage {
	/*
	Usage:
	<div class="chl2_systemMessage">
		<div class="chl2_warning">
			<h6>[title...]</h6>
			[content...]
		</div>
	</div>	
	*/
	margin-bottom:0.5em;
}

.chl2_systemMessage .chl2_warning, 
.chl2_systemMessage .chl2_error, 
.chl2_systemMessage .chl2_success {
	padding:0.5em;
}

.chl2_warning {
	padding:0 0.25em;
	background-color:#f2b230;
	border:solid 1px #d99815;
}

.chl2_error {
	padding:0 0.25em;
	background-color:#e8a7a7;
	border:solid 1px #d96d6d;
}

.chl2_success {
	padding:0 0.25em;
	background-color:#a9d4bf;
	border:solid 1px #008040;
}

/*** TABLE WIDGETS ***/

.chl2_table table {
	margin-bottom:0.5em;
	width:100%;
	border-collapse:collapse;
}

.chl2_table td, .chl2_table th {
	border:solid 1px #bcbcbc;
}

/*** APPEARANCE MODIFIERS ***/

/* These classes are visual rather than semantic. A possible usage is alernating the background colour of a row, e.g. <div class="chl2_row chl2_odd"></div> */

.chl2_odd {
	background-color:#fff;
}

.chl2_even {
	background-color:#eee;
}

.chl2_active {
	/* A placeholder class. Refer to .chl2_tabList li.chl2_active for example usage. */
}

/* Modify the last element in a list, row collection, etc. */
.chl2_last {
	/* A placeholder class. Refer to .chl2_horizontalList .chl2_last for example usage. */
}

.chl2_title {
	/* A placeholder class. Refer to .chl2_title h6 for example usage. */
}

/* Display headings as block level elements that span the full width of their container. */
.chl2_title h6 {
	/*
	Usage:
	<div class="chl2_rowCollection chl2_2Column chl2_title">
		<div class="chl2_row">
			<h6>[title...]</h6>
			[content...]
		</div>
	</div>
	*/
	display:block;
	margin-left:-0.5em;
	padding:0.5em;
	width:100%;
	background-color:#ccc;
}

/*** LAYOUT AND POSITION MODIFIERS ***/

/* These classes are functional rather than semantic, e.g. chl2_clear is used to reset the document flow (especially useful after floated elements). */

.chl2_left {
	float:left;
}

.chl2_right {
	float:right;
}

.chl2_clear {
	clear:both;
}

/*** FORM WIDGETS ***/

.chl2_form {
	background-color:#eee;
}

.chl2_form table {
	width:100%;
}

.chl2_form th {
	margin-right:0.5em;
	text-align:right;
}

.chl2_form ul {
	margin:0;
	padding:0;
}

.chl2_form td {
	padding:0.5em;
	border:none;
}

.chl2_button {
	/* The standard button style */
}

.chl2_actionButton {
	/* Represents a key action */
}

.chl2_smallButton {
	/* Represents a minor action */
}

.chl2_buttonList {

}