//@base-url: "http://10.0.1.5:8888/app-bits-2012";
@base-url: "http://app-bits.com";
@page_width: 960px;

@dark: #232b30;
@highlight: #08879a;
@dark_text: #3e4b53;
@light_text: #607480;
@light_on_dark: #f4f4f4;
@mid_on_dark: #c1c1c1;

/* Mixins */
.border-radius (@radius: 2px) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}
.text-shadow-shade(@opacity: 0.8) {
	text-shadow: 0 -1px rgba(0, 0, 0, @opacity);
}
.text-shadow-highlight(@opacity: 0.4) {
	text-shadow: 0 1px rgba(255, 255, 255, @opacity);
}

/* Reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}                  

article, aside, figure, footer, header, 
hgroup, img, nav, section { display:block; }

* {
	margin: 0;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

.wf-loading{ 
	opacity: 0; 
} 
.wf-active{ 
	opacity: 1; 
	-moz-transition: 0.2s opacity ease-in; 
	-webkit-transition: 0.2s opacity ease-in; 
	transition: 0.2s opacity ease-in;
}

body {
	background: url("@{base-url}/assets/images/background_stretchable.png") center center fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	font-family: "myriad-pro-condensed", Helvetica, sans-serif;
	font-weight: 400;
	color: #6e8392;
}
a {
	color: @dark + #334;
	text-decoration: underline;
	.text-shadow-highlight;
	
	&:hover {
		text-decoration: underline;
	}
}
img {
	display: block;
	border: 0;
}
p {
	padding: 5px 0;
	margin: 0;
	font-size: 20px;
	line-height: 1.4em;
	.text-shadow-highlight;
//	color: @dark_text;
}
h1+p {
	color: @dark_text;
	
	a {
		color: @dark_text;
	}
}
p+h2 {
	padding-top: 30px;
}
h1, h2, h3, h4 {
	padding: 0;
	margin: 0;
	font-weight: 400;
	line-height: 1.0em;
	.text-shadow-highlight;
}
h1 {
	border-bottom: 3px solid @dark;
	padding: 0 0 10px 0;
	margin-bottom: 20px;
	font-size: 25px;
	font-weight: 600;
	font-style: italic;
	color: @dark;
	text-transform: uppercase;
}
h2 {
	border-bottom: 1px solid @dark;
	padding: 3px 0 10px 0;
	margin-bottom: 22px;
	font-size: 22px;
	font-weight: 400;
	font-style: italic;
	color: @dark;
	text-transform: uppercase;
	
	a {
		display: inline-block;
		color: @highlight;
		text-decoration: none;
	}
}
h3 {
	font-size: 26px;
	color: #305f84;
	padding: 30px 0;
}
form {
	input, textarea {
		font-family: "myriad-pro-condensed", Helvetica, sans-serif;
		font-weight: 400;
	}
}

/* Common */
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -204px; 
}
.push {
	height: 204px;
}
.clear {
	clear: both;
	height: 0px;
}
a.button {
	display: inline-block;
	background: url("@{base-url}/assets/images/button_background.png") repeat 0 0;
	padding: 18px 30px 20px 30px;
	border: 1px solid black;
	margin: 10px 0;
	.border-radius(2px);
	font-size: 22px;
	font-style: italic;
	color: @light_on_dark;
	line-height: 1.0em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	.text-shadow-shade();
	
	&:hover {
		color: @mid_on_dark;
	}
}
.para img {
	max-width: 100%;
}

section {
	display: block;
}
header, section, div, footer {
	-moz-background-size: auto;
	background-size: auto;
}

.page {
	margin: 0 auto;
	max-width: 80%;
	position: relative;
}

header {
	background: url("@{base-url}/assets/images/header_bottom.png") repeat-x bottom left;
	padding-bottom: 6px;
	border-top: 6px solid @dark;
	
	a#logo {
		display: block;
		float: left;
		width: 180px;
		height: 92px;
		padding-top: 23px;
	}
	
	nav {
		display: block;
		float: right;
		width: 420px;
		padding: 55px 0 0 0;
		margin: 0;
		
		ul {
			float: right;
			list-style: none;
			padding: 0;
			margin: 0;
			
			li {
				float: left;
				height: 26px;
				margin: 0 0 0 45px;
				font-size: 24px;
				font-style: italic;
				line-height: 1.0em;
				text-transform: uppercase;
				
				a {
					color: @dark;
					text-decoration: none;
				}
				
				&.current {
					background: url("@{base-url}/assets/images/nav_current_underline.png") repeat-x bottom left;
					
					a:hover {
						text-decoration: none;
					}
				}
				&:first-child {
					margin: 0;
				}
			}
		}
		
		blockquote {
			height: 18px;
			padding: 38px 0 0 0;
			text-align: right;
			font-size: 18px;
			font-style: italic;
			line-height: 1.0em;
			color: @dark;
			text-transform: uppercase;
			
			strong {
				font-weight: 400;
				color: @highlight;
				
				a {
					color: @highlight;
					text-decoration: none;
				}
			}
		}
	}
	#twitter {
		display: block;
		width: 14px;
		height: 15px;
		position: absolute;
		top: 10px;
		right: 0;
	}
}

