@charset "UTF-8";

/*

 AA - 28/02/2008

 

 */

/*

 COLORS:

 1. body light blue washed : #E7E7EE;

 2. Navigation Red: #9F0028;

 3. Text strong blue:#0F1255;

 4. widgets light blue: #52668C;

 5. Yello: #E0AF23;

 6. Dark Grey: #3A414B;

 

 */

/*---------------------------------------------GENERAL----------------------------------------*/

* {

    margin: 0;

    padding: 0;

    background: transparent;

    border: none;

}



html, body {

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    background: #3A414B;

    color: #0F1255;

}



html {

}



body {

}



h1, h2, h3, h4 {

    color: #0F1255;

    font-family: Arial, Helvetica, sans-serif;

    font-weight: bold;

    padding: 0 0 5px 0;

    text-transform: capitalize;

}



h1 {

    font-size: 24px;

}



h2 {

    font-size: 20px;

}



h3 {

    font-size: 14px;

}



p {

    line-height: 16px;

    margin: 0 0 10px 0;

}



ul, ol {

    list-style: none;

}



a img, a:link img, a:hover img, a:active img, a:visited img {

    border: none;

}



a, a:link, a:visited, a:active {

    text-decoration: none;

    color: #52668C;

}



a:hover {

    text-decoration: underline;

    color: #52668C;

}



.wrapper {

background: #3A414B;

    width: 980px;

    margin: 0 auto;

}

/*---------------------------------------------HEADER----------------------------------------*/

#header {

    background: #3A414B;

    height: 141px;

}



#header img {

    float: left;

}



#logoLink {

    float: left;

    position: relative;

    width: 200px;

}



#logoLink span {

    position: absolute;

    top: 40px;

    left: 76px;

    color: #E7E7EE;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

}



#logoLink span b{

    text-transform: uppercase;

	text-decoration:none;

	font-size: 13px;

}



#header #headerFlash {

    height: 110px;

    width: 500px;

    float: left;

}

/*this is small menu on top right of each page*/

ul.tinyNav {

    /* float:right; */

    text-align: right;

    margin: 1px 0 0 0;

}



ul.tinyNav li {

    margin: 0 0 -1px 0;

}



ul.tinyNav li a:link, ul.tinyNav li a:active, ul.tinyNav li a:visited {

    font-size: 9px;

    color: #FFF;

}



ul#tinyNav-losAngeles #loc-LoasAngeles a:link, ul#tinyNav-sanFrancisco #loc-SanFrancisco a:link, ul#tinyNav-lasVegas #loc-LasVegas a:link, ul#tinyNav-emergency #loc-Emergency a:link, ul#tinyNav-gates #loc-Gates a:link, ul#tinyNav-security #loc-Security a:link, ul#tinyNav-wroughtIron #loc-WroughtIron a:link {

    color: #9F0028;

}

/*this is main navigation for the entire site*/

#mainNav {

    background: #9F0028 url(../assets/nav-back-double.gif) left top no-repeat;

    width: 980px;

    height: 30px;

    float: left;

    display: block;

}



#mainNav li {

    float: left;

}





#mainNav li a, 

#mainNav li a:link, 

#mainNav li a:active, 

#mainNav li a:visited {

    text-transform: uppercase;

    color: #FFF;

    font-size: 11px;

    font-weight: bold;

	line-height: 30px;

    height: 30px;

    display: block;

    border-right: 1px solid #3A414B;

	border-left: 1px solid #3A414B;

	text-align:center;   

}



#mainNav li a:hover {

	color: #3A414B;

    background: #E0AF23;

    text-decoration: none;

}





li#mainNav-Home a, 

li#mainNav-Home a:link, 

li#mainNav-Home a:visited, 

li#mainNav-Home a:active, 

li#mainNav-Home a:hover {

    border-left: none;

	

}



li#mainNav-Security a, 

li#mainNav-Security a:link, 

li#mainNav-Security a:active, 

