/*
Theme Name: Aquila
Theme URI: http://tanshcreative.com/aquila-st-preview/index.html
Description: Aquila one page template is designed and developed by Tansh.
Version: 1.0
Author: Tansh
*/

/*
Searching for particular element?
Here is CSS structure...

1. TEMPLATE SETUP
	1.1 Reset 
	1.2 General styles
	1.3 Typography 
	1.4 Basic layout divs and common classes
	1.5 Image styles
		
2. TEMPLATE STRUCTURE
	2.1 header
	2.2 about
	2.3 work
	2.4 blog
	2.5 contact 
	2.6 forms (contact and search)
	2.7 footer
	2.8 tipsy


/*============================================================*/
/*---------- 1. TEMPLATE SETUP ----------*/
/*============================================================*/

/*----------------------------------------*/
/*----- 1.1 Reset -----*/
/*----------------------------------------*/
/* From - http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126*/
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;
}
/* HTML5 display-role reset for older browsers */
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;
}
/*Clearing*/
.container:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix:before, .clearfix:after, {
 content: '\0020';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/*----------------------------------------*/
/*----- 1.2 General styles -----*/
/*----------------------------------------*/
body {
	background: url(../images/bg-grey.jpg) repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #56565b;
	font-weight: normal;
	line-height: 1.5em;
	text-shadow: 0px 1px 0px #ffffff;
}
strong {
	font-weight: bold;
}
/*----------------------------------------*/
/*----- 1.3 Typography -----*/
/*----------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: 'PT Sans', sans-serif;
	color: #000000;
	font-weight: 700;
	font-style: normal;
	word-spacing: 1px;
	line-height: 1.3em;
	text-transform: uppercase;
}
h1 {
	font-size: 32px;
	color: #000000;
	margin-bottom: 5px;
	text-align: center;
}
h2 {
	font-size: 30px;
	margin-bottom: 15px;
	text-align: center;
}
h3 {
	font-size: 18px;
	margin-bottom: 15px;
}
h4 {
	font-size: 16px;
	margin-bottom: 15px;
}
h5 {
	font-size: 14px;
	margin-bottom: 15px;
	text-align: center;
}
h6 {
	font-size: 14px;
	text-transform: none !important;
	line-height: 1em;
	margin-bottom: 0px;
}
a {
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	font-style: normal;
	outline: none;
}
a:hover {
	color: #000000;
}
h1 a, h2 a, h3 a, h4 a, h5 a {
	color: #000000;
}
/*----------------------------------------*/
/*----- 1.4 Basic layout divs and common classes -----*/
/*----------------------------------------*/
.container {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}
.container .grid_1 {
	width: 60px;
}
.container .grid_2 {
	width: 140px;
}
.container .grid_3 {
	width: 220px;
}
.container .grid_4 {
	width: 330px;
}
.container .grid_5 {
	width: 380px;
}
.container .grid_6 {
	width: 460px;
}
.container .grid_7 {
	width: 540px;
}
.container .grid_8 {
	width: 620px;
}
.container .grid_9 {
	width: 700px;
}
.container .grid_10 {
	width: 780px;
}
.container .grid_11 {
	width: 860px;
}
.container .grid_12 {
	width: 940px;
}
/*-----margin adjust classes-----*/
.alpha {
	margin-left: 0px !important;
}
.beta {
	margin-right: 0px !important;
}
/*-----colored sections-----*/
/*margin top to section blue to adjust vertical scroll*/
.section_blue {
	background: url(../images/bg-skyblue.jpg) repeat;
	padding: 80px 0px 80px 0px;
	margin-top: 100px;
}
.section_orange {
	background: url(../images/bg-orange.jpg) repeat;
	padding: 80px 0px 80px 0px;
}
.section_grey {
	background: url(../images/bg-grey.jpg) repeat;
	padding: 80px 0px 80px 0px;
}
/*-----dividers-----*/
/*single line divider*/
.divider {
	background: url(../images/divider-line.jpg) repeat-x;
	width: 100%;
	height: 2px;
	margin: 40px 0px;
}
/*divider at center of each section*/
.center_divider {
	background: url(../images/thick-line-top.png) no-repeat center top;
	width: 100%;
	margin: 40px auto;
	display: block;
}
.center_divider_inner {
	background: url(../images/thick-line-bottom.png) no-repeat center bottom;
	width: 100%;
	padding: 12px 0px !important;
}
/*dividers according to colors - joining to sections*/
.divider_bluetogrey {
	background: url(../images/divider-blue-to-grey.jpg) repeat-x;
	width: 100%;
	height: 12px;
	display: block;
}
.divider_greytoorange {
	background: url(../images/divider-grey-to-orange.jpg) repeat-x;
	width: 100%;
	height: 12px;
	display: block;
}
.divider_orangetogrey {
	background: url(../images/divider-orange-to-grey.jpg) repeat-x;
	width: 100%;
	height: 12px;
	display: block;
}
/*-----spacers-----*/
.spacer_30px {
	width: 100%;
	height: 30px;
	display: block;
	float: left;
}
/*-----commonly used classes-----*/
.intro_text {
	width: 620px;
	margin: 0px 160px;
	text-align: center;
}
/*----------------------------------------*/
/*----- 1.5 Image styles -----*/
/*----------------------------------------*/
.circleimg_bg {
	width: 150px;
	height: 150px;
	margin: 10px auto;
	padding: 5px;
	border: 5px solid #373954;
	display: block;
	border-radius: 160px;
	-webkit-border-radius: 160px;
	-moz-border-radius: 160px;
	position: relative;
	z-index: 99;
}
.image_bg {
	background-color: #f5f5f5;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid rgba(155, 155, 155, 0.58);
	box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-moz-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	padding: 10px;
	margin-bottom: 10px;
}
/*============================================================*/
/*---------- 2. TEMPLATE STRUCTRE ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 2.1 header -----*/
/*----------------------------------------*/
#header_bg {
	background: url(../images/header-bg-full.jpg) repeat;
	width: 100%;
	height: 100px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
#header {
	background: url(../images/header-bg.png) no-repeat center bottom;
	width: 940px;
	height: 150px;
	margin: 0 auto;
	z-index: 9999;
	position:relative;
}
/*----- navigation -----*/
/*You need to adjust width of '#nav_left' and '#nav_right' and margin left to '#nav_right' as per change of width of your logo*/
/*Width of '#nav_left' and '#nav_right' = 940px minus width of logo divided by 2 (two).*/
/*Margin left to '#nav_right' = width of logo*/
#nav_left {
	width: 402px;
	float: left;
}
#nav_left ul {
	float: right;
}
#nav_left ul li {
	padding: 60px 20px 0px 20px;
	background: none;
	list-style-type: none;
	float: left;
}
#nav_left ul li.right_padd {
	padding-right: 50px;
}
#nav_right {
	width: 402px;
	float: left;
	margin-left: 135px;
}
#nav_right ul li {
	padding: 60px 20px 0px 20px;
	background: none;
	list-style-type: none;
	float: left;
}
#nav_right ul {
	float: left;
}
#nav_right ul li.left_padd {
	padding-left: 50px;
}
#nav_left ul li a, #nav_right ul li a {
	font-family: 'PT Sans', sans-serif;
	font-size: 24px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration:none;
	text-shadow: none;
	outline: none;
	padding: 0;
}
#nav_left ul li a:hover, #nav_right ul li a:hover {
	color: #a9aab6;
}
/*'Left' for logo should be - (940px minus width of logo divided by two)*/
.logo {
	position: absolute;
	width: 135px;
	height: 100px;
	left: 402px;
	top: 25px;
}
/*----------------------------------------*/
/*----- 2.2 about section -----*/
/*----------------------------------------*/
#about {
	text-align: center;
}
.job {
	font-family: 'PT Sans', sans-serif;
	font-size: 20px;
}
/*When you put up your mail id how to bring trigger icon at center?
Just increase / decrease 'margin-left' of '.mail'
*/
.mail {
	color: #8c4e3d;
	line-height: 2em;
	width: auto;
	float: left;
	margin-right: 26px;
	margin-left: 259px;
}
.call {
	color: #8c4e3d;
	line-height: 2em;
	width: auto;
	float: left;
	margin-left: 24px;
}
.mail img, .call img {
	margin-right: 5px;
	float: left;
}
.slider_icon {
	margin-top: 7px;
	float: left;
}
a.trigger {
	background: url(../images/icons/featured-preview-sprite.png) no-repeat 0 0;
	width: 30px;
	height: 19px;
	display: block;
}
a.active.trigger {
	background: url(../images/icons/featured-preview-sprite.png) no-repeat 0 -19px;
	width: 30px;
	height: 19px;
	display: block;
}
.hidden_div {
	display: none;
}
/*-----slider-----*/
#slider_bg {
	background-color: #f5f5f5;
	width: 700px;
	height: 320px;
	padding: 10px;
	margin: 15px auto 7px auto;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid rgba(155, 155, 155, 0.58);
	box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-moz-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	display: block;
}
#slider_bg img {
	float: left;
}
/*----------------------------------------*/
/*----- 2.3 work section -----*/
/*----------------------------------------*/
#work {
	text-align: center;
}
/*---navigation for quiksand---*/
ul.filter_nav {
	text-align: center;
}
ul.filter_nav li {
	padding: 0px 10px;
	background: none;
	list-style: none;
	display: inline-block;
}
ul.filter_nav li a {
	font-size: 11px;
	text-transform: uppercase;
	outline: none;
}
ul.filter_nav h5 {
	margin-bottom: 0px;
}
/*---works gallery---*/
ul.filter_content {
	width: 960px;
	float: left;
	clear: both;
}
ul.filter_content li {
	background-color: #f5f5f5;
	width: 200px;
	padding: 10px 10px 20px 10px;
	margin: 10px;
	text-align: center;
	line-height: 1.1em;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid rgba(155, 155, 155, 0.58);
	box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-moz-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	list-style: none;
	z-index: 9;
	float: left;
}
ul.filter_content li img {
	float: left;
}
ul.filter_content li a {
	font-size: 11px;
}
/*---zoom, play icons---*/
.thumb {
	padding-bottom: 30px;
	position:relative;
	display:inline-block;
	overflow:hidden;
	z-index: 99;
	float: left;
}
.thumb .zoom {
	background: url(../images/icons/zoom.png) 0 0 no-repeat;
	width: 60px;
	height: 60px;
	position:absolute;
	left: 50%;
	top: 150px;
	margin-left: -30px;
	outline: none;
	z-index: 99 !important;
	display: block;
}
.thumb .zoom:hover {
	background: url(../images/icons/zoom.png) 0 -60px no-repeat;
}
.thumb .play {
	background: url(../images/icons/video-preview.png) 0 0 no-repeat;
	width: 60px;
	height: 60px;
	position:absolute;
	left: 50%;
	top: 150px;
	margin-left: -30px;
	outline: none;
	z-index: 99 !important;
	display: block;
}
.thumb .play:hover {
	background: url(../images/icons/video-preview.png) 0 -60px no-repeat;
}
/*----------------------------------------*/
/*----- 2.4 blog section -----*/
/*----------------------------------------*/
ul.postinfo {
	font-size: 12px;
	color: #4e5063;
	font-weight: 700;
	padding-bottom: 3px;
	display: block;
	clear: both;
}
ul.postinfo li {
	margin-right: 20px;
	padding-bottom: 1px;
	list-style-type: none;
	display: inline;
}
ul.postinfo li.pdate {
	background: url(../images/icons/icon-date.png) no-repeat left top;
	width: 16px;
	height: 16px;
	padding-left: 20px;
}
ul.postinfo li.pcattag {
	background: url(../images/icons/icon-tag.png) no-repeat left top;
	width: 16px;
	height: 16px;
	padding-left: 20px;
}
ul.postinfo li.pauthor {
	background: url(../images/icons/icon-user.png) no-repeat left top;
	width: 16px;
	height: 16px;
	padding-left: 20px;
}
ul.postinfo li.pcomments {
	background: url(../images/icons/icon-comment.png) no-repeat left top;
	margin-right: 0px;
	width: 16px;
	height: 16px;
	padding-left: 20px;
}
ul.postinfo li a {
	font-size: 11px;
	font-style: italic;
	font-weight: 400;
}
ul.list_bottombg li {
	background: url(../images/divider-line.jpg) repeat-x bottom;
	margin-bottom: 5px;
	padding-bottom: 5px;
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
/*----- list with line at bottom -----*/
ul.list_bottombg li a {
	font-size: 11px;
	color: #56565b;
	text-transform: uppercase;
}
ul.list_bottombg li a:hover {
	color: #8c4e3d;
}
/*----- list for latest comments -----*/
ul.latestcomment li {
	margin-bottom: 5px;
	background: none;
	list-style-type: none;
}
ul.latestcomment li span {
	font-style: italic;
}
/*----- flickr feed -----*/
.flickr_feed img {
	float: left;
	width: 60px !important;
	height: 60px !important;
	background-color: #f5f5f5;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid rgba(155, 155, 155, 0.58);
	box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-moz-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	padding: 10px;
	margin: 0px 10px 10px 0px;
}
/*----- twitter -----*/
.twitter-feed {
	text-align: center;
}
.twitter-feed h5 {
	font-family: 'PT Sans', sans-serif;
}
.tweet_time {
	display: none;
}
.tweet_list, .tweet_list li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
/*----------------------------------------*/
/*----- 2.5 contact section -----*/
/*----------------------------------------*/
ul.social {
	text-align: center;
	height: 32px;
}
ul.social li {
	display: inline-block;
	list-style-type: none;
	text-indent: -9999;
}
a.twitter {
	background: url(../images/icons/twitter-sprite.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
	display: block;
}
a.twitter:hover {
	background: url(../images/icons/twitter-sprite.png) no-repeat 0 -32px;
}
a.skype {
	background: url(../images/icons/skype-sprite.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
	display: block;
}
a.skype:hover {
	background: url(../images/icons/skype-sprite.png) no-repeat 0 -32px;
}
a.dribbble {
	background: url(../images/icons/dribbble-sprite.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
	display: block;
}
a.dribbble:hover {
	background: url(../images/icons/dribbble-sprite.png) no-repeat 0 -32px;
}
a.vimeo {
	background: url(../images/icons/vimeo-sprite.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
	display: block;
}
a.vimeo:hover {
	background: url(../images/icons/vimeo-sprite.png) no-repeat 0 -32px;
}
a.tumblr {
	background: url(../images/icons/tumblr-sprite.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
	display: block;
}
a.tumblr:hover {
	background: url(../images/icons/tumblr-sprite.png) no-repeat 0 -32px;
}
a.facebook {
	background: url(../images/icons/facebook-sprite.png) no-repeat 0 0;
	width: 32px;
	height: 32px;
	display: block;
}
a.facebook:hover {
	background: url(../images/icons/facebook-sprite.png) no-repeat 0 -32px;
}
/*----------------------------------------*/
/*----- 2.6 forms -----*/
/*----------------------------------------*/
/*----- contact form -----*/
#contactform ul li {
	background-color: #f5f5f5;
	width: 290px;
	margin-right: 20px;
	margin-bottom: 30px;
	padding: 5px;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid rgba(155, 155, 155, 0.58);
	box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-moz-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(155, 155, 155, 0.4);
	list-style-type: none;
	float: left;
}
#contactform label {
	width: 55px;
	padding-left: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 2.3em;
	font-weight: 700;
	display: inline-block;
	float: left;
}
#contactform input {
	background: #ffffff;
	width: 222px;
	height: 30px;
	padding-left: 5px;
	border: 1px solid #ededed;
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.9em;
}
/*subject field*/
#contactform ul li.subject {
	width: 930px;
}
#contactform ul li.subject input {
	width: 862px;
}
/*message field*/
#contactform ul li.message {
	width: 930px;
}
#contactform ul li.message label {
	width: 930px;
}
#contactform textarea {
	background: #ffffff;
	width: 918px;
	height: 140px;
	padding: 5px;
	margin-top: 5px;
	border: 1px solid #ededed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	display: inline-block;
	float: left;
}
#contactform label span {
	font-size: 11px;
	font-style: italic;
	color: #8c4e3d;
	font-weight: 400;
}
/*error*/
#contactform label.error {
	display: none !important;
}
#contactform input.error {
	border: 1px solid red;
}
#contactform textarea.error {
	border: 1px solid red;
}
/*submit button*/
#contactform input.submit {
	background: #373954;
	width: auto;
	height: 45px;
	padding: 0px 40px;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	color: #f5f5f5;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}
