/*
	(c)2012 - visuallizard.com
	
	Inspired by:
	Skeleton				www.getskeleton.com
	Bootstrap				twitter.github.com/bootstrap/
	HTML5 ✰ Boilerplate		h5bp.com
*/

/* Table of Content

	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons & Messages
	#Tabs
	#Forms
	#Misc */


/* !Reset & Basics ============================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }

	::-moz-selection { background: #85c446; color: #fff; text-shadow: none; }
	::selection { background: #85c446; color: #fff; text-shadow: none; }

/* !Basic Styles ============================== */
	html {
		font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; 
	}
	body {
		background: #fff;
		font: 14px/20px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #444;
		/*-webkit-font-smoothing: antialiased;  Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
 }


/* !Typography ============================== */
	h1, h2, h3, h4, h5, h6 {
		color: #181818;
		font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
		font-weight: normal;
	}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 20px; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	i, em { font-style: italic; }
	b, strong { font-weight: bold; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 10px 20px 0 15px; border-left: 5px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #666; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #666; }



/* !Links */
	a		{ color: #7a2; outline: 0; }
	a:hover	{ color: #000; outline: 0;}
	a:focus	{ color: #000; outline: thin dotted; }
	a:active { outline: 0; }

	p a { line-height: inherit; }


/* !Lists */
	ul, ol { margin: 0 0 20px 25px; }
	ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }
	ul { list-style: disc; }
	ol { list-style: decimal; }
	li { line-height: 20px; }
	ul.unstyled { list-style: none; margin-left: 0; }
	dl { margin-bottom: 20px; }
	dl dt, dl dd { line-height: 20px; }
	dl dt { font-weight: bold; }
	dl dd { margin-left: 20px; }
	
	dd:after {
		/* http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/ */
		content: '\D\A';
		white-space: pre;
	}


/* !Images */
	img {
	  border: 0;
	  -ms-interpolation-mode: bicubic;
	}
	img.scale-with-grid {
		max-width: 100%;
		height: auto;
	}
	.img_left {
		float: left;
		margin: 0 1em 0.5em 0;
	}
	.img_right {
		float: right;
		margin: 0 0 0.5em 1em;
	}

/* !Other */
	code, pre {
	  padding: 0 3px 2px;
	  font-family: Monaco, Andale Mono, Courier New, monospace;
	  font-size: 12px;
	  -webkit-border-radius: 3px;
	  -moz-border-radius: 3px;
	  border-radius: 3px;
	}
	code {
	  background-color: #eee;
	  color: rgba(0, 0, 0, 0.75);
	  padding: 1px 3px;
	}
	pre {
	  background-color: #f5f5f5;
	  display: block;
	  padding: 8.5px;
	  margin: 0 0 18px;
	  line-height: 18px;
	  font-size: 12px;
	  border: 1px solid #ddd;
	  border: 1px solid rgba(0, 0, 0, 0.15);
	  -webkit-border-radius: 3px;
	  -moz-border-radius: 3px;
	  border-radius: 3px;
	  white-space: pre;
	  white-space: pre-wrap;
	  word-wrap: break-word;
	}
	
	hr {
		clear: both;
		height: 0;
		margin: 20px 0 19px;
		border: 0;
		border-bottom: 1px solid #ddd;
	}
	
	address {
		display: block;
		line-height: 18px;
		margin-bottom: 18px;
	}


/* !Non-semantic helper classes ============================== */

	/* For image replacement */
	.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
	.ir br { display: none; }
	
	/* Hide from both screenreaders and browsers: h5bp.com/u */
	.hidden { display: none !important; visibility: hidden; }
	
	/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
	.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
	
	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
	.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
	
	/* Hide visually and from screenreaders, but maintain layout */
	.invisible { visibility: hidden; }
	
	/* Contain floats: h5bp.com/q */ 
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }


.container {
/*
	Set site width only here and use this class to centre the content in browser window.
	Default width is 960px and can be changed in skeleton.css to maintain resposivnes.
*/
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
}

.main {
	padding: 10px;
}

/* Header */
	#header {
		clear: both;
		position: relative;
		overflow: hidden;
		margin: 0 0 20px 0;
		padding: 10px;
		background: #444;
		background-repeat: repeat-x;
		background-image: -khtml-gradient(linear, left top, left bottom, from(#444), to(#222));
		background-image: -moz-linear-gradient(top, #444, #222);
		background-image: -ms-linear-gradient(top, #444, #222);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444), color-stop(100%, #222));
		background-image: -webkit-linear-gradient(top, #444, #222);
		background-image: -o-linear-gradient(top, #444, #222);
		background-image: linear-gradient(top, #444, #222);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0);
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	}
		#header h1 { margin: 0; display: block; float: left; }
		#header h1 .logo {
			display: block;
			width: 250px;
			height: 60px;
		/* 	background: url(http://visuallizard.com/img/logo.png) 0 0 no-repeat transparent; */
		/* 	text-indent: -99999em; */
			text-decoration: none;
			cursor: pointer;
		}
		header a:hover,
		header a:focus {
			color: #aaa;
		}
		
		
		/* Language toggle */
		header .lang { }

/* Error Messages */
	.error-message {
		color: #ee5f5b;
		margin-bottom: 10px;
	}


/* !Debug & CakePHP Debug SQL table ============================== */
	table.cake-sql-log {
		display: none;
		clear: both;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		text-align: left;
		border-top: 1px solid #000;
		border-left: 1px solid #000;
		color: #333;
		background-color: #eee;
	}
	
	table.cake-sql-log td,
	table.cake-sql-log th {
		border-bottom: 1px solid #999;
		border-right: 1px solid #999;
		padding: 0.5em;
	}
	
	table.cake-sql-log caption {
		text-align: center;
		background-color: #900;
		color: #fff;
		font-weight: bold;
		font-size: 1.5em;
		padding: 0.5em;
	}