li#mainNav-Security a:visited {

	border-right: none; 

}





li#mainNav-Home a{width:100px;}

li#mainNav-Emergency a{width:155px;} 

li#mainNav-Car a{width:140px;} 

li#mainNav-Comercial a{width:140px;} 

li#mainNav-Residential a{width:140px;} 

li#mainNav-Gates a{width:140px;} 

li#mainNav-Garage a{width:140px;} 

li#mainNav-Wrought a{width:152px;}

li#mainNav-Security a{width:140px;} 





#Category-emeregncy #mainNav-Emergency a, 

#Category-car #mainNav-Car a, 

#Category-comercial #mainNav-Comercial a, 

#Category-residential #mainNav-Residential a, 

#Category-gates #mainNav-Gates a, 

#Category-garage #mainNav-Garage a, 

#Category-wrought #mainNav-Wrought a{

 	color: #3A414B;

    background: #E0AF23;

}



li#mainNav-Home a:hover,

#Category-home #mainNav-Home a,

#Category-home #mainNav-Home a:link, 

#Category-home #mainNav-Home a:visited, 

#Category-home #mainNav-Home a:active {

 	color: #3A414B;

    background: #E0AF23 url(../assets/nav-back-double.gif) left bottom no-repeat;

}



li#mainNav-Security a:hover,

#Category-security #mainNav-Security a,

#Category-security #mainNav-Security a:link,

#Category-security #mainNav-Security a:visited,

#Category-security #mainNav-Security a:active {  

	color: #3A414B;

    background: #E0AF23 url(../assets/nav-back-double.gif) right bottom no-repeat;

}



/*---------------------------------------------CONTENT----------------------------------------*/

#content {

    width: 630px;

    float: left;

    margin: 10px 0;

}



#truckBanner {

    width: 310px;

    height: 150px;

    background: url(../assets/banner-back.gif) left top no-repeat;

    float: left;

}

/* >>>> phone banner */

#phoneBanner {

    width: 310px;

    height: 150px;

    background: url(../assets/phoneBanner.jpg) left top no-repeat;

    float: right;

	position:relative;

}



#phoneBanner h2 {

    position: relative;

    padding-top: 10px;

    font-size: 16px;

    color: #9F0028;

}



#phoneBanner h2 a {

    color: #9F0028;

}



#phoneBanner h2 span {

    font-size: 14px;

    color: #52668C;

    padding: 0 5px;

}



#phoneBanner h3 {

    font-size: 9px;

    margin-top: -5px;

}



#phoneBanner .phone1800 {

    font-size: 16px;

    font-weight: 900;

    margin: -8px 0 0 10px;

}



#importantNotice {

    width: 100px;

    margin: -5px auto 0 auto;

    font-weight: bold;

    text-transform: lowercase;

}

#iconsHolder{

	width:42px;

	position:absolute;

	right:12px;

	bottom:8px;

}



#iconsHolder img{

	cursor:pointer;

}



#breadCrumbs {

    margin: 10px 0;

    width: 630px;

    height: 30px;

    background: url(../assets/crumbs-back.gif) left top no-repeat;

    float: right;

}



#breadCrumbs li {

    height: 30px;

    line-height: 30px;

    display: block;

    float: left;

    background: url(../assets/crumbs-divider.gif) right top no-repeat;

    padding: 0 30px 0 10px;

    font-size: 11px;

    text-transform: capitalize;

    font-weight: bold;

    color: #0F1255;

}



#mainContent {

    width: 630px;

    background: #FFF url(../assets/content-top.gif) left top no-repeat;

    position: relative;

    text-align: left;

    float: left;

}



#roundCornersBottom {

    background: #FFF url(../assets/crumbs-back.gif) left bottom no-repeat;

    height: 12px;

    width: 630px;

    position: absolute;

    bottom: 0px;

    left: 0;

}



