/*******************************************************************************

	Focus Decorators
	Code by Karolina Szczur

********************************************************************************

	1. BASE STYLES
		1.1 Reset
		1.2 Clearfix
		1.3 Default Styles

	2. COMMON STYLES
		2.1 Container
		2.2 Header
		2.3 Navigation
		2.4 Content
		2.5 Sidebar
		2.6 Footer
		2.7 jScrollPane

	3. PAGES STYLES
		3.1 Home
		3.2 Certificates
		3.3 Photos
		3.4 Contact
		3.5 Services


	4. PRINT

*******************************************************************************/


/* 1. BASE STYLES
--------------------------------------------------------------------------------*/


/* 1.1 Reset
------------------------------------------------------------------------------*/

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, figcaption, figure, 
footer, header, hgroup, menu, nav, 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;
}

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;
}


/* 1.2 Clearfix
------------------------------------------------------------------------------*/

.clearfix:after,
#navigation:after,
.wrapper .images-left:after,
.wrapper .images-right:after,
#content-outer:after,
#footer .vcard:after,
#footer .copyright:after,
.contact #content-inner:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}


/* 1.3 Default Styles
------------------------------------------------------------------------------*/

body {
	font: 85%/1.25 Georgia, serif;
	color: #090909;
	background: #6b6b6c url(../images/common/bg.jpg) repeat;
}

hr {
	display: none;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

del {
	text-decoration: line-through;
}

th, td {
	vertical-align: top;
}

th {
	font-weight: normal;
	text-align: left;
}

address, cite, dfn {
	font-style: normal;
}

abbr, acronym {
	border-bottom: 1px dotted #999;
	cursor: help;
}

input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
}

textarea {
	 overflow: auto;
}

a, a:visited {
	text-decoration: none;
	color: #788d2e;
	
}

a:hover, a:active, a:focus {
	text-decoration: underline;
	color: #788d2e;
}

h3, h4 {
	font: 34px futura-pt, 'century gothic', sans-serif;
	text-transform: uppercase;
	color: #788d2e;
}

h3 {
	font-weight: bold;
}

h4 {
	font-size: 29px;
}

img.typekit-badge,
#typekit-badge-zyr7yph {
	display: none !important;
}

/* 2. COMMON STYLES
--------------------------------------------------------------------------------*/


/* 2.1 Container
------------------------------------------------------------------------------*/

.slide {
	width: 100%;
	height: 551px;
	position: relative;
	margin: -665px 0 0 0;
	background: rgb(0, 0, 0, 0.3);
}

.slide .images-left,
.slide .images-right {
	position: absolute;
}

.slide .images-left {
	left: 0;
}

.slide .images-right {
	right: 0;
}

.slide .column {
	float: left;
}

.slide img {
	display: block;
	z-index: -100;
	position: relative;
}

.container {
	position: relative;
	width: 962px;
	margin: 0 auto;
	z-index: 1000;
}


/* 2.2 Header
------------------------------------------------------------------------------*/

#header {
	position: relative;
	margin: 0 0 25px 28px;
}

#header .site-name,
#header .site-name span {
	display: block;
	overflow: hidden;
	width: 220px;
	height: 63px;
}

#header .site-name {
	position: relative;
	text-indent: -9999em;
	margin: 23px 0 0 0;
}

#header .site-name span {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: url(../images/common/logo.png) no-repeat;
}

#header a.site-name span {
	cursor: pointer;
}


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

#navigation {
	position: absolute;
	top: 48px;
	right: 23px;
}

#navigation li {
	float: left;
	padding-left: 25px;
}

#navigation a {
	display: block;
	cursor: pointer;
	color: #fff;
	font: 14px futura-pt, 'century gothic', sans-serif;
	letter-spacing: 4px;
	text-transform: uppercase;
}

#navigation a.active, 
#navigation a:hover {
	text-decoration: none;
	color: #8ba827;
}


/* 2.4 Content
------------------------------------------------------------------------------*/

#content-outer {
	margin: 0 auto;
	width: 962px;
	height: 580px;
	background: #fff;
	-moz-box-shadow:0px 0px 15px #35363d;
	-webkit-box-shadow:0px 0px 15px #35363d;
	box-shadow:0px 0px 15px #35363d;
	behavior: url(_ui/js/PIE.htc);
}

#content {
	float: right;
	width: 559px;
	height: 100%;
	overflow: auto;
}

#content-inner {
	padding: 35px 76px 44px 33px;
}

/* 2.5 Sidebar
------------------------------------------------------------------------------*/