/*result*/
#result {
	width: 940px;
	padding-top: 5px;
	display: block;
}
/*----- search form -----*/
#searchform ul li {
	background-color: #f5f5f5;
	width: 228px;
	padding: 5px;
	margin: 0;
	border: 1px solid #ffffff;
	list-style-type: none;
	float: left;
}
#searchform input {
	background: #ffffff;
	width: 221px;
	height: 28px;
	padding-left: 5px;
	border: 1px solid #ededed;
	line-height: 1.6em;
	display: inline-block;
}
#searchform input.search_submit {
	background: url(../images/icon-search.jpg) no-repeat;
	width: 60px;
	height: 44px;
	cursor: pointer;
	border: none !important;
}
/*----------------------------------------*/
/*----- 2.7 footer -----*/
/*----------------------------------------*/
#footer {
	background: url(../images/divider-line.jpg) repeat-x top;
	width: 940px;
	margin: 40px auto 0px auto;
	padding: 20px 0px;
	font-size: 12px;
}
#footer ul {
	text-align: center;
}
#footer ul li {
	padding: 0px 10px;
	background: none;
	list-style-type: none;
	display: inline-block;
}
#footer ul li h5 {
	font-size: 12px;
	margin-bottom: 0px;
	margin-right: 5px;
	line-height: 1.5em;
	float: left;
}
/*----------------------------------------*/
/*----- 2.8 tipsy -----*/
/*----------------------------------------*/
.tipsy {
	padding: 5px;
	font-size: 13px;
}
.tipsy-inner {
	padding: 5px 8px 4px 8px;
	background-color: #93ab79;
	color: white;
	max-width: 200px;
	text-align: center;
	text-shadow: none;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}