/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: 1. Font Imports
:: 2. Shared Styles
:: 3. Header
:: 4. Navigation
:: 5. Content
:: 6. Project Details
:: 7. Footer
*/

/* -----------------------------------------
   1. Font Imports
----------------------------------------- */
@font-face {
    font-family: 'karlaregular';
    src: url('fonts/karla-regular-webfont.eot');
    src: url('fonts/karla-regular-webfont-.eot#iefix') format('embedded-opentype'),
         url('fonts/karla-regular-webfont.woff') format('woff'),
         url('http://landscapegroupla.com/stylesheets/fonts/karla-regular-webfont.ttf') format('truetype'),
         url('fonts/karla-regular-webfont.svg.txt#karlaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* -----------------------------------------
   2. Shared Styles
----------------------------------------- */
a, a:hover { color: #019875; }

body, p, h1, h2, h3, h4, h5, h6 {
	font-family: 'karlaregular', sans-serif;
}

body {
	background: url("../images/background.png");
	color: #333;
}

body, p, li {
	font-size: 18px;
}

.container {
	background: #FFF;
	margin: 0px;
	border-right: 1px solid #333;
}

.separator {
	height: 4px;
	background: url("../images/separator.png") repeat-x;
}

.with-space {
	margin-top: 15px;
	margin-bottom: 15px;
}

span.hide-for-small {
	display: inline !important;
}

.black {
	color: #222;
}

/* -----------------------------------------
   3. Header
----------------------------------------- */
.address {
	font-size: 18px;
	color: #666;
	margin-left: 10px;
	padding-bottom: 30px;
}

.description {
	font-weight: normal;
	color: #666;
	margin: 0px;
	padding: 0px 0px 10px 0px;
	margin-left: 10px;
}

.logo {
	padding: 20px 0px 0px 0px;
	margin: 0px;
	color: #333;
	font-size: 48px;
	margin-left: 10px;
	letter-spacing: -2px;
}

.top {
	margin-top: 30px;
}

.phones {
	white-space: nowrap;
}

/* -----------------------------------------
   4. Navigation
----------------------------------------- */
.facebook, .facebook:hover {
	color: #0071bc;
	font-size: 20px;
}

.nav {
	list-style: none;
	padding: 0px;
	margin-left: 10px;
}

.nav h3 {
	margin: 0px;
	padding: 5px 0px 5px 0px;
	letter-spacing: 3px;
}

.social {
	margin-top: 30px;
	margin-left: 10px;
}

.subnav {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.subnav li {
	display: inline;
	font-size: 24px;
	padding: 0px 5px 0px 5px;
	margin: 0px;
}

.subnav li:first-child {
	padding-left: 0px;
}

.subnav a { color: #000; }
.subnav a:hover { color: #019875; }
.subnav a.current { color: #019875; font-weight: bold; }


.yelp, .yelp:hover {
	color: #ff0000;
	font-size: 20px;
}

/* -----------------------------------------
   5. Content
----------------------------------------- */
.content {
	padding-top: 30px;
}

.content-text, .content-text-projects {
	margin-top: 26px;
	min-height: 560px;
}

.content-text-projects {
	margin: 0px;
	min-height: 50px;
}

.content-text ul, .content-text ol {
	margin-left: 45px;
}

.subtitle {
	color: #666;
	text-transform: uppercase;
	margin: 0px;
	padding: 0px;
	margin-top: 15px;
	letter-spacing: 3px;
}

.title {
	color: #019875;
	padding: 2px 0px 0px 0px;
	margin: 0px;
}

.home-fix {
	margin-left: -3px;
}

.contact-fix {
	margin-left: -2px;
}

/* -----------------------------------------
   6. Project Details
----------------------------------------- */
.project-description {
	padding: 15px 0px 30px 0px;
}

.project-description .enlarge {
	text-align: right;
}

.project-description .enlarge span {
	background: url("../images/enlarge.png") right no-repeat;
	padding-right: 21px;
	color: #333;
	text-transform: uppercase;
	font-weight: bold;
}

.project-description span {
	text-transform: uppercase;
	font-weight: bold;
}

.project-image {
	margin-left: 1px;
	margin-top: 30px;
	padding: 10px;
	border: 1px solid #333;
}

.projects-space {
	margin-top: 30px;
}

.loading {
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

/* -----------------------------------------
   7. Footer
----------------------------------------- */
.footer {
	height: 30px;
	border-bottom: 1px solid #333;
}

@media only screen and (max-width: 480px) {
	.logo {
		font-size: 40px;
	}

	.nav h3 {
		margin: 0px;
		padding: 5px 0px 5px 0px;
		letter-spacing: -2px;
	}

}

@media only screen and (max-width: 320px) {
	.logo {
		font-size: 30px;
	}
}

@media only screen and (max-width: 767px) {
	.facebook, .facebook:hover {
		font-size: 30px;
	}

	.yelp, .yelp:hover {
		font-size: 30px;
	}

	.logo, .description, .address, .social, .nav {
		margin-left: 0px;
	}

	.social {
		margin-bottom: 20px;
	}

	.title {
		margin-top: 28px;
	}

	span.hide-for-small {
		display: none !important;
	}

	span.show-for-small {
		display: inline !important;
	}

}