/* ----------------------------------------------------------------------------
TITLE: Main Stylesheet
AUTHOR: Paulo Elias
URL: http://wearequickpixel.com/
	
	DESCRIPTION: Sets the custom styles for objects on the site.
	
	TABLE OF CONTENTS
		Basic HTML
			Grouping Content
			Text-Level Semantics
			Tabular Data
		Global Styles
			Shared Elements
			Page Elements
		Utility Classes
			Borders
			Messages
			Buttons
			Text
			Margins and Padding
			Effects
			Cursors
	
	COLORS
		Green:		#67b63c
		Blue:		#0195cf
		LT Gray:	#ebebeb
		MD Gray: 	#a9a9a9
		DK Gray:	#4b4c4d
		
	PROPERTY ORDER:
		visibility
		display
		overflow
		position
		top / right / bottom / left
		z-index
		clear
		float
		table
		caption-side
		margin
		padding
		border
		outline
		width
		height
		color
		font
		direction
		letter-spacing
		word-spacing
		line-height
		text
		list-style
		vertical-align
		background
		cursor
		page-break
		box-shadow
		border-radius
		text-shadow
		transition

CREATED: 2007.02.12
MODIFIED: 2011.08.04
-------------------------------------------------------------------------------
	=BASIC HTML
---------------------------------------------------------------------------- */
body 								{ margin-bottom: 36px; color: #000; font-family: 'Droid Sans', 'Trebuchet MS', Tahoma, Verdana, sans-serif; background-color: #ebebeb; }

h1,
h2,
h3,
h4,
h5,
h6									{ clear: both; font-weight: bold; }

h2									{ font-size: 20px; line-height: 24px; margin-bottom: 22px; }

.subpage h2							{ margin-bottom: 6px; color: #0195cf; font-size: 30px; line-height: 48px; }

/*	=GROUPING CONTENT
---------------------------------------------------------------------------- */
hr									{ color: #0195cf; background: #0195cf; }

hr.space							{ visibility: hidden; color: #fff; background: #fff; }

blockquote							{ margin: 18px 40px; padding: 9px 10px; border-left: 3px solid #a9a9a9; font-style: italic; background-color: #ebebeb; }
	blockquote p						{ font-size: 15px; line-height: 25px; }
	blockquote :last-child				{ margin: 0; }


figure,
.figure								{ border: 1px solid #0195cf; }
	figcaption,
	.figcaption							{ font-size: 11px; font-style: italic; line-height: 18px; }


/*	=TEXT-LEVEL SEMANTICS
---------------------------------------------------------------------------- */
/* Links */
a									{ border: none; color: #0195cf; font-weight: normal; text-decoration: none; }
	a img								{ border: none; }
a:visited							{ color: #0195cf; }
a:hover								{ color: #67b63c; }
a:active							{ color: #a9a9a9; }
a:focus								{ outline: 0; }

.arrows a,
.arrow,
.more								{ padding-left: 20px; background: url('../img/site/icons/arrow-right-green.png') no-repeat center left; }

::-moz-selection					{ color: inherit; background-color: #ff9; }
::selection 						{ color: inherit; background-color: #ff9; }


/*	=TABULAR DATA
---------------------------------------------------------------------------- */
table								{ border: 1px solid #0195cf; border-width: 1px 1px 0 0; }
	colgroup							{ }
	col									{ }
	
	tbody								{ }
	
	thead								{ }
		th									{ font-weight: bold; }
		thead th							{ background: #ebebeb; }
	
	tfoot								{ font-style: italic; }
	
	th,
	td,
	caption								{ padding: 9px 10px 8px 5px; border: 1px solid #0195cf; border-width: 0 0 1px 1px; font-size: 12px; line-height: 18px; }
	caption								{ background: #ebebeb; border-width: 1px 1px 0 1px; }
	
	tr.even td							{ background: #a9a9a9; }


/* ----------------------------------------------------------------------------
	=Global Styles
---------------------------------------------------------------------------- */
/*	=SHARED ELEMENTS
---------------------------------------------------------------------------- */
.navigation-utility,
.footer							{ background-color: #0195cf; }

.masthead,
.content						{ background-color: #FFF; }

/*	=PAGE ELEMENTS
---------------------------------------------------------------------------- */
.page							{ }

/*	Header ----------------------------------------------------------------- */
.masthead						{ position: relative; height: 108px; }
.subpage .masthead				{ margin-bottom: 10px; }
	
	.logo							{ position: absolute; top: 22px; left: 40px; }
	.navigation-primary				{ position: absolute; top: 48px ; right: 40px; }

/*	Hero ------------------------------------------------------------------- */
.hero							{ position: relative; border: 1px solid #a9a9a9; border-width: 9px 0; height: 385px; background-color: #4b4c4d; }
	
	.browse						{ float: left; display: block; margin: 180px 0; border: none; width: 28px; height: 21px; text-indent: -5000em; background: url('../img/site/ui/slider-arrow-left.png') no-repeat center right;  }
	.previous					{ margin-right: 3px; }
	.next						{ float: right; background: url('../img/site/ui/slider-arrow-right.png') no-repeat center left; }
	
	.disabled 					{ visibility: hidden; }
	
	.scrollable					{ float: left; position: relative; overflow:hidden; width: 888px; height: 385px; background-color: #4b4c4d; }
	
		.slides						{ position: absolute; width: 20000em; }
			.slide						{ float: left; }

/*	Content ---------------------------------------------------------------- */
.content						{ padding: 18px 0; }

	/* Subpage font and lineheight adjustments */
	.content p,
	.content li,
	.content dt,
	.content dd,
	.content li						{ font-size: 13px; line-height: 25px; }

	.content li						{ font-weight: normal; }

/* Adjust homepage content area */
.home .content p,
.home .content li				{ font-size: 13px; line-height: 24px; }

/*	Content-Primary */
/*	Content-Secondary */
/*	Blog ------------------------------------------------------------------- */
/*	Sidebars --------------------------------------------------------------- */
.sidebar						{ background-color: #f3f3f3; }

.sidebar h3						{ margin-bottom: 6px; font-size: 20px; line-height: 48px; }

.sidebar p,
.sidebar li						{ color: #4b4c4d; font-size: 13px; line-height: 25px; }

/*	Footer ----------------------------------------------------------------- */
.footer							{ padding-top: 36px; }

	.footer h3,
	.footer h4,
	.footer p,
	.footer li,
	.footer a						{ color: #FFF; font-size: 12px; }

	.footer h3,
	.footer h4						{ font-size: 13px; line-height: 20px; }

	.plug h3,
	.plug h4						{ clear:both; margin-bottom: 18px; }
	
	.copyright						{ margin: 9px 0; }

/*	Navigation ------------------------------------------------------------- */

/* Sidebar Nav added in from AppFro */
.sidebar-nav {
	margin:0 0 40px;
	list-style:none;
}
.sidebar-nav li {
	border:1px solid #d9d9d9;
	border-top:0;
	background:#f2f2f2;
	border-radius:3px 0 0 3px;
	-moz-border-radius:3px 0 0 3px;
	-webkit-border-radius:3px 0 0 3px;
}
.sidebar-nav li.first {
	border-top:1px solid #d9d9d9;
}
.sidebar-nav li a {
	background:url("../img/site/icons/arrow.png") no-repeat 10px 50%;
	color:#1A1A1A;
	display:block;
	width:100%;
	padding:10px 27px;
	text-decoration:none;
}
.sidebar-nav li:hover {
	background:#bebebe;
	border-color:#969696;
}
.sidebar-nav li.current {
	left:-10px;
	position:relative;
	width:100%;
	background:url("../img/site/icons/grad-grey.gif") repeat-x scroll center top #0195cf;
	border:1px solid #0195cf;
}
.sidebar-nav li a:hover, .sidebar-nav li.current a {
	color:#fff;
	background:url("../img/site/icons/arrow-active.png") no-repeat 10px 50%;
}
/* Shared navigation styles */
.navigation-utility,
.navigation-primary ul			{ float: left; list-style-type: none; }

.navigation-utility li,
.navigation-primary li			{ float: left; margin: 0; padding: 0; color: #FFF; font-size: 12px; line-height: 18px; }

.navigation-utility a,
.nav a							{ color: #FFF; }

.navigation-utility a:hover,
.nav a:hover					{ color: #4b4c4d; }

.navigation-utility a:active,
.nav a:active					{ color: #FFF; }

/* Utility Navigation specific styles */
.page .navigation-utility		{ margin-bottom: 0; padding: 9px 10px 9px 830px; width: 110px; }
	
	.navigation-utility li			{ margin-right: 9px; padding-right: 10px; border-right:1px solid #FFF; text-align: right; }

/* Primary Navigation specific styles */
.navigation-primary ul			{ margin: 0; padding: 0; }
	
	.navigation-primary li			{ margin-right: 5px; font-weight: bold; }
	
		.navigation-primary a			{ padding: 5px 10px; color: #a9a9a9; font-weight: bold; }
		.navigation-primary .current a,
		.navigation-primary a:hover		{ color: #FFF; background-color: #0195cf; }
		.navigation-primary a:active	{ color: #67b63c; }

/*	Widgets ---------------------------------------------------------------- */
/*	Forms ------------------------------------------------------------------ */
.footer .text 					{ margin-right: 3px; padding: 3px; color: #4b4c4d; }

/* Button styles */
.button							{ padding: 3px 10px; color: #FFF; font-size: 12px; line-height: 20px; }
	/* Button colors */
	.green							{ border: 1px solid #67b63c; border-right: 1px solid #4b4c4d; border-bottom: 1px solid #4b4c4d; background-color: #67b63c; }

/*	Lists ------------------------------------------------------------------ */
/* Shared list styles */
.footer ul,
.links,
.social-media					{ margin: 0; padding: 0; list-style-type: none; }
	
	/* Remove margin and padding */
	.footer li,
	.links li,
	.social-media li			{ margin: 0; padding: 0; }

/* Lists of links */
.links							{ float: left; margin: 0 0 36px;  }
	.links li						{ margin: 0; padding: 0; }

/* Horizantal list for social media icons */
.social-media					{ margin-bottom: 36px; }
	.social-media li				{ float: left; margin-right: 5px; }

.footer ul						{ margin-bottom: 36px; }
	.footer li						{ line-height: 20px; }

.bulleted,
.bulleted ul					{ list-style-type: none; }

	.bulleted li						{ margin-left: 20px; padding-left: 18px; background: url('../img/site/ui/bullet.png') no-repeat 0 9px; }

/* ----------------------------------------------------------------------------
TITLE: Utility Classes
	
	DESCRIPTION: Use these classes in the HTML to provide alignment,
	visual styling, and typography adjustments during prototyping. Ideally
	removed in production on high traffic sites.
---------------------------------------------------------------------------- */
/*	=FLOATS
---------------------------------------------------------------------------- */
.float-left							{ float: left; margin: 0 40px 18px 0; }
.float-right 						{ float: right; margin: 0 0 18px 40px; }


/*	=BORDERS
---------------------------------------------------------------------------- */
.border 							{ border: 1px solid #0195cf; }
.border-top 						{ border-top: 1px solid #0195cf; }
.border-right						{ border-right: 1px solid #0195cf; }
.border-bottom						{ border-bottom: 1px solid #0195cf; }
.border-left						{ border-left: 1px solid #0195cf; }


/*	=MESSAGES
---------------------------------------------------------------------------- */
.error,
.notice,
.success 							{ border-width: 2px; border-style: solid; padding: 7px 10px; }

.error								{ border-color: #fbc2c4; color: #8a1f11; background: #fbe3e4; }
.notice 							{ border-color: #ffd324; color: #514721; background: #fff6bf; }
.success 							{ border-color: #c6d880; color: #264409; background: #e6efc2; }

/* Links within success, error, & notice boxes */
a.error,
.error a							{ color: #fd4239; }
a.notice,
.notice a 							{ color: #514721; }
a.success,
.success a 							{ color: #264409; }


/*	=BUTTONS >> Button styles
---------------------------------------------------------------------------- */
a.button							{ display: block; padding: 5px 15px; border: none; color: #fff; background-color: #a9a9a9; }
a.button:hover							{ background-color: #4F8EAE; }


/*	=TEXT >> Text and font styles
---------------------------------------------------------------------------- */
.quiet								{ color: #666; }
.loud								{ color: #000; }
.highlight							{ font-weight: bold; background-color: #ff9; }

.added								{ background: #060; color: #fff; }
.removed							{ background: #900; color: #fff; }

.disabled							{ opacity: 0.25; cursor: default; }

/* Increase/decrease text size */
.small								{ font-size: 11px; }
.large								{ font-size: 15px; }

/* Align or justify text inside containers */
.align-left 						{ text-align: left; }
.align-center						{ text-align: center; }
.align-right 						{ text-align: right; }
.align-justify						{ text-align: justify; }

/* Pagebreaks */
.page-break							{ page-break-before: always; }


/*	=MARGINS AND PADDING
---------------------------------------------------------------------------- */
/* Remove margins and padding from elements */
.first 								{ margin-left: 0 !important; padding-left: 0 !important; border-left: none !important; }
.last								{ margin-right: 0 !important; padding-right: 0 !important; border-right: none !important; }
.top								{ margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
.bottom 							{ margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; }

/* Reset margins and padding */
.reset 								{ margin: 0 !important; padding: 0 !important; }
.reset-margin 						{ margin: 0 !important; }
.reset-padding 						{ padding: 0 !important; }

/* Reset border */
.reset-border 						{ border: none !important; }

/*	=CUSTOMERS PAGE
---------------------------------------------------------------------------- */
.article.content-main #logos-showcase { margin-top: 45px; }
.article.content-main #logos-showcase p { overflow: auto; }
.article.content-main #logos-showcase p > a { float: left; width: 33%; }
.article.content-main #logos-showcase p > a:fi rst-child { clear: left; }
.article.content-main #logos-showcase p > a > img { width: 100px; margin: 0 auto !important; }
.article.content-main #testimonials-showcase { margin-top: 35px; }
.article.content-main #testimonials-showcase .testimonial-item { overflow:auto; }


/*	=EFFECTS
---------------------------------------------------------------------------- */
/* Rounded corners */
.rounded							{ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; }
.top-left-rounded					{ -webkit-border-top-left-radius: 12px; -moz-border-radius-topleft: 12px; border-top-left-radius: 12px; }
.top-right-rounded					{ -webkit-border-top-right-radius: 12px; -moz-border-radius-topright: 12px; border-top-right-radius: 12px; }
.bottom-left-rounded				{ -webkit-border-bottom-left-radius: 12px; -moz-border-radius-bottomleft: 12px; border-bottom-left-radius: 12px; }
.bottom-right-rounded				{ -webkit-border-bottom-right-radius: 12px; -moz-border-radius-bottomright: 12px; border-bottom-right-radius: 12px; }

/* Drop shadows */
.shadow								{ -webkit-box-shadow: 0 2px 4px #4D4E53; -moz-box-shadow: 0 2px 4px #4D4E53; box-shadow: 0 2px 4px #4D4E53; }

/*	=CURSORS
---------------------------------------------------------------------------- */
.pointer							{ cursor: pointer; }