div#leftCol {

    width: 310px;

    float: left;

    margin: 10px 0 0 10px !important;

	margin: 10px 5px 0 5px;

}



#leftColVidContainer {

    margin-bottom: 10px;

}

/*-----------------------------------SMALL WIDGESTS ON MAIN CONTENT AREA (YELLO AND BLUE TITLE)---------------------------------*/

#rightCol {

    width: 290px;

    float: right;

    margin: 10px 10px 0 0 !important;

	margin: 10px 5px 0 0;

}



.widget {

    width: 290px;

    background: url(../assets/widget-back.gif) left bottom no-repeat;

    margin-bottom: 10px;

    position: relative;

   	padding-bottom: 20px;

    z-index: 1;

}

.widget h3{

margin-left:10px;

}



.widget p, .widget ul, .widget ol {

    width: 270px;

    margin: 0 0 10px 10px;

}



.title-blue h2 {

    background: url(../assets/widget-title-blue.gif) left top no-repeat;

    color: #FFF;

    height: 30px;

    line-height: 30px;

    padding: 0 0 0 10px;

    margin: 0 0 10px 0;

    font-style: italic;

}



.title-yellow h2 {

    background: url(../assets/widget-title-yellow.gif) left top no-repeat;

    color: #3A414B;

    height: 30px;

    line-height: 30px;

    padding: 0 0 0 10px;

    margin: 0 0 10px 0;

    font-style: italic;

}



.widgetLeftLink {

    color: #9F0028;

    font-weight: bold;

    position: absolute;

    bottom: 5px;

    left: 5px;

}



.widgetRightLink {

    color: #9F0028;

    font-weight: bold;

    position: absolute;

    bottom: 5px;

    right: 5px;

}



.widgetLeftLink a:link, .widgetRightLink a:link {

    color: #0F1255;

    margin: 0 3px;

}

/* >>>> tag cloud */

.tagCloud {

    padding-bottom: 5px;

}

/* display the individual items next to each other, not one-per-line */

.tag-cloud li {

    display: inline;

    padding: 2px;

}

/* hide the extra context from CSS-enabled browsers, but not screenreaders */

.tag-cloud span {

    position: absolute;

    left: -5000px;

    width: 990px;

}

/* size is purely presentational, based upon the class */

.tag-cloud .not-popular {

    font-size: 1em;

    font-weight: 400;

}



.tag-cloud .not-very-popular {

    font-size: 1.3em;

    font-weight: 500;

}



.tag-cloud .somewhat-popular {

    font-size: 1.6em;

    font-weight: 600;

}



.tag-cloud .popular {

    font-size: 1.9em;

    font-weight: 700;

}



.tag-cloud .very-popular {

    font-size: 2.2em;

    font-weight: 800;

}



.tag-cloud .ultra-popular {

    font-size: 2.5em;

    font-weight: 900;

}

/* >>>> sliding widgets */

.fl {

    float: left;

    display: inline;

}



.item img {

    margin-bottom: 5px;

}



.news_slider {

    position: relative;

    width: 270px;

    margin: 0 0 0 10px;

    text-align: left;

}



.news_slider .container {

    position: relative;

    top: 0;

    left: 0;

    width: 100%;

}



.news_slider .news_items {

    /* The width must be equal to .item ((width + margin-right) * 2).*/

    position: relative;

    width: 270px;

    top: 0;

    left: 0px;

    overflow: hidden;

}



.news_slider .item {

    /* Must contain a width and a margin-right.*/

    width: 270px;

    margin-right: 10px;

    margin-bottom: 5px;

}



.news_slider .item div {

    width: 270px;

    padding: 0 0 10px 0;

}



div.fl a {

    display: block;

}



.sliderPrevLink {

    color: #9F0028;

    font-weight: bold;

    position: absolute;

    bottom: -10px;

    left: 0px;

}



.sliderNextLink {

    color: #9F0028;

    font-weight: bold;

    position: absolute;

    bottom: -10px;

    right: 0px;

    cursor: pointer;

}