#sidebar {
	float: left;
	width: 388px;
}

/* 2.6 Footer
------------------------------------------------------------------------------*/

#footer {
	clear: both;
	padding: 15px 0 0 0;
	font-size: 13px;
	color: #afafb2;
}

#footer .vcard {
	border-bottom: 1px solid #949496;
}

#footer .vcard p {
	float: right; 
	padding: 2px 10px 18px 30px;
	letter-spacing: 2px;
	color: #fff;
	font: 14px futura-pt, 'century gothic', sans-serif;
	text-transform: uppercase;
	background: url(../images/common/ico_phone.png) left top no-repeat;
}

#footer .copyright {
	padding: 13px 15px 13px 15px;
}

#footer .copyright li {
	float: left; 
	padding: 0 12px;
	border-left: 1px solid #949496;
}

#footer .copyright li:first-child {
	border: none;
}

/* 2.7 jScrollPane
------------------------------------------------------------------------------*/

.jspContainer {
	overflow: hidden;
	position: relative;
}

.jspPane {
	position: absolute;
}

.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
	background: red;
}

.jspHorizontalBar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar * {
	margin: 0;
	padding: 0;
}

.jspCap {
	display: none;
}

.jspHorizontalBar .jspCap {
	float: left;
}

.jspTrack {
	background: #e9eae0;
	position: relative;
}

.jspDrag {
	background: #000 url(../images/common/ico_arrow.png) center center no-repeat ;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
	float: left;
	height: 100%;
}

.jspArrow {
	background: #000;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled {
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow {
	height: 16px;
}

.jspHorizontalBar .jspArrow {
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus {
	outline: none;
}

.jspCorner {
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
	margin: 0 -3px 0 0;
}


/* 3. PAGES STYLES
--------------------------------------------------------------------------------*/


/* 3.1 Home
------------------------------------------------------------------------------*/

.home #content p {
	line-height: 24px;
}

.home h2.high-standard {
	width: 346px;
	height: 67px;
	text-indent: -9999em;
	background: url(../images/home/bg_high.jpg) no-repeat;
}

.home h3 {
	margin: -7px 0 0 0;
	padding: 0 0 0 90px;
}

.home h4 {
	margin: -5px 0 0 0;
	padding: 0 0 0 120px;
	word-spacing: 7px;
}

.home #content img {
	float: right;
	padding: 16px 10px 16px 30px;
}

.divider {
	display: block;
	height: 1px;
	width: 66px;
	background: #c9c9ca;
}

.home .divider {
	margin: 15px auto 20px;
}


/* 3.2 Certificates
------------------------------------------------------------------------------*/

.certificates h3 {
	margin: 18px 0 0 130px;
}

.certificates h4 {
	font-size: 31px;
	letter-spacing: 1px;
	margin: 0 0 0 170px;
}

.certificates h2.ampersand {
	margin: -5px 0 0 110px;
	float: left;
	height: 44px;
	width: 40px;
	background: url(../images/certificates/bg_ampersand.jpg) no-repeat;
}

.certificates .divider {
	margin: 17px auto 25px;
}

.certificates #content-inner {
	padding-left: 28px;
}

.certificates #content ul {
	margin: 33px 0 0 0;
}

.certificates #content ul li a {
	display: block;
	padding: 0 0 0 40px;
	font-size: 16px;
	line-height: 47px;
	color: #090909;
	background: url(../images/certificates/ico_pdf.jpg) no-repeat left top;
}

.certificates #content ul li a:hover {
	color: #788d2e;
}


/* 3.3 Photos
------------------------------------------------------------------------------*/

.photos #content {
	float: none;
	width: 962px;
	padding: 0;
	overflow: hidden;
}

.photos #image-wrap {
	padding: 56px 30px 56px 56px;
	float: left;
}

.photos .thumbs-container {
	position: relative;
	width: 155px;
	float: right;
}

.photos .scroll-container img {
	margin: -4px 0 0 0;
}

.photos .scroll-container img.active {
	border: 3px solid #89a42c;
	width: 149px;
}

.photos .vertical {
	overflow:hidden;	
	position: relative;
	height: 580px;
	width: 155px;
}

.photos .items {
	position: absolute;
	height:20000em;	
	margin: 20px 0;
}

.photos .items .big {
	display: none;
}

.item img {
	height:113px;
	width:153px;
}


.photos .prev,
.photos .next {
	display: block;
	position: absolute;
	left: 0;
	width: 155px;
	height: 18px;
	background: #000 url(../images/photos/ico_arrows.jpg) no-repeat 0 0;
}

