@charset "utf-8";
/* CSS Document for Stanleys Discount Lawnmower Warehouse */
/* This document is under copyright of Stanleys Group 2010 - 8 */

/* mainStyle.css - This document is used for site-wide styling 
including headers, footers and content layout boxes */

/*---------- This area designates storage, layout and content div's -----------*/

*
{
/*outline: 1px solid red;*/
}

body {
background-image:url(../styleImages/Bg.jpg);
background-repeat:repeat-x;
font-family:Verdana, Geneva, sans-serif;	
font-size:14px;
}

p.cat {
color:#999;
font-size:10px;	
}

a {
color:#00f;	
}

.familyBar {
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
background-image:url(../styleImages/familyBarLinkR.jpg);	
z-index:2;
margin:0px auto;
}

.familyBarContent {
margin:0px auto;
width:auto;
height:24px;
background-image:url(../styleImages/familyBarLinkR.jpg);
background-repeat:repeat-x;
	
}

.familyBarTitle
{
	float:left;
background-image:url(../styleImages/familyBarTitle.jpg);
background-repeat:no-repeat;	
margin-top: 1px;
margin-left: 2px;
width:122px;
}
.familyBarSpacer {
width:1px;
float:left;	
}

.familyBarLinkE {
background-image:url(../styleImages/familyBarLinkE.jpg);
background-repeat:none;
width:1px;	
float:left;
height:24px;
}

.familyBarLink {
	float:left;
	padding-top: 5px;
	font-size:10px;
	padding-left:15px;
	padding-right:15px;
	width:auto;
	height:19px;
	background-image:url(../styleImages/familyBarLinkOff.jpg);
	background-repeat:repeat-x;	
	color: rgb(63,76,107);
}

.familyBarLink  a{
	color: rgb(63,76,107);
}

.familyBarLink:hover {
	padding-top: 5px;
	font-size:10px;
	padding-left:15px;
	padding-right:15px;
	width:auto;
	height:19px;
	background-image:url(../styleImages/familyBarLinkOn.jpg);
	background-repeat:repeat-x;	
	float:left;
}


.pageContainer {
position:absolute;
top:24px;
left:0px;
height:100%;
width:100%;
}

.headerContainer {
top:0px;	
left:0px;
background: rgb(63,76,107); /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNmNGM2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjRjNmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-8 */
width:100%;
height:auto;
}



.floatImg {
	
	font-size:12px;
	width:50%;
padding-left: 0px;
float:left;
height:155px;
background-image:url("../styleImages/mowerLogo.png");
background-position:10px 0px;
background-repeat:no-repeat;
}

.floatImg a {
	color:#eee;
	text-decoration:none;
	font-size:26px;
	font-family:"Arial Black", "Arial", "Verdana", Sans-Serif, Sans serif;
	text-shadow: 0px 5px 10px #333;
	width:50%;
	padding-top:5px;
	float:left;
	font-weight:bold;
}

.footerLeft {
	font-size:10px;
	width:50%;
padding-top: 10px;
float:left;
}

.footerLeft a {
color:#000;	
text-decoration:none;
}

.footerLeft a:hover {
text-decoration:underline;	
}

.footerRight {
	text-align:right;
	font-size:10px;
	width:50%;
padding-top: 10px;
float:left;	
}

.footerRight a {
color:#000;	
text-decoration:none;
}

.footerRight a:hover {
text-decoration:underline;	
}

#fontSmall {
	font-size:10px;	
}

.floatText {
	text-align:right;
float:left;
width:50%;	
padding-left: 0px;
padding-top: 10px;
}

.titleGreenFade {
height:auto;
width:auto;
background-image:url(../styleImages/thinBlueLine.jpg);	
background-repeat:repeat-x;
}

.mainHolderLeft {
margin: 0px auto;
width:900px;
height:auto;
background-color:#FFF;
}

.mainHolderRight {
padding:10px;
text-align:right;
float:right;
width:200px;
height:100%;
background-color:#FFF;
}


.rightText {
text-align:right;
width:31.11111111111111%;
float:right;
height:auto;	
}

.mainContent{
	top:0px;
	left:0px;
background-color:#FFF;
width:auto;
}


.rightContent {
height:100%;
background-color:#FFF;
float:left;
text-align:right;
width:300px;	
}



  #headerRightLink{
	color:#CCC;
	text-decoration:underline  
  }
  
    #headerRightLink:hover{
	color:#FFF;
	text-decoration:none;  
  }



/*----- Start of nav section -----*/
#nav {
height:100%;
overflow:none;
width:100%;
float:left;
}

#nav ul ul ul li {
height:80%;
}

#nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgb(63,76,107);
}

#nav ul li {
  display: block;
  position: relative;
  float: left;
  background: rgb(63,76,107);
  border: 1px solid black;
  box-sizing:border-box;
}

#nav li ul { display: none; }

#nav ul li a {
  display: block;
  padding: 0.6em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