footer {
	background: @dark;
	margin-top: 50px;
	padding: 30px 30px 60px 30px;
	height: 64px;
	text-transform: uppercase;
	.border-radius(2px);
	
	.detail {
		float: left;
		width: 80%;
		
		address {
			width: 80%;
			font-size: 24px;
			font-weight: 400;
			font-style: italic;
			color: @light_on_dark;
			.text-shadow-highlight(0);
		}
		
		p {
			width: 80%;
			font-size: 18px;
			font-weight: 200;
			color: @mid_on_dark;
			.text-shadow-highlight(0);
		}
	}
	#social {
		float: right;
		width: 50px;
		overflow: hidden;
		
		.fb-like {
			opacity: 0.8;
			-moz-opacity: 0.8;
			
			&:hover {
				opacity: 1.0;
				-moz-opacity: 1.0;
			}
		}
	}
}

#pagination {
	width: 100%;
	padding: 10px 0 50px 0;
	position: relative;
	
	.flex-direction-nav {		
		li {
			a {
				width: 56px; 
				height: 100px; 
				top: 40%; 
				cursor: pointer; 
				text-indent: -999em;
				z-index: 1000;
				
				&.next {
					right: -60px;
				}
				&.prev {
					left: -60px;
				}
			}
		}
	}
}

.flexslider {
	background: none; 
	border: 0; 
	

	#work {
		.slides {
			.panel {
				position: relative;
				
				img {
					margin: 0 auto;
				}
				p {
					position: absolute;
					top: -10px;
					left: 5px;
					font-size: 16px;
					font-style: italic;
					color: @dark;
					text-transform: uppercase;
				}
			}
		}
	}
}

form { @form_border: #878b8d;
	margin: -15px 0 0 0;
	padding: 0;
	
	ul {
		list-style: none;
		
		li {
			
			label, input, textarea {
				font-size: 22px;
				font-style: italic;
				color: @light_text;
			}
			
			label {
				color: @dark;
			}
			
			textarea {
				display: block;
				background: url("@{base-url}/assets/images/form_element_background.png") repeat 0 0;
				height: 140px;
				width: 100%;
				padding: 10px 0 0 0;
				margin: 10px 0 0 0;
				border: 0;
				border-top: 1px solid @form_border;
				border-bottom: 1px solid @form_border;
			}
			
			&.text {
				background: url("@{base-url}/assets/images/form_element_background.png") repeat 0 0;
				height: 36px;
				padding: 14px 0 0 0;
				margin-bottom: 26px;
				border-bottom: 1px solid @form_border;
				
				input {
					background: none;
					width: 80%;
					border: 0;
				}
			}
			
			&.submit {
				padding-top: 16px;
				
				input {
					background: url("@{base-url}/assets/images/button_background.png") repeat 0 0;
					height: 60px;
					padding: 0 25px;
					border: 1px solid black;
					.border-radius(2px);
					font-size: 22px;
					font-style: italic;
					color: @light_on_dark;
					cursor: pointer;
					
					&:hover {
						color: @mid_on_dark;
					}
				}
			}
		}
	}
}


/* Contact Page */
/*.index header, .icons header, .free-icons header, .download header, .contact header, .thank-you header, .page-not-found header {
	margin: 0 0 60px 0;
}
.icons #pagination, .free-icons #pagination, .download #pagination {
	padding: 60px 0 0 0;
}*/
.download header, .contact header, .free-icons header, .icons header, .thank-you header, .page-not-found header {
	margin: 0 0 60px 0;
}



/* Default Fonts */
.wf-loading body, .wf-loading p, .wf-loading h1, .wf-loading h2, .wf-loading h3 {
	font-family: Tahoma, sans-serif;
	font-size: 12px;
}
.wf-loading p {
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	font-style: italic;
}
.wf-loading h1 {
	font-size: 20px;
}
.wf-loading h2 {
	font-size: 18px;
}
.wf-loading header nav {
	ul li a {
		font-size: 16px;
	}
	blockquote {
		font-size: 14px;
	}
}
.wf-loading .flexslider {
	#work {
		.slides {
			.panel {
				p {
					top: 0px;
					font-size: 12px;
				}
			}
		}
	}
}
.wf-loading footer {
	address {
		font-size: 16px;
	}
	
	p {
		font-size: 14px;
	}
}