.sliderPrevLink a, .sliderNextLink a {

    color: #0F1255;

    margin: 0 5px;

    cursor: pointer;

}

/* >>>> light box - also look in lightbox.css for generic code related to this plug-in*/

#lightBoxWidget {

    padding: 0 0 10px 0;

}



#gallery {

    position: relative;

    left: 15px;

    top: 5px;

}



#gallery a {

    width: 80px;

    height: 80px;

    margin: 0 10px 0 0;

}



#gallery a img {

    margin-bottom: 10px;

}



#lightBoxInstructions {

    margin-left: 12px;

    font-weight: bold;

    color: #9F0028;

}

/* >>>>SMALL search box !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

#searchBoxSmall {

    width: 290px;

    background: url(../assets/widget-back.gif) left bottom no-repeat;

    height: 100px;

    margin: 0 0 10px 0;

    position: relative;

}



#searchBoxSmall fieldset {

    border: none;

}



#searchBoxSmall h2 {

    font-size: 12px;

    padding: 20px 0 5px 20px;

    background: url(../assets/widget-back-top.gif) left top no-repeat;

}



#searchBoxSmall h2 span {

    color: #9F0028;

}



#searchBoxSmall select {

    position: relative;

    left: 20px;

    width: 250px;

    height: 20px;

    line-height: 20px;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #FFF;

    color: #0F1255;

}



#searchBoxSmall option {

    padding: 0 0 0 5px;

}



#searchBoxSmall h3 {

    font-size: 10px;

    font-weight: bold;

    width: 250px;

    margin: 3px 0 0 20px;

    text-transform: lowercase;

}

/* >>>>COUPON COUPON !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.coupon {

    background: url(../assets/couponCut.gif) left bottom no-repeat;

}





.printCoupon {

    bottom: 12px;

    right: 5px;

	cursor:pointer;

}

/*---------------------------------------------WIDGETS----------------------------------------*/

#widgets {

    width: 340px;

    float: right;

    margin: 10px 0;

    text-align: left;

    /* display:none; */

}



.widgetsRoundCornersBottom {

    background: url(../assets/rightCol-back.gif) left bottom no-repeat;

    width: 340px;

    height: 12px;

    display: block;

    position: absolute;

    bottom: 0;

    left: 0;

}

/* >>>> top right image banner */

#locksImage {

    background: url(../assets/rightCol-back.gif) left top no-repeat;

    height: 190px;

    width: 340px;

    padding: 0;

    margin: 0 0 10px 0;

    position: relative;

}



#locksImage div img {

    width: 340px;

    height: 190px;

    top: 0;

    left: 0;

    float: left;

}



#locksImage div h3 {

    float: left;

    position: relative;

    top: -45px;

    left: 10px;

    z-index: 500;

}



#locksImage div h3 span {

    background: #FFF;

    padding: 5px;

    opacity: 0.6 !important;

    opacity: 60;

    z-index: 0;

}

/* .pics {

 height: 190px;

 width: 340px;

 padding: 0;

 margin: 0;

 }

 

 .pics img {

 width: 340px;

 height: 190px;

 top: 0;

 left: 0;

 float:left;

 } */

/* >>>> video */

#videoContainer {

    height: 250px;

}

/* >>>> google maps */

#mapContainer {

    background: url(../assets/map.jpg) left top no-repeat;

    height: 340px;

    margin: 0 0 10px 0;

    position: relative;

}



#map  {

    position: relative;

	width: 320px;

	height:320px;

    top: 10px;

    left: 10px;

}



/*

#googleMaps {

    background: url(../assets/rightCol-back.gif) left top no-repeat;

    height: 340px;

    margin: 0 0 10px 0;

    position: relative;

}



#googleMaps iframe {

    position: relative;

    top: 10px;

    left: 10px;

}

*/

/* >>>> search box */

