/* --------------------------------------------------
 * VARIABLES
 * ------------------------------------------------*/
@import "variables.less";


/* --------------------------------------------------
 * BASE RESET
 * ------------------------------------------------*/

* {
	outline: none;
	
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: none;
}

body {
	background: #f5f5f5 url(../images/layout/background-body.png) top left repeat;
	
	margin: 0;
	padding: 0;
	
	color: #303030;
	.typography('sans-serif');
	font-size: 100%;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}

a:active, a:link, a:hover, a:visited {
	color: #303030;
	text-decoration: none;
}

p, h2, h3, h4, h5, h6, ol, ul, table, dl {
	margin: 10px 0;
}

td {
	.typography('sans-serif');
}

sup, sub {
	position: relative;
	
	height: 0;
	
	font-size: 0.6em;
	line-height: 1.0em;
	vertical-align: baseline;
	_vertical-align: bottom;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}


p, ul, ol, table, dl, li {
	font-size: 0.9em;
	line-height: 1.15em;
}

ul {
	list-style-type: none;
}

ol {
	margin-left: 20px;
}

ul ul, ul ol, ol ul, ol ol, ul p, ol p, table p, table ul, table ol, table table {
	font-size: 0.9em;
	line-height: 1.15em;
}

small {
	font-size: 0.9em;
}


/* --------------------------------------------------
 * GLOBAL
 * ------------------------------------------------*/

a, a strong {
	text-shadow: none;
	
	.transition(color 0.25s);
	.transition(border 0.25s);
}

h1, h2, h3, th {
	.typography('sans-serif');
}
	
.canvas {
	display: inline-block;
	
	position: relative;

	width: 1200px;
	height: 100%;
	
	margin: 0 auto;
}

#enc {
	min-height: 600px;
}

button {
	background: #f6f4f4 url('../images/layout/background-button.png') top left repeat-x;
	background-size: 100% 100%;
	@box-shadow: inset 0 0 1px 1px #fff, 1px 1px 1px rgba(198, 198, 198, 0.25);
	.box-shadow(@box-shadow);
	border: 1px solid #c8c8c8;
	border-radius: 6px;
	
	padding: 7px 25px;
	margin: 0 10px 0 0;
	
	font-size: small;
	text-shadow: 1px 1px 1px #fff;
	
	cursor: pointer;
}

label {
	font-size: 1.1em;
	line-height: 1.2em;
	
	cursor: pointer;
}

input, textarea, select, .custom-select-container, .multi-select-inner, .custom-fileinput-container {
	display: inline-block;
	.box-sizing;
	
	background: #e6e6e6;
	.box-shadow(inset 0 1px 2px rgba(198, 198, 198, 1));
	border: none;
	border-radius: 6px;
	
	height: 20px;
		
	padding: 5px 6px;
	
	font-size: 1.0em;
	line-height: 1.35em;
	text-shadow: 1px 0 1px rgba(198, 198, 198, 1);
	.typography('sans-serif');
	vertical-align: top;
}

.error input, .error textarea, .error select, .error .custom-select-container, .error .multi-select-inner, .error .custom-fileinput-container {
	background: #FEF1EC;
	border: 1px solid #CD0A0A;
	border-radius: 6px;
	.box-shadow(inset 1px 1px 2px 0px rgba(205, 10, 10, .35));
/* 	outline: rgba(205, 10, 10, .25) solid 1px; */
}

.error {
	p, ol {
		text-shadow: none;
	}
}

input.image {
	background: none;
	border: none;
	
	width: auto !important;
	height: auto !important;
	
	padding: 0;
}

textarea {
	height: 120px;
}

select, input[type="file"], .custom-select-container, .multi-select-inner, .custom-fileinput-container {
	cursor: pointer;
}

select {
	.appearance;
	
	height: 18px;
	
	padding: 5px;
}

option {
	padding: 0 5px;
}

li.checkbox input, li.radio input {
	border: none !important;
	
	width: auto !important;
	height: auto !important;
	
	padding: 0 !important;
	
	vertical-align: top !important;
}

.text-center {
	text-align: center;
}

::-webkit-input-placeholder {
   color: #777;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

:-moz-placeholder { /* Firefox 18- */
   color: #777;  
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #777; 
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .15); 
}

:-ms-input-placeholder {  
   color: #777;  
   text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

::-webkit-inner-spin-button {
	.appearance;
	
	top: 2px;
	right: 2px;
	
	background: url(../images/icons/icon-form-number.png) no-repeat;
	border: none;
 
	width: 14px;
	height: 12px;
	
	cursor: pointer;
}

::-webkit-outer-spin-button {
	 .appearance;
}


/* --------------------------------------------------
 * HEADER
 * ------------------------------------------------*/
@import "header.less";


/* --------------------------------------------------
 * CONTENT
 * ------------------------------------------------*/
@import "content.less";


/* --------------------------------------------------
 * FOOTER
 * ------------------------------------------------*/
 
/*
	<footer>
		<div class="copyright">&copy; <?= date('Y'); ?> Centripital. All Rights Reserved.</div>
		<div class="SolutionBuilt">Site designed by <a href="http://www.SolutionBuilt.com" target="_blank">SolutionBuilt</a></div>
		<div class="legal">
			<ul>
				<li><a href="<?= base_url(''); ?>">Terms of Service</a></li>
				<li><a href="<?= base_url(''); ?>">Privacy Policy</a></li>
			</ul>
		</div>
	</footer>
*/

footer {
	clear: both;
	
	position: relative;
	
	background: #45484a;
	
	width: 100%;
	
	padding: 10px 0;
	margin: 20px 0 0;
		
	color: #b1b6b9;
	font-weight: 100;
	
	a {
		color: #bbb !important;
		text-decoration: none;
		
		&:hover {
			text-decoration: underline;
		}
	}
	
	.copyright {
		display: inline-block;
		float: left;
		
		img {
			margin: 0 10px;
			
			vertical-align: middle;
		}
		
		p {
			margin: 0;
		}
	}
	
	.designedBy {
		display: inline-block;
		float: right;
		
		p {
			margin: 0;
			
			line-height: 36px;
		}
	}
}


/* --------------------------------------------------
 * MISCELLANEOUS GLOBAL
 * ------------------------------------------------*/
.hidden {
	display: none;
}

img.border {
	.box-shadow(inset 0 0 7px rgba(0, 0, 0, 1));
}


/* --------------------------------------------------
 * ERROR & SUCCESS MESSAGES
 * ----------------------------------------------- */
div.error {
	color: #cc0000;
	font-size: large;
	font-weight: bold;
	text-align: left;
	
	ol {
		list-style-type: disc;
		
		margin-left: 40px;
		
		li {
			padding: 0;
			
			font-weight: normal;
		}
	}
}

span.error {
	color: #cc0000;
	line-height: 30px
}

div.success {
	color: #009900;
	font-size: large;
	font-weight: 400;
	text-align: left;
}

span.success {
	color: #009900;
}