/*  ------------------------------------------------------------------------
                       		  A PLUS LOCKSMITHS
    ------------------------------------------------------------------------  */



/*  ----------------------------|  KEY TAGS  |----------------------------  */

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: tahoma, arial, sans;
	color: #333;
	font-size: 12px;
/*	background: #ccc; */
}
h1 {
	letter-spacing: -1px;
	color: #f30;
	text-transform: uppercase;
	font-size: 22px;
	line-height: normal;
}
h2 {
	font-size: 10px;
	text-transform: lowercase;
	margin-bottom: 5px;
}
p {
	margin: 12px 0;
	padding: 4px 0;
}
a {
	color: #f30;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
a img {
	border: none;
}
/*  ----------------------------|  WEBSITE WRAP'S  |----------------------------  */
#wrap {
	text-align: center;
}
#container {
	width: 100%;
	background: url('../images/header-bg.gif') repeat-x #fff;
}
#websiteContainer {
	width: 960px;
	margin: 0 auto;
	text-align: left;
/*	border: 10px solid #fff; */
}
/*  ----------------------------|  HEADER ELEMENTS  |----------------------------  */
#keyHeader {
	width: 960px;
	height: 140px;
}
#headerLeft {
	margin: 20px 0 0 0;
	float: left;
	width: 680px;
}
#headerRight {
	font-size: 11px;
	line-height: 18px;
	margin: 75px 0 0 15px;
	float: left;
	width: 200px;
}
#headerRight h1 {
	letter-spacing: normal;
	font-size: 12px;
	text-transform: uppercase;
}
.companyLogo {
	display: none;
}
.logo {
	width: 360px;
	height: 140px;
	background: url('../images/a-plus-locksmiths-logo.gif') no-repeat;
	cursor: pointer;
}
.companyPhone {
	display: none;
}
.phone {
	width: 300px;
	height: 140px;
	background: url('../images/contact-info.gif') no-repeat;
	cursor: pointer;
}
/*  ----------------------------|  BANNER ELEMENTS  |----------------------------  */
#keyBanner {
	margin: 0 auto;
	clear: both;
	border: 1px solid #ccc;
	width: 950px;
	height: 224px;
	background: #fff;
}
#keyBannerPadding {
	padding: 7px;
	font-color: #000;
}
/*  ----------------------------|  MAIN MENU LINKS  |----------------------------  */


/*  ----------------------------|  KEY CONTENT  |----------------------------  */
#keyContent {
	clear: both;
	line-height: 22px;
	width: 960px;
}
#keyContentPadding {
	padding: 20px 0;
}
#keyLinks {
	margin: 30px 0 0 0;
	list-style: none;
}
#keyLinks li {
	line-height: 20px;
	float: left;
	width: 280px;
}
#keyLinks li h1, #keyLinks h1 a {
	margin: 0 0 7px 0;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #f00;
	text-decoration: none;
}
#keyLinks h1 a:hover {
	color: #000;
}
.homeIntro {
	float: left;
	margin: 50px 0 0 30px;
	width: 400px;
}
.aboutContent {
	float: left;
	margin-top: 30px;
	width: 500px;
}
.productsContent {
	float: left;
	margin-top: 30px;
	width: 600px;
}
.contactMap {
	float: left;
	margin-right: 70px;
	width: 505px;
}
.contactDetails {
	width: 350px;
	float: left;
}
.serviceSpacer {width: 240px;}
.subTitle {
	font-weight: normal;
	margin: 20px 0;
	text-transform: none;
	color: #ccc;
	font-size: 24px;
	text-align: center;
}
.contactInfo {
	width: 120px;
}
.contactImage {
	border: 1px solid #ccc;
	padding: 2px;
}
/*  ----------------------------|  MAIN BUTTONS  |----------------------------  */
#mainButtonsWrap {
	width: 960px;
	margin: 30px 0;
	list-style: none;
}
#buttonOne {background: url(../images/button_01.gif); width: 300px; height: 115px; float: left; cursor: pointer;}
#buttonOneHeading {background: url(../images/get-security.gif); width: 185px; height: 20px;}
#buttonTwo {background: url(../images/button_02.gif); width: 304px; height: 115px; float: left; cursor: pointer;}
#buttonTwoHeading {background: url(../images/why-apl.gif); width: 183px; height: 20px;}
#buttonThree {background: url(../images/button_03.gif); width: 315px; height: 115px; float: left; cursor: pointer;}
#buttonThreeHeading {background: url(../images/contact-us.gif); width: 117px; height: 20px;}

.buttonPadding {padding: 20px 0 0 100px;}
.buttonHeading {position: absolute; text-indent: -9000em;}
.pText {padding: 4px; line-height: 20px; width: 160px;}
.buttonSpace {margin: 0 10px 0 25px;}
/*  ----------------------------|  KEY HIGHLIGHTS  |----------------------------  */
#keyHighlights {
	margin: 0 auto;
	width: 900px;
	height: 205px;
	background: url('../images/key_bg.gif');
}
#keyHighlightsPadding {
	padding: 10px 0px;
}
#highlightOne {
	width: 470px;
	line-height: 22px;
	float: left;
	margin-right: 10px;
}
#highlightTwo {
	width: 400px;
	line-height: 22px;
	float: left;
}
.mainHeading {
	font-size: 18px;
}
.highlightContent {
	font-size: 11px;
	width: 180px;
	margin: 20px 0 0 12px;
	float: left;
}
/*  ----------------------------|  WEBSITE FOOTER  |----------------------------  */
#footer {
	font: 10px tahoma;
	color: #333;
	width: 960px;
	height: 80px;
	background: url('../images/footer.gif');
	margin: 30px 0 0 0;
}
#footerPadding {
	padding: 45px 10px 0 10px;
}
#footer a {color: #333; text-decoration: none;}
#footerLeft {float: left; width: 200px;}
#footerRight {float: right; width: 200px;}
#keyWords {margin: 5px;}
/*  ----------------------------|  CUSTOM CLASSES  |----------------------------  */
.image {
	border: 4px solid #fff;
	margin: 2px 0;
}
a .image {
	border: 4px solid #fff;
}
a:hover .image {
	border: 4px solid #ddd;
}
.spacer {clear: both; width: 100%; height: 1px;}
.floatLeft {float: left;}
.floatRight {float: right;}
.clearBoth {clear: both;}
.keyServices {
	margin: 10px 0;
}
.map {border: 1px solid #ccc; padding: 2px;}
.mapSlogan {font-size: 11px;}