#searchBox {

    background: url(../assets/rightCol-back.gif) left top no-repeat;

    height: 100px;

    margin: 0 0 10px 0;

    position: relative;

}



#searchBox fieldset {

    border: none;

}



#searchBox h2 {

    font-size: 14px;

    padding: 20px 0 5px 20px;

}



#searchBox h2 span {

    color: #9F0028;

}



#searchBox select {

    position: relative;

    left: 20px;

    width: 290px;

    height: 20px;

    line-height: 20px;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #FFF;

    color: #0F1255;

}



#searchBox option {

    padding: 0 0 0 5px;

}



#searchBox h3 {

    font-size: 10px;

    font-weight: bold;

    width: 290px;

    margin: 3px 0 0 20px;

    text-transform: lowercase;

}

/* >>>> discount coupon */

#discountCoupon {

    background: url(../assets/rightCol-back.gif) left top no-repeat;

    height: 100px;

    margin: 0 0 10px 0;

    position: relative;

    cursor:pointer;

}

#discountCoupon:hover{

 	cursor:pointer;

}



#discountCoupon h2 {

    width: 120px;

    letter-spacing: -1px;

    position: relative;

    top: 22px;

    left: 20px;

    font-size: 16px;

    font-style: italic;

    border-right: 1px solid #52668C;

    float: left;

    line-height: 18px;

}



#discountCoupon h1 {

    width: 183px;

    letter-spacing: -1px;

    position: relative;

    top: 22px;

    font-size: 10px;

    color: #0F1255;

    float: right;

    line-height: 16px;

}



#discountCoupon h1 span {

    font-size: 28px;

    color: #9F0028;

    display: block;

    line-height: 24px;

}



#discountCoupon a:hover h1{

	text-decoration:none;

}

/* >>>> keys logos */

#sponsersLogos {

    /*padding-left: 10px;*/

 	background: url(../assets/rightCol-back.gif) left top no-repeat;

    margin: 0 0 10px 0;

	position:relative;

	padding-top:15px;

	padding-bottom:15px;

}



#sponsersLogos a {

    height: 50px;

    width: 95px;

    display: block;

    float: left;

    margin: 0 0 15px 14px !important;

	margin: 0 0 15px 10px;

	z-index:500;

}



#sponsersLogos a:link img, #sponsersLogos a:visited img, #sponsersLogos a:active img {

    opacity: 0.3 !important;

    opacity: 30;

}



#sponsersLogos a:hover img {

    opacity: 1 !important;

    opacity: 100;

}



/*---------------------------------------------SITE MAP----------------------------------------*/

#Category-SiteMap #rightCol {

    padding-top: 33px;

}



#Category-SiteMap #leftCol ul, #Category-SiteMap #rightCol ul {

    margin-bottom: 15px;

}



/*---------------------------------------------QUICK FORM HOMEPAGE----------------------------------------*/



#quick_form {

    background: url(../assets/rightCol-back.gif) left top no-repeat;

    height: 190px;

    width: 340px;

    padding: 0;

    margin: 0 0 10px 0;

    position: relative;

}



#quick_form h2{

    position: relative;

    padding-top: 10px;

    font-size: 16px;

    color: #9F0028;

	text-align:center;



}



label {

    font-weight: bold;

	padding-left:20px;

}



.shortTextArea1 {

	padding-bottom: 0px;

	margin-top: 10px;

    width: 150px;

    height: 20px;

    line-height: 20px;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #FFF;

    color: #0F1255;

}



textarea.shortTextArea1 {

    line-height: 25px;

}



select.dropDown1 {

    margin-bottom: 0px;

	margin-left: 20px;

    width: 200px;

    height: 25px;

    line-height: 25px;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #FFF;

    color: #0F1255;

}



select.dropDown1 option {

    padding: 0 0 0 5px;

}



#submitBtn1 {

    width: 70px;

    text-align: center;

    position: relative;

    left: 0px;

    margin-bottom: 0px;

    padding: 5px 0;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #0F1255;

    color: #FFF;

    font-weight: bold;

    cursor: pointer;

	text-align:center;

}