#nav ul li a:hover { background: #883333; }

#nav li:hover > ul {
  display: table;
  position: absolute;
  z-index:9999999;
}


#nav li:hover li { float: left;
width:100%;
}

#nav li:hover a { background: rgb(63,76,107); }

#nav li:hover li a:hover { background: #883333; }

#nav li ul li { border-top: 0; }

#nav ul ul ul {
  left: 100%;
  top: 0;
}

#nav ul:before,
#nav ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#nav ul:after { clear: both; }

.titleLink {
	height:16px;
	width:250px;
	background-repeat:repeat-x;
	cursor:pointer;
	padding-top:5px;
	padding-bottom:5px;
	
}

.titleLink:hover {
text-wrap:none;
resize:none;
word-wrap:break-word;
height:16px;
width:250px;
cursor:pointer;
color:#990000;
}

#heightFixShop {
height:420px;	
width: 230px;
}

.titleLink:hover .subPopUp
{
position:relative;
border: #000 thin solid;	
float:right;
width:106px;
height:auto;
display:block;	
left:90px;
top:0px;
-moz-box-shadow: 0px 2px 5px #CCC;
-webkit-box-shadow: 0px 2px 5px #CCC;
box-shadow: 0px 2px 5px #CCC;
text-wrap:none;
resize:none;
padding: 3px 3px 3px 3px;
background-color:#FFC;
}

.lawnPopUp {
display:none;	
}

.lawnmowerTitle:hover .lawnPopUp {
	position:inherit;
	display:block;
	float:right;
	left:95px;
	height:auto;
	padding: 3px 3px 3px 3px;
	width:140px;
	top:-20px;
-moz-box-shadow: 0px 2px 5px #CCC;
-webkit-box-shadow: 0px 2px 5px #CCC;
box-shadow: 0px 2px 5px #CCC;
text-wrap:none;
resize:none;
background-color:#FFC;
border:#000000 thin solid;
}

.lawnmowerTitle {
	position:relative;
	float:left;
	width:auto;
	padding-right:15px;
	height:18px;
}

.menuLeft { 
color:#000;
vertical-align:middle;
height:100%;
width:50%;
background-image:url(../styleImages/menuBg.jpg);
background-repeat:repeat-x;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
text-decoration:none;
text-align:left;	
}

.menuLeft a
{
text-decoration:none;
color:#000;	
}
.menuRight a
{
text-decoration:none;
color:#000;		
}

.menuLeft p{ 
color:#000;
	
text-decoration:none;
}
.menuRight {
	color:#000;
vertical-align:middle;
width:50%;
height:100%;
background-image:url(../styleImages/menuBg.jpg);
background-repeat:repeat-x;
float:left;
font-size:10px;
text-align:right;	
text-decoration:none;
}

.menuRight p { 
color:#000;
text-decoration:none;

}


/* Start of the general div declartion for index and other pages such as main page content holders that will be called on each page */

.filler {
width:100px;
float:left;
height:360px;	
	
}


.bodyText {
	text-align:justify;
width:100% -20px;
height:auto;
background-color:#FFF;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
}

.shopHolder {
	float:left;
	text-align:justify;
width:100%;
height:100%;
background-color:#FFF;
}

.bodyTextShop {
text-align:justify;
width:100%;
height:auto;
background-color:#FFF;

}

/* Start of Pod area, for right hand area promoting offers or most viewed items. */

.pod {
padding-top:15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 0px;
width:250px;
height:auto;

}

.podTitle {
z-index:2;
color:#fff;	
padding-top:2px;
text-align:right;
float:left;
background-color: #3f4c6b;
background-image: linear-gradient(transparent 50%, rgba(0,0,255,.5) 50%);
background-size: 3px 2px;
width:186px;
height:30px;
font-size:13px;	
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
padding-left:32px;
padding-right:32px;
z-index:1;
position:relative;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 0px none #000000;
}

.podTitleMiddle a:link, .podTitleMiddle a:visited{
color:#FFF;
text-decoration:none
}

.podTitleMiddle a:hover, .podTitleMiddle a:active {
color:#FFF;
text-decoration:underline;	
}

.manufacturers {
float:left;
background-color:#fff;
}


.podMain {
	margin:0px auto;
	padding-left:8px;
	padding-top:5px;
	margin-top:32px;
	padding-right:8px;
	padding-bottom:20px;
	text-align:center;
	color:#000;
	background: rgba(212,228,239,1);
	background: -moz-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));
	background: -webkit-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: -o-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: -ms-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	background: linear-gradient(to bottom, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=0 );background-repeat:repeat-y;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
	width:234px;	
	z-index:2;
	position:relative;
}



.title {
padding-top:10px;
padding-left:5px;
width:auto;
font-weight:bold;
color:#3f4c6b;
font-size:16px;
padding-bottom:6px;	
}

.title a:link, .title a:visited {
	text-decoration:none;
	color:#3f4c6b;
}
.title a:hover, .title a:visited {
	text-decoration:none;
		color:#3f4c6b;
}

