/* Design by Chromatic Media */

@import "skeleton.css";
@import "base.css";
@import "fonts.css";
@import "elastic.css";
@import "circlehover.css";

/* Page Styles
===================================================*/

/*Header Section*/

	#header-section {
		padding-top:30px;
	}
	
/* Logo */	
	
	.logo-div {
		height:89px;
		padding-top:20px;
	}
	a.logolink{
		display: block;
		width: 360px;
		height: 89px;
		background: url("../images/steve-watts-gardens-logo.png");
	}

	a.logolink:hover {
		background-position: -360px 0;
		cursor:pointer;
	}
	
/* Mobile Portrait Logo */	
	
@media only screen and (max-width: 479px) 
{
	.logo-div {
		height:150px;
		margin-bottom:20px;
	}
	a.logolink{
		width: 320px;
		height: 150px;
		background: url("../images/steve-watts-gardens-logo-mobile.png");
	}
	a.logolink:hover {
		background-position: 0 0;
	}	
}

/* Mobile Landscape Logo */	
	
    @media only screen and (min-width: 480px) and (max-width: 767px)
{
	.logo-div {
		height:90px;
		margin-bottom:20px;
	}
	a.logolink{
		width: 480px;
		height: 90px;
		background: url("../images/steve-watts-gardens-logo-mobile-lans.png");
	}
	a.logolink:hover {
		background-position: 0 0;
	}	
}

/*Menu*/

	.menu-div{
		margin-top: 80px;
	}
	.menu-div ul{
		font-family:'LatinRomanItalic', serif;
		font-size:17px;	
		margin: 0;
		padding: 0;
		list-style: none;
		letter-spacing:4px;
	}
	.menu-div .sub-ul{
		font: 16px/24px "LatinRomanItalic", Helvetica, Arial, sans-serif;
		list-style: none;
		letter-spacing:0px;
	}
	.menu-div .sub-ul li a{
		padding:8px 24px 8px 8px;
		background-color:#222;
		color:#fff;
	}	
	.menu-div ul li{
		display: block;
		position: relative;
		float: left;
	}
	.menu-div li ul {
		display: none;
	}
	.menu-div ul li a {
		display:block;
		text-decoration:none;
		color:#222;
		margin-left:15px;
		margin-right:15px;
		white-space: nowrap;
		opacity:0.9;
	}	
	.menu-div .sub-ul li a:hover {
		background-color:#eee;
		color:#222;
		-webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 0.5s;	
	}
	.menu-div li:hover ul {
		display: block;
		position: absolute;
		z-index:2;
	}
	.menu-div li:hover li {
		float: none;
	}
	.menu {
		padding-bottom:15px;
	}	
	.menu-active {
		padding-bottom:15px;
		font-family:'LatinRomanBoldItalic', serif;
	}

/* Landscape Mobile Menu */	
	
@media only screen and (min-width: 480px) and (max-width: 767px)
{
	.menu-div{
		margin:0;
		padding:10px 0;
		border-bottom:1px dotted #ccc;
		border-top:1px dotted #ccc;
	}
	.menu-div li{
		width:110px;
		text-align:center;
	}	
	.menu, .menu-active {
		font-size:16px;
		line-height:30px;
		letter-spacing:2px;
		margin-right:0;
		padding:2px;
	}
	.menu-div li:hover ul{
		display:none;
	}	
}
	
/* Portrait Mobile Menu */
	
@media only screen and (max-width: 479px) 
{
	.menu-div {
		margin:0;
		padding:4px 0;
		border-bottom:1px dotted #ccc;
		border-top:1px dotted #ccc;
	}
	.menu-div li {
		width:160px;
		text-align:center;
	}	
	.menu, .menu-active {
		font-size:17px;
		line-height:40px;
		margin-right:0;
		padding:2px;
	}
	.menu-div li:hover ul{
		display:none;
	}		
}
	
/* Slider */

	#slider-section {
		margin: 0;
	}
	
/* Welcome Section */

	#welcome-section {
		margin:0;
	}
	.welcome {
	}	
	.services {
	}
	
/* Services Circles */

	#services-circles-section {
		margin: 40px 0 30px 0;
	}
	#services-circles-section h5, #services-circles-section h6{
		text-align:center;
	}
	
/* Services Page */

	#services-section {
		margin:0;
	}	

/* Gallery Circles */

	#gallery-circles-section {
		margin: 40px 0 30px 0;
	}
	#gallery-circles-section h5, #gallery-circles-section h6{
		text-align:center;
	}
	
/* Footer */

	#footer-section {
		padding:10px 0 0 0;
		color:#fff;
		background: #222 url('../images/steve-watts-gardens-footer-leaf.png') no-repeat;
		background-position:right;
		background-position: 82% 50%
	}
	@media only screen and (max-width: 767px) 
{	
	#footer-section {
	background: #222;
	}
}	
	#footer-section h3 {
		margin-bottom:0.5em;
	}	
	.footer1, .footer2 {
		padding-left:5px;
		margin: 10px 0;	
	}	
	.footer1 h5, .footer2 h5 {
		font-family:"Gentium Basic"
	}	
	.footer1 h5 span, .footer2 h5 span {
		color:#f68f26;
	}
	.footer-p {
		font: 10px/14px "SourceSansProLight", Helvetica, Arial, sans-serif;
		letter-spacing:2px;
		text-align:center;
	}	
	
/* Images */
	
	img.left {
		width:320px;
		height:320px;
		box-shadow:2px 2px 6px rgba(0, 0, 0, 1);
		float:left;
		margin:2em 4em 1em 0;
	}
	img.right {
		width:320px;
		height:320px;
		box-shadow:2px 2px 6px rgba(0, 0, 0, 1);
		float:right;
		margin:2em 0 1em 4em;
	}
	img.right-small {
		width:210px;
		height:210px;
		box-shadow:2px 2px 6px rgba(0, 0, 0, 1);
		float:right;
		margin:0 2em 1em 4em;
	}	

    @media only screen and (min-width: 480px) and (max-width: 767px)
{	
	img.left, img.right {
		margin:2em 140px 1em 0;
		float:left;
	}
	img.right-small {
		margin:1em 250px 1em 0;
		float:left;
	}
}
	@media only screen and (max-width: 479px) 
{
	img.right-small {
		margin:1em 110px 1em 0;
		float:left;
	}
}	
	
/* Links */

	a.whitelink, a.orangelink, a.greylink {
		text-decoration:none;
		color:#fff;
		padding: 0 2px;
	}
	a.whitelink {
		color:#fff;
	}
	a.orangelink {
		color:#f68f26;
	}
	a.greylink {
		color:#222;
	}	
	a.whitelink:hover {
		text-decoration:underline;
	}
	a.orangelink:hover {
		text-decoration:underline;
	}
	a.greylink:hover {
		text-decoration:underline;
	}
	
/* List */
	.list {
		list-style-type:circle;
	}
	.list li {
	}
	.list p {
		padding:0;
		margin:0;
		text-align:left;
	}