#submitBtn:hover {

    background: #52668C;

    color: #E0AF23;

}











/*---------------------------------------------QUOTE FORM----------------------------------------*/

#Category-Quote form {

    /* margin-bottom:15px; */

}



.mandatoryFields {

    color: #9F0028;

}



label {

    font-weight: bold;

}



.shortTextArea {

    margin-bottom: 10px;

    width: 300px;

    height: 20px;

    line-height: 20px;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #FFF;

    color: #0F1255;

}



textarea.shortTextArea {

    height: auto;

    line-height: normal;

}



select.dropDown {

    margin-bottom: 10px;

    width: 300px;

    height: 20px;

    line-height: 20px;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #FFF;

    color: #0F1255;

}



select.dropDown option {

    padding: 0 0 0 5px;

}



#submitBtn {

    width: 100px;

    text-align: center;

    position: relative;

    left: 200px;

    margin-bottom: 15px;

    padding: 5px 0;

    border-top: 1px solid #AAA;

    border-left: 1px solid #AAA;

    border-bottom: 1px solid #DDD;

    border-right: 1px solid #DDD;

    background: #0F1255;

    color: #FFF;

    font-weight: bold;

    cursor: pointer;

}



#submitBtn:hover {

    background: #52668C;

    color: #E0AF23;

}

/*---------------------------------------------CONTACT BUTTON----------------------------------------*/

.contactUsBtn a {

    width: 290px;

    height: 45px;

    display: block;

    background: url(../assets/contact-us-btn.jpg) left top no-repeat;

    text-align: center;

    font-size: 18px;

    text-transform: uppercase;

    font-weight: bold;

    color: #FFF;

    line-height: 44px;

}



.contactUsBtn a:hover {

    background: url(../assets/contact-us-btn.jpg) left bottom no-repeat;

}

/*---------------------------------------------FOOTER----------------------------------------*/

#mainWrapper {

    padding-bottom: 10px;

}



#footer {

    width: 980px;

    background: url(../assets/footer-back.gif) left top no-repeat;

    /* margin:0 0 50px 0;

     clear:left; */

    float: left;

    text-align: left;

    position: relative;;

}



#footerBottom {

    width: 980px;

    height: 15px;

    background: url(../assets/footer-back.gif) left bottom no-repeat;

    position: absolute;

    bottom: 0;

    left: 0;

}



ul#phoneNumbers {

    width: 310px;

    float: left;

    font-size: 11px;

    color: #52668C;

	

	margin: 20px 0 20px 20px !important;

	margin: 20px 0 20px 10px;

}



.phoneNumber {

    margin: 4px 0 0 0;

}



.phone1800 {

    font-size: 24px;

    font-weight: bold;

    color: #9F0028;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 0;

}



li.footerTitle {

    font-size: 12px;

    font-weight: bold;

    color: #0F1255;

    letter-spacing: 1px;

    margin-bottom: 0;

}



ul.footerLinks, ul.creditCards {

    float: left;

    width: 150px;

    margin: 20px 0 25px 10px;

    z-index: 500;

    padding-bottom: 20px;

}



ul.footerLinks a:link {

    font-size: 10px;

    color: #52668C;

}



ul.creditCards li {

    margin-bottom: 10px;

    margin-left: 10px;

}



ul.creditCards li img {

    margin-right: 5px;

}



#fatDalmation {

    position: absolute;

    right: 50px;

    bottom: 15px;

    z-index: 50;

}

/*---------------------------------------------CLEARERS----------------------------------------*/

#sponsersLogos:after,

#footer:after, 

#mainNav:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}



#sponsersLogos, 

#footer, 

#mainNav {

    height: 1%;

}



*:first-child + html div#sponsersLogos,

*:first-child + html #footer, 

*:first-child + html #mainNav {

    min-height: 1px;

}