//	Primary Styles
//	Author: ImageWorks, LLC
//	Questions: Please visit http://www.imageworksllc.com or call 860-647-7725 
//-----------------------------------------------------------------------------*/

//	Variables Mixins (can be called in other items without being duplicated)
//-----------------------------------------------------------------------------*/	
	// define the primary font family stack
	@stack: Tahoma, Arial, Helvetica, sans-serif;
	@styledStack: 'Arapey', serif;
	.absolute-l(@top, @left){
		top:@top;
		left:@left;
		//position items within a container
		position:absolute;
	}
	.absolute-r(@top, @right){
		top:@top;
		right:@right;
		//position items within a container
		position:absolute;
	}
	.float(@direction, @width, @margin){
		float:@direction;
		width:@width;
		margin:@margin;
	}
	.piped-nav { 
		//inserts vertical pipes between nav items
		li:after {content:" | ";}
		li.last:after {content:"";}
	}
	.img-right {
		float:right; 
		margin:0 0 1em 1em;
	}
	.img-left {
		float:left; 
		margin:0 1em 1em 0;
	}
//	Typography
//-----------------------------------------------------------------------------*/	
	a {
		&:link, &:visited{color: #ba9b5c;}
		&:hover, &:active{color: #fff;}
		&:active {text-decoration: none;}
		&:hover, &:active, &:focus {outline: none;}
	}
	h1, h2, h3, h4, h5, h6, th { 
		margin:0;
		padding:0; 
		line-height:1em;
		font-family: @styledStack;
		color:#fff;
		font-weight: normal;
		span {color:#ba9b5c;}
	}
	h1 {font-size:36px; span{font-size:48px;}}
	h2 {font-size:36px;}
	h3 {font-size:30px;}
	h4 {font-size:24px;}
	.normal-font {
		margin:0 0 1em 0; 
		padding-top:0; 
		color:#ba9b5c;
		font-size:14px; 
		line-height:21px;
		strong{color:#fff; font-style: 16px; line-height: 24px;}
	}
	.quotes p {
		text-indent: -0.5em;
		padding-bottom:30px;
		} /*usually used for testimonials, and such */
	.quotes q:before {
		content: "\"";
	}
	.quotes q:after {
		content: "\"";
	}
	.quotes cite {
		display: block;
		text-align: right;
		font-weight: bold;
		font-style: normal;
	}
	.small, small {font-size:10px;}
//	Containers
//-----------------------------------------------------------------------------*/	
	html {
		margin:0;
		padding:0; 
		font-family:@stack;
		background: #fff url(../img/template/html-back.jpg);
		body {
			background: url(../img/template/top-texture.jpg) top left repeat-x;
			background-color: transparent;
			#document { 
				position:relative;
				//for layout testing - remove prior to launch
				// background:url(../img/template/grid.png) top center repeat-y;
				}
			header {
				z-index:2;
				height:196px; 
				background-color: #242121;
				border-bottom: #41382b 1px solid;
				font-family:@styledStack;
				//gives the ability to position child items within *this* container and is used for CSS3 PIE
				position:relative;
					#logo {.absolute-l(0px,0px);}
					#phone {
						.absolute-r(40px,40px);
						color:#b49655;
						font-size:18px;
					}
					#email {
						.absolute-r(70px,40px);
						color:#b49655;
						font-size:18px;
					}	
					#contact-link {
						.absolute-r(115px,40px);
						text-align: right;
						a {
							color:#fff;
							font-size:18px;
							background: url(../img/template/r-arrow.png) 0 50% no-repeat;
							padding-left: 15px;
						}
						
					}	
				}
			#main-nav {
				.absolute-r(135px,30px);
				ul{
					padding:0;
					margin:0;
					float:right;
					li {
						float: left;
						line-height: 62px;
						list-style: none;
						background: url(../img/template/nav-border.png) top right no-repeat;
						font-size: 18px;
						a {
							line-height:62px;
							float:left;
							display: block;
							padding:0 10px;
							color:#fff;
							&:hover, &:focus, &.active {color:#fff; background:url(../img/template/nav-arrow.png) bottom center no-repeat; text-decoration: none;}
							&.active:hover {cursor: default;}
							}
						&.last {background-image:none;}
						ul{
							background:url(../img/template/sub-nav.png);
							padding:10px;
							li{
								background-image:none;
								background: url(../img/template/sub-nav-border.png) bottom left repeat-x;
								line-height: 2em;

								a{
									line-height: 2em;
									&:hover {
										background-image:none;
										color:#ba9b5c;
									}
								}
							}
							}
						}
					}
					.sf-menu ul {position:absolute;	top:-999em;	width:15em !important; /* left offset of submenus need to match (see below) */}
					.sf-menu ul li {width:15em !important;}
					.sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
					.sf-menu li { position:relative;float:left;}
					.sf-menu li:hover ul,
					.sf-menu li.sfHover ul {
						top:62px; 
						left:0;
						z-index:99;}
					ul.sf-menu li:hover li ul,
					ul.sf-menu li.sfHover li ul {
						top:-999em;
					}
					ul.sf-menu li li:hover ul,
					ul.sf-menu li li.sfHover ul {
						top:0;
						left:15em !important;
					}
					ul.sf-menu li li:hover li ul,
					ul.sf-menu li li.sfHover li ul {
						top:-999em;
					}
					ul.sf-menu li li li:hover ul,
					ul.sf-menu li li li.sfHover ul {
						top:0;
						left:15em;}
					.sf-menu {
						float:left;
					}
				}
			#content { 
				z-index:1;
				float:left; 
				text-align:left;
				padding-bottom:60px;
				p, ul, ol, td {.normal-font;}
				.row {margin-bottom: 30px;}
				#wide-content, #primary-content, #secondary-content {position:relative;}
				#secondary-content {
					
					p,li {line-height: 18px;}
					p,ul{margin-bottom: 0; padding-bottom: 0;}
				}
				}
			footer {
				position:relative;
				padding:20px 0 40px 0;
				text-align:center;
				clear:both;
				background: url(../img/template/footer-back.png) top left repeat-x;
				ul, ol, p, h5, td, a {
					margin:0 !important; 
					color:#846548 !important; 
					font-weight:normal; 
					font-size:11px !important;}
				}
			}
		}