.pad {
height:100%;
font-size:12px;
padding-left:15px;	
padding-right:25px;
padding-bottom:63px;
}

.padRight {
	font-size:12px;
padding-right:25px;	
}


.bg {
float:left;
width:100%;
height:100%;
background-color:#FFF;	
}

/* Obselete code area. Kept for future enhancement. Did control a lightbox, but may soon take AJAX commands */

.searchHolder
{
height:auto;
width:75%;	
display:block;
z-index:999999;	
margin:0px auto;
padding-bottom: 10px;
border:thin #FFC;
-moz-border-radius: 15px;
border-radius: 15px;
}
.searchInfo {
margin:0px auto;
position:absolute;
height:60%;
left:35%;
top:160px;
bottom:15%;
right:35%;
width:30%;	
display:none;
background:#FFF;
z-index:9999999;
padding:15px 15px 15px 15px;
border-style:solid;
border-color:#060;
border: 1px 1px 1px 1px;
overflow:auto;
text-align:center;
}

.searchTitle {
font-size:16px;
color:#009;
padding-bottom:10px;
padding-top:10px;
width:100%;
}



.searchClose {
height:18px;
width:18px;
float:right;
background-image:url(../styleImages/searchCloseOff.gif);
background-repeat:no-repeat;
}

.searchClose:hover {
height:18px;
width:18px;
float:right;
background-image:url(../styleImages/searchCloseOn.gif);
background-repeat:no-repeat;
}

.searchCount {
width:5%;
height:auto;
}
.searchSubTitle {
float:left;
width:100%;
height:auto;
padding-bottom:10px;
}

.searchImageHolder {
width:25%;
float:left;	
padding-bottom: 10px;
}

.searchKeyWords {
float:right;
width:50%;	
color:#AAA;
text-align:right;
}

.searchString {
float:right;
width:100%;	
padding-bottom:10px;
}

.searchNav {
float:left;
width:75%;	
padding-top:15px;
}

.searchRight {
float:right;
width:49%;
text-align:right;
}
.searchLeft {
float:left;
width:49%;
text-align:left;
}
/* For descriptions and keywords in local search engine only  */

#key {
display:none;	
}

/* Final div declartions for some final additions for input form from user. */
/* Most self explanitory including Google Checkout styling. */

.tag {
float:left;
padding-top:5px;
padding-bottom:5px;
color:#fff;
width:100%;
font-size:8px;
text-align:center;
background-color: #3f4c6b;
background-image: linear-gradient(transparent 50%, rgba(0,0,255,.5) 50%);
background-size: 3px 2px;
}

.tblInputRow
{
width:100%;
float:left;
height:auto;
background-color:#FFF;
}

.tblInputItem
{
	float:left;
width:50%;
height:auto;	
}

#personalInfo {
display:block;	
}

#machineInfo {
display:none;	
}

#otherInfo {
display:none;	
}

  
.trial {
width:50px; 
height:50px;
background-color:#060;  
  }
  
  #menu1 {
	display:none;  
  }
  
  #pressureWasher {
	top:-16px;  
  }
  
  
/* Responsive Declaration */

@media all and (min-width: 1024px)
{
	.headerContent {
	top:0px;
	margin: 0px auto;
	width: 80%;
	height: 160px; 
}


.mainHolderLeft {
}


}

@media all and (min-width: 900px)
{
	.headerContent {
	top:0px;
	margin: 0px auto;
	width: 900px;
	height: 160px; 
}

.mainHolderLeft{
	width:900px;
}

.footer {
margin:0px auto;
width:900px;
height:150px;
background-image:url(../styleImages/footerImage.jpg);
background-repeat:repeat-x;
font-size:10px;
}

.footerShop {
	font-size:10px;
	float:left;
margin:0px auto;
width:900px;
height:150px;
background-image:url(../styleImages/footerImage.jpg);
background-repeat:repeat-x;	
}	

.mainMenu {
height:27px;
margin:0px auto;
width:78.22222222222223%;
text-decoration:none;
border:none;
color:#FFF;
}


}

@media all and (max-width: 899px)
{
	
.familyBar {
display:none;
}	

.pageContainer {
top:0px;
left:0px;
}

.headerContent {
top:0px;
margin: 0px auto;
width: 100%;
height: auto; 
background-color: black;
}

.mainMenu {
height:27px;
margin:0px auto;
width:100%;
text-decoration:none;
border:none;
color:#FFF;
}

.mainHolderLeft{
width:100%;
}

.footer {
margin:0px auto;
width:100%;
height:150px;
background-image:url(../styleImages/footerImage.jpg);
background-repeat:repeat-x;
font-size:10px;
}

.footerShop {
font-size:10px;
float:left;
margin:0px auto;
width:100%;
height:150px;
background-image:url(../styleImages/footerImage.jpg);
background-repeat:repeat-x;	
}	

}