@charset "UTF-8";

/*------------------------------------*\
	$TABLES
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
*/
table{
	/*width:100%;
	max-width:100%;*/
}
thead tr:last-of-type th{
	/* Thicker border on the table-headers of the last row in the table head. */
	border-bottom-width:1px;
}
tbody th{
	/* Thicker right border on table-headers in the table body. */
	border-right-width:1px;
}
th:empty{
	/* Hide the borders on any empty table-headers. */
	border:none;
}
th,td{
	vertical-align:top;
	padding:0.25em;
	border:1px solid #ccc;
}
th{
	font-weight:bold;
	text-align:center
}
table [colspan]{
	text-align:center;
}
table [rowspan]{
	vertical-align:middle;
}
/*
Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.
See jsfiddle.net/csswizardry/UJJay/
*/
[colspan="1"]{
    text-align:left;
}
[rowspan="1"]{
    vertical-align:top;
}
tbody tr:nth-of-type(odd){
	background:rgba(0,0,0,0.05);
}
tfoot{
	text-align:center;
}
tfoot td{
	border-top-width:2px;
}





/*------------------------------------*\
	$MESSAGES
\*------------------------------------*/
/*
Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
*/
.message{
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #ccc;
	margin-left:0;
	
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
	box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
}
	/*
	With multiple errors it’s nice to group them:
	<ul class=message>
		<li>Please provide a surname.</li>
		<li>Please enter a valid email address.</li>
	</ul>
	*/
	ul.message{
		list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */
		padding:10px 10px 10px 56px;
	}
.error{
	border-color:#fb5766;
	background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
}
.success{
	border-color:#83ba77;
	background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;
}
.info{
	border-color:#85a5be;
	background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
}
.warning{
	border-color:#d8d566;
	background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
}






/*------------------------------------*\
	$CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insemantic classes to do odd jobs.
*/
.left	{ float:left; }
.right	{ float:right; }
.clear	{ clear:both; float:none; }

.text-left		{ text-align:left; }
.text-right		{ text-align:right; }
.text-center,
.text-centre	{ text-align:center; }





/*------------------------------------*\
	$DIAGNOSTICS
\*------------------------------------*/
/*
Apply a class of .debug to the html element ONLY WHEN YOUR SITE IS ON DEV.
*/

/*
Red border 		== 	something is wrong
Yellow border 	== 	something may be wrong, you should double check.
Green border 	== 	perfect, nice one!
*/

/*--- STYLES ---*/
.debug [style],
.debug style{
	/* Inline styles aren’t great, can this be avoided? */
	outline:5px solid yellow;
}
	.debug style{
		display:block;
	}

/*--- IMAGES ---*/
.debug img{
	/* Images without alt attributes are bad! */
	outline:5px solid red;
}
.debug img[alt]{
	/* Images with alt attributes are good! */
	outline-color:green;
}
.debug img[alt=""]{
	/* Images with empty alt attributes are okay in the right circumstances. */
	outline-color:yellow;
}

/*--- LINKS ---*/
.debug a{
	/* Links without titles are yellow, does your link need one? */
	outline:5px solid yellow;
}
.debug a[title]{
	/* Links with titles are green, title attributes can be very useful! */
	outline-color:green;
}
.debug a[href="#"]{
	/* Were you meant to leave that hash in there? */
	outline-color:yellow;
}
.debug a[target]/*,
.debug a[onclick],
.debug a[href*=javascript]*/{
	/* What were you thinking?! */
	outline-color:red;
}

/*--- CLASSES/IDS ---*/
.debug [class=""],
.debug [id=""]{
	/* Is this element meant to have an empty class/ID? */
	outline:5px solid yellow;
}