.photos .prev {
	top: 0;
	z-index: 10;
	background-position: 71px 5px;
}

.photos .next {
	bottom: 0;
	background-position: 71px -46px;
}

.photos .scroll-container {
	width: 155px;
	float: right;
	position: relative;
}


/* 3.4 Contact
------------------------------------------------------------------------------*/

.contact #content-inner {
	padding-right: 20px;
	padding-left: 15px;
}

.contact .form-container {
	width: 343px;
	float: right;
}

.contact form#contact {
	padding: 20px 30px 25px 25px;
	background: #e9eae0;
}

.contact form#contact legend {
	margin: 0 0 17px 0;
	font: 24px futura-pt, 'century gothic', sans-serif;
	color: #89a42c;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.contact form#contact label {
	display: block;
	margin: 0 0 5px 0;
	font-size: 13px;
}

.contact form#contact div {
	margin: 0 0 18px 0;
}

.contact form#contact input[type=text],
.contact form#contact textarea {
	width: 173px;
	font: 13px Georgia, serif;
}

.contact form#contact input[type=text] {
	height: 22px;
	line-height: 22px;
	padding: 0 5px;
}

.contact form#contact textarea {
	resize: none;
	width: 272px;
	padding: 5px;
}

.contact form#contact button {
	display: block;
	float: right;
	margin: 20px 3px 0 0;
	border: none;
	width: 139px;
	color: #fff;
	font: 14px/33px futura-pt, 'century gothic', sans-serif;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	background: #89a42c;
}

.contact #content .vcard {
	float: left;
	width: 150px;
	margin: 20px 0 0 0;
	line-height: 24px;
}

.contact #content .vcard .address {
	margin: 25px 0 0 0;
}

.contact h2.now {
	height: 24px;
	width: 84px;
	margin: 5px 0 10px 200px;
	background: url(../images/contact/bg_now.jpg) no-repeat;
}

.contact h4 {
	margin: 10px 0 0 155px;
	letter-spacing: 2px;
}

.contact .divider {
	margin: 17px 0 25px 205px;
}

#contact .required {
	font-weight:bold;
}

#contact #loading {
	width:32px;
	height:32px;
	background: url(../images/common/loading.gif);
	display:block;
	display:none;
}

#errors {
	background: #f4a8a8;
	font: 14px futura-pt, 'century gothic', sans-serif;
	padding:10px;
	margin:25px 0px;
	display:block;
	display:none;
}

#errors li {
	padding:2px;
	list-style:none;	
}

#errors li:before {
	content: ' - ';	
}

#errors #info {
	font-weight:bold;
}

#errors #info:before {
	content: '';	
}

#success {
	padding:25px 10px;
	margin:25px 0px;
	background: #89A42C;
	font: 14px futura-pt, 'century gothic', sans-serif;
	color: #fff;
	text-align: center;
	display:block;
	display:none;
}

#errors.visible, #success.visible {
	display:block;	
}

#req-field-desc {
	font-style:italic;
}

/* 3.5 Services
------------------------------------------------------------------------------*/

.services #content-inner {
	padding-right: 50px;
}

.services h2.our {
	margin: 30px 0 0 190px;
	height: 19px;
	width: 56px;
	background: url(../images/services/bg_our.jpg) no-repeat;
}

.services h4 {
	margin: -5px 0 0 150px;
	font-size: 37px;
}

.services .divider {
	margin: 5px 0 30px 180px;
}

.services #content strong {
	font: 20px futura-pt, 'century gothic', sans-serif;
}

.services #content ul {
	width: 250px;
	margin: 27px 0 0 5px;
}

.services #content ul li {
	padding: 0 0 3px 15px;
	line-height: 22px;
	background: url(../images/services/ico_square.jpg) left 8px no-repeat;
}

.services #content img {
	float: right;
	margin: 55px 0 0 10px;
}

.services p.features {
/*	margin: 45px 0 0 0;*/
	line-height: 24px;
	font-style: italic;
	text-align: center;
}


/* 4. PRINT
--------------------------------------------------------------------------------*/


@media print {

	body { 
		font: normal normal 12pt/1.5em "Times New Roman", Times, serif; 
	}

	a[href]:after { 
		content: " (" attr(href) ") "; 
		font-size: 90%; 
	}

	a[href^="/"]:after { 
		content: " (http://domain.com" attr(href) ") "; 
	}

	ol#accessibility-nav, 
	.hide { 
		display: none !important; 
	}
}